JQuery easyUi datagrid 中 自定义editor作为列表操作按钮列
2012-09-13 11:02
573 查看
前言
JQuery easyUi datagrid 中 使用datagrid生成数据列表后,需要在每一行加入一个操作按钮列,按钮在默认非编辑状态下是不显示的,需要激活行编辑状态下才显示,故不能再formatter处理,需要使用自定义按钮来处理了。解决方法
第一步:新增自定义编辑器
自定义编辑器在 jquery.easyui.extend.js 增加,需要实现编辑器的4个默认方法,如下:[html]
view plaincopyprint?
$.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 = $('<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); } } } });这是我新增的一个删除按钮编辑框,按钮用的是easyui的linkbutton,图标样式是icon-remove。
第二步:绑定自定义编辑器
自定义编辑器定义好后,我们在 datagrid的 columns 中增加一列field:[html]
view plaincopyprint?
{field:'actionColumn',title:'<%/*自定义删除按钮*/%>',width:20,align:'center',editor:'delEdit'}
{field:'actionColumn',title:'<%/*自定义删除按钮*/%>',width:20,align:'center',editor:'delEdit'}
actionColumn是json中的列属性,title可以为空或者自己命名,editor指定为自定义的编辑器。
接下来我们要让编辑器绑定函数,就要在datagrid触发行编辑的方法中,加入自定义函数:setEditing:
[html]
view plaincopyprint?
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 就是行编辑器的重构函数,代码如下:
[html]
view plaincopyprint?
/** * 重构行编辑器 * @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",'<%/*删除完成情况*/%><bean:message key="task.workloadnew.addreportbyday.jsp.message003"/>').linkbutton({iconCls:"icon-remove"}); delReportButton.bind("click",function() { if(!rowData) { return; } deleteLog(rowData); // 删除日志 }); }这就为我们的delEditor 绑定了click方法,此处也可以绑定其他行编辑框的方法,比如输入字数限制,值设置等。
相关文章推荐
- JQuery easyUi datagrid 中 自定义editor作为列表操作按钮列
- JQuery easyUi datagrid 中 自定义editor作为列表操作按钮列
- easyui datagrid自定义按钮列,即最后面的操作列
- jQuery EasyUI自定义DataGrid的Editor
- jQuery EasyUI自定义DataGrid的Editor【转】
- Easyui Datagrid自定义按钮列(最后面的操作列)
- [转]jQuery EasyUI自定义DataGrid的Editor
- 如何在实体的操作工具栏中自定义按钮,并获取列表某项的GUID
- easyui datagrid自定义按钮列,即最后面的操作列
- jQuery EasyUI自定义DataGrid的Editor
- easyui datagrid 不显示分页栏,可以自定义显示分页按钮
- Dynamics CRM2013 任务列表添加自定义按钮
- iOS自定义控件之下拉列表按钮
- asp.net与JQuery EasyUi DataGrid 服务器端分页,添加增加,修改,删除 按钮
- JQuery easyUi datagrid 中 editor 动态设置最大值最小值
- 一步步学习SPD2010--第三章节--处理列表和库(11)----创建服务器功能区自定义操作
- easyui datagrid自定义操作
- JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
- Dynamics CRM2013 任务列表添加自定义按钮
- 一步步学习SPD2010--第三章节--处理列表和库(11)----创建服务器功能区自定义操作