ASP.NET MVC5+EF6+EasyUI 后台管理系统（83）-Easyui Datagrid 行内编辑扩展
来源：互联网 发布：风冷冷凝器设计软件 编辑：程序博客网 时间：2024/05/21 00:46
系列目录
这次我们要从复杂的交互入手来说明一些用法,这才能让系统做出更加复杂的业务，上一节讲述了Datagird的批量编辑和提交
本节主要演示扩展Datagrid行内编辑的属性,下面来看一个例子,我开启编辑行的时候，右边开启了一个查找图标，点击查找图标可以弹出对应的页面
从API得知，我们进行编辑时候可以使用很多类型：
editorstring,object指明编辑类型。当字符串指明编辑类型的时候，对象包含2个属性：type：字符串，该编辑类型可以使用的类型有：text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree。
options：对象，object, 该编辑器属性对应于编辑类型。
使用$.fn.datagrid.defaults.editors重载默认值。
每个编辑器都有以下方法:
我们可以重写和补充这些类型的属性，非常之灵活
$.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);}
阅读全文
0 0
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（83）-Easyui Datagrid 行内编辑扩展
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（82）-Easyui Datagrid批量操作（编辑，删除，添加）
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（82）-Easyui Datagrid批量操作（编辑，删除，添加）
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（82）-Easyui Datagrid批量操作（编辑，删除，添加）
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（82）-Easyui Datagrid批量操作（编辑，删除，添加）
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（7）-MVC与EasyUI DataGrid
- ASP.NET MVC5+EF6+EasyUI 后台管理系统
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（50）-Easyui 扁平化皮肤
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（52）-美化EasyUI皮肤和图标
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（18）-权限管理系统-表数据
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（19）-权限管理系统-用户登录
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（22）-权限管理系统-模块导航制作
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（86）-日程管理-fullcalendar插件用法
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（86）-日程管理-fullcalendar插件用法
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（28）-系统小结
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（34）-文章发布系统①-简要分析
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（35）-文章发布系统②-构建项目
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（36）-文章发布系统③-kindeditor使用
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（76）-微信公众平台开发-网页授权
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（63）-Excel导入和导出-自定义表模导入
- ASP.NET MVC5+EF6+EasyUI 后台管理系统 (源码购买说明)
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（81）-数据筛选（万能查询）
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（82）-Easyui Datagrid批量操作（编辑，删除，添加）
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（83）-Easyui Datagrid 行内编辑扩展
- 复杂进销存样例
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（84）-Quartz 作业调度用法详解一
- FullCalendar 日历插件中文说明文档
- 日程管理 FullCalendar
- CSS中的时间
- SQL Server 创建表 添加主键 添加列常用SQL语句
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（85）-Quartz 作业调度用法详解二
- 支付宝支付
