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

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

前言

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

解决方法

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

自定义编辑器在 jquery.easyui.extend.js 增加，需要实现编辑器的4个默认方法，如下：

1. $.extend($.fn.datagrid.defaults.editors, {
2. delEdit : {
3. init: function(container, options)
4. {
5. var editorContainer = $('<div/>');
6. var button = $("<a href='javascript:void(0)'></a>")
7. .linkbutton({plain:true, iconCls:"icon-remove"});
8. editorContainer.append(button);
9. editorContainer.appendTo(container);
10. return button;
11. },
12. getValue: function(target)
13. {
14. return $(target).text();
15. },
16. setValue: function(target, value)
17. {
18. $(target).text(value);
19. },
20. resize: function(target, width)
21. {
22. var span = $(target);
23. if ($.boxModel == true){
24. span.width(width - (span.outerWidth() - span.width()) - 10);
25. } else {
26. span.width(width - 10);
27. }
28. }
29. }
30. });

这是我新增的一个删除按钮编辑框，按钮用的是easyui的linkbutton，图标样式是icon-remove。

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

自定义编辑器定义好后，我们在 datagrid的 columns 中增加一列field：

1. {field:'actionColumn',title:'<%/*自定义删除按钮*/%>',width:20,align:'center',editor:'delEdit'}

actionColumn是json中的列属性，title可以为空或者自己命名，editor指定为自定义的编辑器。

 

接下来我们要让编辑器绑定函数，就要在datagrid触发行编辑的方法中，加入自定义函数：setEditing:

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. $('#workloadTable').datagrid('endEdit', lastIndex);
12. //增加完成情况字数输入限制
13. $('#workloadTable').datagrid('beginEdit', rowIndex);
14. var ed = $('#workloadTable').datagrid('getEditors', rowIndex);
15. for (var i = 0; i < ed.length; i++)
16. {
17. var e = ed[i];
18. if(e.field == "description")
19. {
20. $(e.target).bind("keyup",function()
21. {
22. return countChar($(this));
23. }).bind("change", function()
24. {
25. return countChar($(this));
26. });
27. }
28. }
29. setEditing(rowIndex, rowData);
30. lastIndex = rowIndex;
31. }
32. }

setEditing 就是行编辑器的重构函数，代码如下：

1. /**
2. * 重构行编辑器
3. * @param rowIndex
4. */
5. function setEditing(rowIndex, rowData){
6. var editors = $('#workloadTable').datagrid('getEditors', rowIndex);
7. var delEditor = editors[3];      // 删除按钮
8. var delReportButton = delEditor.target;
9. delReportButton.attr("title",'<%/*删除完成情况*/%><bean:message key="task.workloadnew.addreportbyday.jsp.message003"/>').linkbutton({iconCls:"icon-remove"});
10. delReportButton.bind("click",function()
11. {
12. if(!rowData)
13. {
14. return;
15. }
16. deleteLog(rowData);  // 删除日志
17. });
18. }

这就为我们的delEditor 绑定了click方法，此处也可以绑定其他行编辑框的方法，比如输入字数限制，值设置等。

最后

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