擴展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);