系列目錄
這次我們要從復雜的交互入手來說明一些用法,這才能讓系統做出更加復雜的業務，上一節講述了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" /> <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過長顯示...截斷
jquery.easyui.plus.js/** * 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" /> <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); }
