系列目录

这次我们要从复杂的交互入手来说明一些用法,这才能让系统做出更加复杂的业务，上一节讲述了Datagird的批量编辑和提交
本节主要演示扩展Datagrid行内编辑的属性,下面来看一个例子,我开启编辑行的时候，右边开启了一个查找图标，点击查找图标可以弹出对应的页面

ASP.NET MVC5+EF6+EasyUI 后台管理系统（83）-Easyui 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	调整编辑器

我们可以重写和补充这些类型的属性，非常之灵活

ASP.NET MVC5+EF6+EasyUI 后台管理系统（83）-Easyui Datagrid 行内编辑扩展

$.extend($.fn.datagrid.defaults.editors, {
    seltext: {
        init: function (t, a) {
            //设置一个输入框和一个扩大镜图标
            var i = $('<input type="text" class="datagrid-editable-input"  />&nbsp;<a href="javascript:SelDetails()" class="fa fa-search color-black"></a>').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;'; 
                        }
                    },

有了这个扩展，我们可以对任何类型进行精心定制，比如，日期区间，多文本，上传附件等等

ASP.NET MVC5+EF6+EasyUI 后台管理系统（83）-Easyui Datagrid 行内编辑扩展

总结：

在加载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

本文转自ymnets博客园博客，原文链接：http://www.cnblogs.com/ymnets/p/6737779.html，如需转载请自行联系原作者

ASP.NET MVC5+EF6+EasyUI 后台管理系统（83）-Easyui Datagrid 行内编辑扩展

系列目录

使用$.fn.datagrid.defaults.editors重载默认值。

总结：

相关推荐