|
官網(wǎng)datagrid的api：http://jquery-easyui./document:datagrid
首先，先看看官方的editor的介紹：
可以看到如果我們要自定義一個(gè)editor，需要實(shí)現(xiàn)四個(gè)方法（init，getValue,setValue,resize)。
下面是我自己擴(kuò)展的一個(gè)datetimebox類型
01 | $.extend($.fn.datagrid.defaults.editors, { |
02 | datetimebox: {//datetimebox就是你要自定義editor的名稱 |
03 | init: function(container, options){ |
04 | var input = $('<input class="easyuidatetimebox">').appendTo(container); |
05 | return input.datetimebox({ |
06 | formatter:function(date){ |
07 | return new Date(date).format("yyyy-MM-dd hh:mm:ss"); |
11 | getValue: function(target){ |
12 | return $(target).parent().find('input.combo-value').val(); |
14 | setValue: function(target, value){ |
15 | $(target).datetimebox("setValue",value); |
17 | resize: function(target, width){ |
18 | var input = $(target); |
19 | if ($.boxModel == true){ |
20 | input.width(width - (input.outerWidth() - input.width())); |
這是最終出來的效果：
 
使用方法：
<th field="datetime" width="150" editor="datetimebox">datetime</th>
或者:
在配置里面
{
field:"dataTime",
editor:"datetimebox"
}
一般我們只許要注意init，getValue和setValue這三個(gè)方法，最主要的還是init的方法的實(shí)現(xiàn)。需要注意的是，這里的set和getValue方法都是針對(duì)于editor的，是給editor設(shè)值和獲取值的。
上面例子中涉及到的format方法：
02 | Date.prototype.format = function(format){ |
04 | * eg:format="yyyy-MM-dd hh:mm:ss"; |
07 | format = "yyyy-MM-dd hh:mm:ss"; |
11 | "M+": this.getMonth() + 1, // month |
12 | "d+": this.getDate(), // day |
13 | "h+": this.getHours(), // hour |
14 | "m+": this.getMinutes(), // minute |
15 | "s+": this.getSeconds(), // second |
16 | "q+": Math.floor((this.getMonth() + 3) / 3), // quarter |
17 | "S": this.getMilliseconds() |
21 | if (/(y+)/.test(format)) { |
22 | format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); |
26 | if (new RegExp("(" + k + ")").test(format)) { |
27 | format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" +o[k]).length)); |
|
