系列目录
这次我们要从复杂的交互入手来说明一些用法,这才能让系统做出更加复杂的业务,上一节讲述了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); }