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

前言

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

解决方法

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

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

$.extend($.fn.datagrid.defaults.editors, {
    delEdit : {
    init: function(container, options)
    {
        var editorContainer = $('<div/>');

        var button = $("<a href='javascript:void(0)'>a>")
             .linkbutton({plain:true, iconCls:"icon-remove"});

        editorContainer.append(button);
        editorContainer.appendTo(container);
        return button;
    },
    getValue: function(target)
    {
        return $(target).text();
    },
    setValue: function(target, value)
    {
        $(target).text(value);
    },
    resize: function(target, width)
    {
        var span = $(target);
        if ($.boxModel == true){
            span.width(width - (span.outerWidth() - span.width()) - 10);
        } else {
            span.width(width - 10);
        }
    }
    }
});

$.extend($.fn.datagrid.defaults.editors, {
	delEdit : {
    init: function(container, options)
    {
		var editorContainer = $('
');

		var button = $("")
             .linkbutton({plain:true, iconCls:"icon-remove"});

		editorContainer.append(button);
		editorContainer.appendTo(container);
		return button;
    },
    getValue: function(target)
    {
        return $(target).text();
    },
    setValue: function(target, value)
    {
        $(target).text(value);
    },
    resize: function(target, width)
    {
        var span = $(target);
        if ($.boxModel == true){
            span.width(width - (span.outerWidth() - span.width()) - 10);
        } else {
            span.width(width - 10);
        }
    }
    }
});

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

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

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

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

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

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

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

onClickRow:function(rowIndex, rowData){
                if(rowIndex == lastIndex)
                {
                    $('#workloadTable').datagrid('endEdit', lastIndex);
                    lastIndex = -999;
                }
                else
                {
                    $('#workloadTable').datagrid('endEdit', lastIndex);
                    $('#workloadTable').datagrid('beginEdit', rowIndex);

                    $('#workloadTable').datagrid('endEdit', lastIndex);
                    //增加完成情况字数输入限制
                    $('#workloadTable').datagrid('beginEdit', rowIndex);
                    var ed = $('#workloadTable').datagrid('getEditors', rowIndex);
                    for (var i = 0; i < ed.length; i++)
                    {
                        var e = ed[i];
                        if(e.field == "description")
                        {
                            $(e.target).bind("keyup",function()
                                {
                                return countChar($(this));
                            }).bind("change", function()
                            {
                                return countChar($(this));
                            });
                        }
                    }

                    setEditing(rowIndex, rowData);
                    lastIndex = rowIndex;
                }
            }

onClickRow:function(rowIndex, rowData){
            	if(rowIndex == lastIndex)
                {
                    $('#workloadTable').datagrid('endEdit', lastIndex);
                    lastIndex = -999;
                }
            	else
				{
					$('#workloadTable').datagrid('endEdit', lastIndex);
					$('#workloadTable').datagrid('beginEdit', rowIndex);

					$('#workloadTable').datagrid('endEdit', lastIndex);
					//增加完成情况字数输入限制
					$('#workloadTable').datagrid('beginEdit', rowIndex);
					var ed = $('#workloadTable').datagrid('getEditors', rowIndex);
					for (var i = 0; i < ed.length; i++)
					{
						var e = ed[i];
						if(e.field == "description")
						{
							$(e.target).bind("keyup",function()
				            	{
		                 		return countChar($(this));
		            		}).bind("change", function()
		            		{
		                 		return countChar($(this));
		            		});
						}
					}

					setEditing(rowIndex, rowData);
                	lastIndex = rowIndex;
				}
			}

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

/**
    * 重构行编辑器
    * @param rowIndex
    */
    function setEditing(rowIndex, rowData){
        var editors = $('#workloadTable').datagrid('getEditors', rowIndex);

      var delEditor = editors[3];      // 删除按钮
            var delReportButton = delEditor.target;
            delReportButton.attr("title",'<%/*删除完成情况*/%><bean:message key="task.workloadnew.addreportbyday.jsp.message003"/>').linkbutton({iconCls:"icon-remove"});

            delReportButton.bind("click",function()
            {
                if(!rowData)
                {
                    return;
                }

                deleteLog(rowData);  // 删除日志
            });
    }

/**
    * 重构行编辑器
    * @param rowIndex
    */
    function setEditing(rowIndex, rowData){
        var editors = $('#workloadTable').datagrid('getEditors', rowIndex);

      var delEditor = editors[3];      // 删除按钮
            var delReportButton = delEditor.target;
            delReportButton.attr("title",'<%/*删除完成情况*/%>').linkbutton({iconCls:"icon-remove"});

            delReportButton.bind("click",function()
            {
            	if(!rowData)
			    {
					return;
				}
				
				deleteLog(rowData);  // 删除日志
            });
    }

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