这次我们要从复杂的交互入手来说明一些用法,这才能让系统做出更加复杂的业务，上一节讲述了
本节主要演示扩展Datagrid行内编辑的属性,下面来看一个例子,我开启编辑行的时候，右边开启了一个查找图标，点击查找图标可以弹出对应的页面
从API得知，我们进行编辑时候可以使用很多类型：
| editor | string,object | 指明编辑类型。当字符串指明编辑类型的时候，对象包含2个属性： type：字符串，该编辑类型可以使用的类型有：text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree。 options：对象，object, 该编辑器属性对应于编辑类型。 |
使用$.fn.datagrid.defaults.editors重载默认值。
每个编辑器都有以下方法:
| 名称 | 属性 | 描述 |
|---|---|---|
| init | container, options | 初始化编辑器并返回目标对象。 |
| destroy | target | 注销编辑器。 |
| getValue | target | 获取编辑框的值。 |
| setValue | target , value | 设置编辑框的值。 |
| resize | target , width | 调整编辑器 |
我们可以重写和补充这些类型的属性，非常之灵活
$.extend($.fn.datagrid.defaults.editors, { seltext: { init: function (t, a) { //设置一个输入框和一个扩大镜图标 var i = $(' ').appendTo(t); if (a != undefined && a != null && a._medg) { i.keydown(function (t) { e(t, a._medg) }) } return i }, destroy: function (e) { //销毁 $(e).remove() }, getValue: function (e) { //datagrid 结束编辑模式，通过该方法返回编辑最终值 return $(e).val() }, setValue: function (e, t) { //datagrid 进入编辑器模式，通过该方法为编辑赋值 $(e).val(t); setTimeout(function () { e.focus() }, 100) }, resize: function (e, t) { //列宽改变后调整编辑器宽度 $(e[0]).width(t - 30); } }}); 前端调用与原来调用方式一样，只是我们多了一个选择： type: 'seltext' 即可
{ field: 'WareDetailsName', title: 'WareDetailsName', width: 80,sortable:true,editor: { type: 'seltext', options: { required: true } }, styler:function(value,row,index){ return 'color:red;'; } }, 有了这个扩展，我们可以对任何类型进行精心定制，比如，日期区间，多文本，上传附件等等
总结：
在加载Easyui.min.js后引入jquery.easyui.plus.js即可
没有特别的复杂用法，其实EasyUI是一个可以扩展很多东西的组件，我们之间还对他扩展过万能查询 http://www.cnblogs.com/ymnets/p/6129139.html下面分享我的一个扩展JS，主要来替代Easyui的不足
1.扩展tree，使其支持平滑数据格式
2.扩展combotree，使其支持平滑数据格式
3.让window居中
4.防止panel/window/dialog组件超出浏览器边界
5. panel关闭时回收内存，主要用于layout使用iframe嵌入网页时的内存泄漏问题
6.datagrid过长显示...截断
jquery.easyui.plus.js