javascript - 为 colModel edittype 扩展 jqgrid

Question

我将在许多不同的网页中使用 JqGrid。我有一些自定义格式化程序和自定义编辑类型例如，我想使用日期选择器来编辑日期

所以，我不想使用 colModel 的 edittype 作为自定义，并提供自定义函数来做到这一点，我想“如果可能”为 jqgrid edittype 编写一个扩展，所以我可以只写“date”，然后我会写一个扩展以将其替换为日期选择器。正如我所说，这是为了可重用性，因此我不必为每个网页/jqgrid 执行自定义编辑类型，而是只能在该位置执行一次。有没有关于如何扩展 jqgrid 的文档？

Answer 1

我将从自定义格式化程序开始。 jqGrid支持predefined formatters例如格式化程序:“整数”，格式化程序:“日期”。您可以“注册”您的 custom formatter和 unformatter作为您可以使用的又一个值。例如，如果您想注册 formatter: "myCheckbox" 您需要将 $.fn.fmatter.myCheckbox 定义为 formatter 函数，并定义 $.fn.fmatter.myCheckbox .unformat 作为取消格式化函数。

$.extend($.fn.fmatter, {
    myCheckbox: function (cellValue, options, rowObject) { 
        // the code of the custom formatter is here
        ...
    }
});
$.extend($.fn.fmatter.myCheckbox, {
    unformat: function (cellValue, options, elem) {
        // the code of the custom unformatter is here
        ...
    }
});

代码来自here使用 Font Awesome 4.x 并注册新的格式化程序:“checkboxFontAwesome4”。 “注册”自定义格式化程序可以简化您的代码。

下一个功能。 jqGrid 从版本 3.8.2 jqGrid 开始支持列模板(请参阅 the old answer )。它允许您将 colModel 中使用的通用设置定义为一个对象，并使用 colModel 中的template 属性。例如，如果您有许多包含数字的列，您可以将 numberTemplate 对象定义为

var numberTemplate = {
        formatter: "number", align: "right", sorttype: "number", width: 60,
        searchoptions: {
            sopt: ["eq", "ne", "lt", "le", "gt", "ge"]
        }
    };

然后您可以将树列“tax”、“amount”和“total”定义为

colModel: [
    ...
    { name: "tax", template: numberTemplate },
    { name: "amount", template: numberTemplate },
    { name: "total", width: 70, template: numberTemplate },
    ...
]

按照您定义列的方式，numberTemplate 中的所有属性都将应用于列中。 numberTemplate 中定义的默认 width: 60 将被覆盖为“total”列的值 width: 70。

列模板的使用允许您在代码模板中为日期定义一次，例如使用 jQuery UI Datepicker 并在项目的每个网格的每一列中仅使用模板。

github上jqGrid的当前版本支持将模板“注册”为字符串。因此，我希望很快发布的下一个版本(更高版本为 4.6.0)将支持以下语法:

$.extend($.jgrid, {
    cmTemplate: {
        myNumber: {
            formatter: "number", align: "right", sorttype: "number",
            searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"] }
        }
    }
});

(在示例中，我没有在模板中包含宽度)

colModel: [
    ...
    { name: "tax", width: 52, template: "number" },
    { name: "amount", width: 75, template: "number" },
    { name: "total", width: 60, template: "number" },
    ....
]

参见the pull request了解更多详情。