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

 

系列目录

这次我们要从复杂的交互入手来说明一些用法,这才能让系统做出更加复杂的业务，上一节讲述了Datagird的批量编辑和提交
本节主要演示扩展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 = $('<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;'; 
                        }
                    },

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

 总结：

在加载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过长显示...截断

/** 
* panel关闭时回收内存，主要用于layout使用iframe嵌入网页时的内存泄漏问题
*/
$.fn.panel.defaults.onBeforeDestroy = function () {

    var frame = $('iframe', this);
    try {
        // alert('销毁，清理内存');
        if (frame.length > 0) {
            for (var i = 0; i < frame.length; i++) {
                frame[i].contentWindow.document.write('');
                frame[i].contentWindow.close();
            }
            frame.remove();
            if ($.browser.msie) {
                CollectGarbage();
            }
        }
    } catch (e) {
    }
};


var oriFunc = $.fn.datagrid.defaults.view.onAfterRender;
$.fn.datagrid.defaults.view.onAfterRender = function (tgt) {
    if ($(tgt).datagrid("getRows").length > 0) {

        $(tgt).datagrid("getPanel").find("div.datagrid-body").find("div.datagrid-cell").each(function () {
            var $Obj = $(this)
            $Obj.attr("title", $Obj.text());
        })
    }
};


var oriFunctree = $.fn.treegrid.defaults.view.onAfterRender;
$.fn.treegrid.defaults.view.onAfterRender = function (tgt) {
    if ($(tgt).treegrid("getRoots").length > 0) {

        $(tgt).treegrid("getPanel").find("div.datagrid-body").find("div.datagrid-cell").each(function () {
            var $Obj = $(this)
            $Obj.attr("title", $Obj.text());
        })
    }
};

/**
* 防止panel/window/dialog组件超出浏览器边界
* @param left
* @param top
*/

var easyuiPanelOnMove = function (left, top) {
    var l = left;
    var t = top;
    if (l < 1) {
        l = 1;
    }
    if (t < 1) {
        t = 1;
    }
    var width = parseInt($(this).parent().css('width')) + 14;
    var height = parseInt($(this).parent().css('height')) + 14;
    var right = l + width;
    var buttom = t + height;
    var browserWidth = $(window).width();
    var browserHeight = $(window).height();
    if (right > browserWidth) {
        l = browserWidth - width;
    }
    if (buttom > browserHeight) {
        t = browserHeight - height;
    }
    $(this).parent().css({/* 修正面板位置 */
        left: l,
        top: t
    });
};
//$.fn.dialog.defaults.onMove = easyuiPanelOnMove;
//$.fn.window.defaults.onMove = easyuiPanelOnMove;
//$.fn.panel.defaults.onMove = easyuiPanelOnMove;
//让window居中
var easyuiPanelOnOpen = function (left, top) {

    var iframeWidth = $(this).parent().parent().width();

    var iframeHeight = $(this).parent().parent().height();

    var windowWidth = $(this).parent().width();
    var windowHeight = $(this).parent().height();

    var setWidth = (iframeWidth - windowWidth) / 2;
    var setHeight = (iframeHeight - windowHeight) / 2;
    $(this).parent().css({/* 修正面板位置 */
        left: setWidth,
        top: setHeight
    });

    if (iframeHeight < windowHeight) {
        $(this).parent().css({/* 修正面板位置 */
            left: setWidth,
            top: 0
        });
    }
    $(".window-shadow").hide();
    //修复被撑大的问题
    if ($(".window-mask") != null) {
        if ($(".window-mask").size() > 1) {
            $(".window-mask")[0].remove();
        }
    }
    $(".window-mask").attr("style", "display: block; z-index: 9002; width: " + iframeWidth - 200 + "px; height: " + iframeHeight - 200 + "px;");

    //$(".window-mask").hide().width(1).height(3000).show();
};
$.fn.window.defaults.onOpen = easyuiPanelOnOpen;
var easyuiPanelOnClose = function (left, top) {


    $(".window-mask").hide();

    //$(".window-mask").hide().width(1).height(3000).show();
};

$.fn.window.defaults.onClose = easyuiPanelOnClose;

/**
* 
* @requires jQuery,EasyUI
* 
* 扩展tree，使其支持平滑数据格式
*/
$.fn.tree.defaults.loadFilter = function (data, parent) {
    var opt = $(this).data().tree.options;
    var idFiled, textFiled, parentField;
    //alert(opt.parentField);
    if (opt.parentField) {
        idFiled = opt.idFiled || 'id';
        textFiled = opt.textFiled || 'text';
        parentField = opt.parentField;
        var i, l, treeData = [], tmpMap = [];
        for (i = 0, l = data.length; i < l; i++) {
            tmpMap[data[i][idFiled]] = data[i];
        }
        for (i = 0, l = data.length; i < l; i++) {
            if (tmpMap[data[i][parentField]] && data[i][idFiled] != data[i][parentField]) {
                if (!tmpMap[data[i][parentField]]['children'])
                    tmpMap[data[i][parentField]]['children'] = [];
                data[i]['text'] = data[i][textFiled];
                tmpMap[data[i][parentField]]['children'].push(data[i]);
            } else {
                data[i]['text'] = data[i][textFiled];
                treeData.push(data[i]);
            }
        }
        return treeData;
    }
    return data;
};

/**

* @requires jQuery,EasyUI
* 
* 扩展combotree，使其支持平滑数据格式
*/
$.fn.combotree.defaults.loadFilter = $.fn.tree.defaults.loadFilter;

//如果datagrid过长显示...截断(格式化时候，然后调用resize事件)
//$.DataGridWrapTitleFormatter("值",$("#List"),"字段");
//onResizeColumn:function(field,width){ var refreshFieldList = ["字段名称","字段名称","字段名称"]; if(refreshFieldList.indexOf(field)>=0){$("#List").datagrid("reload");})}
$.extend({
    DataGridWrapTitleFormatter: function (value, obj, fidld) {
        if (value == undefined || value == null || value == "") {
            return "";
        }
        var options = obj.datagrid('getColumnOption', field);
        var cellWidth = 120;
        if (options != undefined) {
            cellWidth = options.width - 10;
        }
        return "<div style='width:" + cellWidth + "px;padding:0px 6px;line-height:25px;height:25px;margin-top:1px;cursor:pointer;white-space:nowrap:overflow:hidden;text-overflow:ellipsis;' title='" + value + "'>" + value + "</div>";
    }
});
//替换字符串
/*
 * 功    能：替换字符串中某些字符
 * 参    数：sInput-原始字符串  sChar-要被替换的子串 sReplaceChar-被替换的新串
 * 返 回 值：被替换后的字符串
 */
$.extend({
    ReplaceStrAll: function (sInput, sChar, sReplaceChar) {
        if (sInput == "" || sInput == undefined) {
            return "";
        }
        var oReg = new RegExp(sChar, "g");
        return sInput.replace(oReg, sReplaceChar);

    }
});

/*
 * 功    能：替换字符串中某些字符（只能是第一个被替换掉）
 * 参    数：sInput-原始字符串  sChar-要被替换的子串 sReplaceChar-被替换的新串
 * 返 回 值：被替换后的字符串
 */
$.extend({
    ReplaceOne: function (sInput, sChar, sReplaceChar) {
        if (sInput == "" || sInput == undefined) {
            return "";
        }
        return sInput.replace(sChar, sReplaceChar);
    }
});

//合并列
//onLoadSuccess: function (data) {
//    $(this).datagrid("autoMergeCells", ['Area', 'PosCode']);
//},
$.extend($.fn.datagrid.methods, {
    autoMergeCells: function (jq, fields) {
        return jq.each(function () {
            var target = $(this);
            if (!fields) {
                fields = target.datagrid("getColumnFields");
            }
            var rows = target.datagrid("getRows");
            var i = 0,
            j = 0,
            temp = {};
            for (i; i < rows.length; i++) {
                var row = rows[i];
                j = 0;
                for (j; j < fields.length; j++) {
                    var field = fields[j];
                    var tf = temp[field];
                    if (!tf) {
                        tf = temp[field] = {};
                        tf[row[field]] = [i];
                    } else {
                        var tfv = tf[row[field]];
                        if (tfv) {
                            tfv.push(i);
                        } else {
                            tfv = tf[row[field]] = [i];
                        }
                    }
                }
            }
            $.each(temp, function (field, colunm) {
                $.each(colunm, function () {
                    var group = this;

                    if (group.length > 1) {
                        var before,
                        after,
                        megerIndex = group[0];
                        for (var i = 0; i < group.length; i++) {
                            before = group[i];
                            after = group[i + 1];
                            if (after && (after - before) == 1) {
                                continue;
                            }
                            var rowspan = before - megerIndex + 1;
                            if (rowspan > 1) {
                                target.datagrid('mergeCells', {
                                    index: megerIndex,
                                    field: field,
                                    rowspan: rowspan
                                });
                            }
                            if (after && (after - before) != 1) {
                                megerIndex = after;
                            }
                        }
                    }
                });
            });
        });
    }
});


$.extend($.fn.datagrid.defaults.editors, {
    text: {
        init: function (t, a) {
            var i = $('<input type="text" class="datagrid-editable-input" />').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) {
            return $(e).val()
        },
        setValue: function (e, t) {
            $(e).val(t);
            setTimeout(function () {
                e.focus()
            },
            100)
        },
        resize: function (e, t) {
            $(e[0]).width(t - 15);
        }
    },
    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);
        }
    },
    textarea: {
        init: function (t, a) {
            var i = $('<textarea class="datagrid-editable-input"></textarea>').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) {
            return $(e).val()
        },
        setValue: function (e, t) {
            $(e).val(t);
            setTimeout(function () {
                e.focus()
            },
            100)
        },
        resize: function (e, t) {
            e.outerWidth(t);
            e.outerHeight(e.parents("td[field]").height())
        }
    },
    checkbox: {//调用名称
        init: function (container, options) {
            //container 用于装载编辑器 options,提供编辑器初始参数
            var input = $('<input type="checkbox" class="datagrid-editable-input">').appendTo(container);
            //这里我把一个 checkbox类型的输入控件添加到容器container中
            // 需要渲染成easyu提供的控件，需要时用传入options,我这里如果需要一个combobox，就可以 这样调用 input.combobox(options);
            return input;
        },
        getValue: function (target) {
            //datagrid 结束编辑模式，通过该方法返回编辑最终值
            //这里如果用户勾选中checkbox返回1否则返回0
            return $(target).prop("checked") ? 1 : 0;
        },
        setValue: function (target, value) {
            //datagrid 进入编辑器模式，通过该方法为编辑赋值
            //我传入value 为0或者1，若用户传入1则勾选编辑器
            if (value)
                $(target).prop("checked", "checked")
        },
        resize: function (target, width) {
            //列宽改变后调整编辑器宽度
            var input = $(target);
            if ($.boxModel == true) {
                input.width(width - (input.outerWidth() - input.width()));
            } else {
                input.width(width);
            }
        }
    }

});

function ccc(o) {
    console.log(o);
}