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方法,此处也可以绑定其他行编辑框的方法,比如输入字数限制,值设置等。

最后

至此,可以生成列表操作按钮列了。
上一篇:29. What Makes a True Leader ? 合格的领导者由何物决定 ?


下一篇:day08-Python运维开发基础(文件操作与相关函数、函数基础)