jQuery技术

jQuery EasyUI自定义DataGrid的Editor

字号+ 作者:H5之家 来源:H5之家 2015-11-10 10:44 我要评论( )

官网datagrid的api:http://jquery-easyui.wikidot.com/document...

jQuery EasyUI自定义DataGrid的Editor

分类:扩展 发表于 2011-05-11 05:54 , 已有126970次阅读

官网datagrid的api::datagrid

首先,先看看官方的editor的介绍:

点击查看原图

可以看到如果我们要自定义一个editor,需要实现四个方法(init,getValue,setValue,resize)。

下面是我自己扩展的一个datetimebox类型

$.extend($.fn.datagrid.defaults.editors, { datetimebox: {//datetimebox就是你要自定义editor的名称 init: function(container, options){ var input = $('<input>').appendTo(container); return input.datetimebox({ formatter:function(date){ return new Date(date).format("yyyy-MM-dd hh:mm:ss"); } }); }, getValue: function(target){ return $(target).parent().find('input.combo-value').val(); }, setValue: function(target, value){ $(target).datetimebox("setValue",value); }, resize: function(target, width){ var input = $(target); if ($.boxModel == true){ input.width(width - (input.outerWidth() - input.width())); } else { input.width(width); } } } });

这是最终出来的效果:

使用方法:

<th field="datetime" editor="datetimebox">datetime</th>

或者:

在配置里面

{

field:"dataTime",

editor:"datetimebox"

}

一般我们只许要注意init,getValue和setValue这三个方法,最主要的还是init的方法的实现。需要注意的是,这里的set和getValue方法都是针对于editor的,是给editor设值和获取值的。

 

上面例子中涉及到的format方法:

//时间格式化 Date.prototype.format = function(format){ /* * eg:format="yyyy-MM-dd hh:mm:ss"; */ if(!format){ format = "yyyy-MM-dd hh:mm:ss"; } var o = { "M+": this.getMonth() + 1, // month "d+": this.getDate(), // day "h+": this.getHours(), // hour "m+": this.getMinutes(), // minute "s+": this.getSeconds(), // second "q+": Math.floor((this.getMonth() + 3) / 3), // quarter "S": this.getMilliseconds() // millisecond }; if (/(y+)/.test(format)) { format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); } for (var k in o) { if (new RegExp("(" + k + ")").test(format)) { format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" +o[k]).length)); } } return format; };

标签:

声明:Easyui学习班 博客文章版权属于作者,受法律保护。未经同意不得转载。

  • « jQuery EasyUI手动创建窗口插件——windowControl2.1
  • Easyui学习班正式开课了»

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • jquery中EasyUI使用技巧小结

      jquery中EasyUI使用技巧小结

      2016-01-21 08:00

    • Jqueryeasyui学习笔记1

      Jqueryeasyui学习笔记1

      2015-11-25 08:45

    • Jquery插件 easyU?jquery easyui I属性汇总_雨枫技术教程网

      Jquery插件 easyU?jquery easyui I属性汇总_雨枫技术教程网

      2015-11-23 13:37

    • jQuery EasyUI使用教程:动态添加标签

      jQuery EasyUI使用教程:动态添加标签

      2015-11-20 11:31

    网友点评