标签：
原文地址:http://www.jeasyuicn.com/post-3.html
官网datagrid的api：http://jquery-easyui.wikidot.com/document:datagrid
首先，先看看官方的editor的介绍：
可以看到如果我们要自定义一个editor，需要实现四个方法（init，getValue,setValue,resize)。
下面是我自己扩展的一个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"); |
08 |
} |
09 |
}); |
10 |
}, |
11 |
getValue: function(target){ |
12 |
return $(target).parent().find(‘input.combo-value‘).val(); |
13 |
}, |
14 |
setValue: function(target, value){ |
15 |
$(target).datetimebox("setValue",value); |
16 |
}, |
17 |
resize: function(target, width){ |
18 |
var input = $(target); |
19 |
if ($.boxModel == true){ |
20 |
input.width(width - (input.outerWidth() - input.width())); |
21 |
} else { |
22 |
input.width(width); |
23 |
} |
24 |
} |
25 |
} |
26 |
}); |
这是最终出来的效果：
使用方法：
<th field="datetime" width="150" editor="datetimebox">datetime</th>
或者:
在配置里面
{
field:"dataTime",
editor:"datetimebox"
}
一般我们只许要注意init，getValue和setValue这三个方法，最主要的还是init的方法的实现。需要注意的是，这里的set和getValue方法都是针对于editor的，是给editor设值和获取值的。
上面例子中涉及到的format方法：
1 //时间格式化 2 Date.prototype.format = function(format){ 3 /* 4 * eg:format="yyyy-MM-dd hh:mm:ss"; 5 */ 6 if(!format){ 7 format = "yyyy-MM-dd hh:mm:ss"; 8 } 9 10 var o = { 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() 18 // millisecond 19 }; 20 21 if (/(y+)/.test(format)) { 22 format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); 23 } 24 25 for (var k in o) { 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)); 28 } 29 } 30 return format; 31 };
[转]jQuery EasyUI自定义DataGrid的Editor
标签：
原文地址：http://www.cnblogs.com/dirgo/p/5184590.html
