[转]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是啥属性啊

自定义表单验证

[转]jQuery EasyUI 扩展-- 主题(Themes)

EasyUI portal自定义小图标,不是用js方式加载