[转]jQuery EasyUI自定义DataGrid的Editor
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[转]jQuery EasyUI自定义DataGrid的Editor相关的知识,希望对你有一定的参考价值。
原文地址: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的主要内容,如果未能解决你的问题,请参考以下文章
JQuery-EasyUI的DataGrid控件显示日期型数据
jquery easyui datagrid 保存/加载自定义配置每列属性
我在别人写的jquery easyui自定义类似Dialog的组件,其中有设置了mask:true,mask是啥属性啊