Question

我打算将JqGrid用于许多不同的网页。我有一些自定义格式化程序和自定义edittype 例如，我想使用datepicker来编辑日期

所以，不是使用colModel的edittype作为自定义，并提供自定义函数来做到这一点，我想“如果可能”写一个jqgrid edittype的扩展，所以我只能写“日期”，我会写一个用datepickeer替换它的扩展名。正如我所说，它是为了重用，所以不是为每个网页/ jqgrid做自定义编辑类型，我只能在那个地方做一次。有没有关于如何扩展jqgrid的文档？

Answer 1

我会从自定义格式化程序开始。 jqGrid支持formatter: "integer"，例如formatter: "date"，formatter: "myCheckbox"。您可以＆＃34;注册＆＃34; 您的predefined formatters和custom formatter作为您可以使用的另一个值。例如，如果要注册$.fn.fmatter.myCheckbox，则需要将$.fn.fmatter.myCheckbox.unformat定义为formetter函数，将$.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 ... } });定义为非格式化函数。

formatter: "checkboxFontAwesome4"

来自unformatter的代码使用Font Awesome 4.x并注册新的colModel。＆＃34;注册＆＃34;自定义格式化程序可以简化您的代码。

下一个功能。 jqGrid支持从版本3.8.2 jqGrid开始的列模板（请参阅here）。它允许您将template中使用的常用设置定义为一个对象，并在colModel中使用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

在您定义列的方式中，width: 60中的所有属性都将应用于列中。 numberTemplate中定义的默认width: 70将被覆盖为列的值$.extend($.jgrid, { cmTemplate: { myNumber: { formatter: "number", align: "right", sorttype: "number", searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"] } } } });＆＃34;总计＆＃34;。

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

github上当前版本的jqGrid支持＆＃34;注册＆＃34;模板作为字符串。因此，我希望很快发布的下一个版本（更高版本为4.6.0）将支持以下语法：

width

（在示例中，我没有在模板中包含colModel: [ ... { name: "tax", width: 52, template: "number" }, { name: "amount", width: 75, template: "number" }, { name: "total", width: 60, template: "number" }, .... ]）

{{1}}

有关详细信息，请参阅the old answer。

Answer 2

与任何jQuery插件一样，您可以使用$ .extend（）扩展插件，如下所示：

(function($) {
    var extensionMethods = {
        // ...
    };

    $.extend(true,$.jgrid, extensionMethods);

})(jQuery);

为colModel edittype扩展jqgrid

2 个答案: