原文地址:http://www.jeasyuicn.com/post-3.htmlhtml
官網datagrid的api:http://jquery-easyui.wikidot.com/document:datagridjquery
首先,先看看官方的editor的介紹:api
能夠看到若是咱們要自定義一個editor,須要實現四個方法(init,getValue,setValue,resize)。app
下面是我本身擴展的一個datetimebox類型ide
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 |
}); |
這是最終出來的效果:post
使用方法:ui
<th field="datetime" width="150" editor="datetimebox">datetime</th>this
或者:spa
在配置裏面prototype
{
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 };