1.添加editor:'text’属性
editor:'text'
2.js通用代码
$.extend($.fn.datagrid.methods, {
editCell : function(jq, param) {
return jq.each(function() {
var opts = $(this).datagrid('options');
var fields = $(this).datagrid('getColumnFields', true).concat(
$(this).datagrid('getColumnFields'));
for ( var i = 0; i < fields.length; i++) {
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor1 = col.editor;
if (fields[i] != param.field) {
col.editor = null;
}
}
$(this).datagrid('beginEdit', param.index);
for ( var i = 0; i < fields.length; i++) {
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor = col.editor1;
}
});
}
});
var editIndex = undefined;
//结束编辑
function endEditing() {
if (editIndex == undefined) {
return true
}
if ($('#work').datagrid('validateRow', editIndex)) {
$('#work').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
//单击单元格
function onClickCell(index, field) {
if (endEditing()) {
$('#work').datagrid('selectRow',index).datagrid('editCell', {
index : index,
field : field
});
editIndex = index;
}
}
3.设置onClickCell
onClickCell: onClickCell
4.按照上述操作,即可实现编辑
上面的一大坨代码,我也忘了是在哪个easyui中文api文档里复制的了,不过编辑可以实现了,但是发现一个bug,我想在最后一列添加按钮的时候,出现了问题。
加入操作按钮:
1)在需要放入按钮的列中加入formatter
2)formatter怎么写
var Formatter = {
look:function(value,row,index){
return '<a href="#" name="rtd" class="easyui-linkbutton" ></a>';
},
};
3)添加easyui按钮样式
$('#work').datagrid({
onLoadSuccess:function(data){
$("a[name='rtd']").linkbutton({text:'查看',plain:true,iconCls:'icon-search'});
}
});
加完之后如图:
但是它有问题,什么问题,点一点就知道了,问题如下图:
我随便点了几下,发现按钮消失了。
解决办法是在上面的单机单元格的函数里也加上按钮样式:
//单击单元格
function onClickCell(index, field) {
if (endEditing()) {
$("a[name='rtd']").linkbutton({text:'查看',plain:true,iconCls:'icon-search'});
$('#work').datagrid('selectRow',index).datagrid('editCell', {
index : index,
field : field
});
editIndex = index;
}
}
加完之后就好用了。