扩展jqgrid的colModel编辑类型

Question

我将使用JqGrid的许多不同的网页。 我有一些自定义格式和自定义edittype 比如我想使用日期选择器来编辑日期

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

Answer 1

我将与自定义格式化开始。 jqGrid支持predefined formatters像formatter: "integer",formatter: "date"。你可以“注册”你的custom formatter和unformatter作为一个更多的价值，你可以使用。例如，如果您想注册formatter: "myCheckbox"，则需要将$.fn.fmatter.myCheckbox定义为formetter函数，将$.fn.fmatter.myCheckbox.unformat定义为unformatter函数。

$.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代码使用字体真棒4.x和登记新的formatter: "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将被覆盖为值“width: 70”列“total”。

柱模板的使用允许您定义曾经在你的代码模板针对使用jQuery UI的日期选择器例如和你的项目只是在模板上相应的参考的每一个网格的每列使用日期。

github上的jqGrid的当前版本支持将模板“注册”为字符串。所以下一个版本（高于4.6。0），我希望即将发布，将支持以下语法：

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

（在例子中，我并没有在模板中包含width）

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

详情请参阅the pull request 。

Answer 2

与任何jQuery插件，你可以用$ .extend（）这样的扩展插件：

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

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

})(jQuery);