easyUi可编辑表格

//表格展示

$("#tt").datagrid({
columns:[[
{field:'itemid',title:'Item ID',width:80,sortable:true,editor:'text'},
{field:'productid',title:'Product ID',width:80,sortable:true,editor:'text'},
{field:'status',title:'Item Details',editor:'text'},
{field:'listprice',title:'List Price',width:80,align:'right',sortable:true,
editor:'text'
},
{field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true,
styler: function(value,row,index){
if (value < 12 || value > 12){
return 'color:red;';
// the function can return predefined css class and inline style
// return {class:'c1',style:'color:red'}
}
}
},
{field:'attr1',title:'Attribute',width:100,formatter: function(value,row,index){
if (row.user){
return row.user.name;
} else {
return value;
}
}},
]]
});
var editIndex = undefined; //全局变量
var editField = undefined; //全局变量
//数据网格编辑 $('#tt').datagrid({ onClickCell: function (index, field, value) { //每个文本框都可以编辑 if(endEditing()){ myonClickCell(index, field); } }, }); //自定义编辑 function myonClickCell(index,field){ editIndex = index; editField = field; $('#tt').datagrid('editCell', { index: index, field: field }); }

//结束编辑
function endEditing(){
if (editIndex == undefined) { return true; }
if ($('#tt').datagrid('validateRow', 100)) {
console.log(111);
$('#tt').datagrid('endEdit', editIndex);
editIndex = undefined;
editField = undefined;
return true;
} else {
return false;
}
}
//下面是单元格编辑方法
$.extend($.fn.datagrid.methods, {
editCell: function (jq, param) {
// console.log(param){index: 3, field: "tb_zkje"};
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;
}
});
}
});