JQuery easyUi datagrid 中 自定义editor作为列表操作按钮列

2022-01-03 21:37:45

转自   http://blog.csdn.net/tianlincao/article/details/7494467

 

前言

JQuery easyUi datagrid 中 使用datagrid生成数据列表后，需要在每一行加入一个操作按钮列，按钮在默认非编辑状态下是不显示的，需要激活行编辑状态下才显示，故不能再formatter处理，需要使用自定义按钮来处理了。

解决方法

第一步：新增自定义编辑器

自定义编辑器在 jquery.easyui.extend.js 增加，需要实现编辑器的4个默认方法，如下：
[html] view plaincopy
  1. $.extend($.fn.datagrid.defaults.editors, {  
  2.     delEdit : {  
  3.     init: function(container, options)  
  4.     {  
  5.         var editorContainer = $(‘<div/>‘);  
  6.   
  7.         var button = $("<a href=‘javascript:void(0)‘></a>")  
  8.              .linkbutton({plain:true, iconCls:"icon-remove"});  
  9.   
  10.         editorContainer.append(button);  
  11.         editorContainer.appendTo(container);  
  12.         return button;  
  13.     },  
  14.     getValue: function(target)  
  15.     {  
  16.         return $(target).text();  
  17.     },  
  18.     setValue: function(target, value)  
  19.     {  
  20.         $(target).text(value);  
  21.     },  
  22.     resize: function(target, width)  
  23.     {  
  24.         var span = $(target);  
  25.         if ($.boxModel == true){  
  26.             span.width(width - (span.outerWidth() - span.width()) - 10);  
  27.         } else {  
  28.             span.width(width - 10);  
  29.         }  
  30.     }  
  31.     }  
  32. });  
这是我新增的一个删除按钮编辑框，按钮用的是easyui的linkbutton，图标样式是icon-remove。

第二步：绑定自定义编辑器

自定义编辑器定义好后，我们在 datagrid的 columns 中增加一列field：
[html] view plaincopy
  1. {field:‘actionColumn‘,title:‘<%/*自定义删除按钮*/%>‘,width:20,align:‘center‘,editor:‘delEdit‘}  

actionColumn是json中的列属性，title可以为空或者自己命名，editor指定为自定义的编辑器。
 
接下来我们要让编辑器绑定函数，就要在datagrid触发行编辑的方法中，加入自定义函数：setEditing:
[html] view plaincopy
  1. onClickRow:function(rowIndex, rowData){  
  2.                 if(rowIndex == lastIndex)  
  3.                 {  
  4.                     $(‘#workloadTable‘).datagrid(‘endEdit‘, lastIndex);  
  5.                     lastIndex = -999;  
  6.                 }  
  7.                 else  
  8.                 {  
  9.                     $(‘#workloadTable‘).datagrid(‘endEdit‘, lastIndex);  
  10.                     $(‘#workloadTable‘).datagrid(‘beginEdit‘, rowIndex);  
  11.   
  12.                     $(‘#workloadTable‘).datagrid(‘endEdit‘, lastIndex);  
  13.                     //增加完成情况字数输入限制  
  14.                     $(‘#workloadTable‘).datagrid(‘beginEdit‘, rowIndex);  
  15.                     var ed = $(‘#workloadTable‘).datagrid(‘getEditors‘, rowIndex);  
  16.                     for (var i = 0; i < ed.length; i++)  
  17.                     {  
  18.                         var e = ed[i];  
  19.                         if(e.field == "description")  
  20.                         {  
  21.                             $(e.target).bind("keyup",function()  
  22.                                 {  
  23.                                 return countChar($(this));  
  24.                             }).bind("change", function()  
  25.                             {  
  26.                                 return countChar($(this));  
  27.                             });  
  28.                         }  
  29.                     }  
  30.   
  31.                     setEditing(rowIndex, rowData);  
  32.                     lastIndex = rowIndex;  
  33.                 }  
  34.             }  
setEditing 就是行编辑器的重构函数，代码如下：
[html] view plaincopy
  1. /**  
  2.     * 重构行编辑器  
  3.     * @param rowIndex  
  4.     */  
  5.     function setEditing(rowIndex, rowData){  
  6.         var editors = $(‘#workloadTable‘).datagrid(‘getEditors‘, rowIndex);  
  7.   
  8.       var delEditor = editors[3];      // 删除按钮  
  9.             var delReportButton = delEditor.target;  
  10.             delReportButton.attr("title",‘<%/*删除完成情况*/%><bean:message key="task.workloadnew.addreportbyday.jsp.message003"/>‘).linkbutton({iconCls:"icon-remove"});  
  11.   
  12.             delReportButton.bind("click",function()  
  13.             {  
  14.                 if(!rowData)  
  15.                 {  
  16.                     return;  
  17.                 }  
  18.                   
  19.                 deleteLog(rowData);  // 删除日志  
  20.             });  
  21.     }  
这就为我们的delEditor 绑定了click方法，此处也可以绑定其他行编辑框的方法，比如输入字数限制，值设置等。

最后

至此，可以生成列表操作按钮列了。

JQuery easyUi datagrid 中 自定义editor作为列表操作按钮列

上一篇：Uninstall Tool 3.3.2.5315 简体中文注册版（彻底卸载软件）


下一篇：php查询IP地址归属等信息