系列目錄

這次我們要從複雜的交互入手來說明一些用法,這才能讓系統做出更加複雜的業務，上一節講述了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);
}

jquery.easyui.plus.js

ASP.NET MVC5+EF6+EasyUI 後臺管理系統（83）-Easyui Datagrid 行內編輯擴展

系列目錄

使用$.fn.datagrid.defaults.editors重載默認值。

總結：

druid數據源 xml配置

微信公衆號對接配置

ASP.NET MVC5+EF6+EasyUI 後臺管理系統（89）-國際化，本地化，多語言應用本地化(多語言) 本地化(多語言)

前端表單幫助文檔

百度地圖API-創建多個座標，連線，信息提示

MVC WebApi Swagger幫助文檔接口用法

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結