JQuery easyUi datagrid 中 自定义editor作为列表操作按钮列
转自 http://blog.csdn.net/tianlincao/article/details/7494467
前言
解决方法
第一步:新增自定义编辑器
- $.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);
- }
- }
- }
- });
第二步:绑定自定义编辑器
- {field:‘actionColumn‘,title:‘<%/*自定义删除按钮*/%>‘,width:20,align:‘center‘,editor:‘delEdit‘}
actionColumn是json中的列属性,title可以为空或者自己命名,editor指定为自定义的编辑器。
- 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;
- }
- }
- /**
- * 重构行编辑器
- * @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); // 删除日志
- });
- }
最后
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。