easyui 修改单元格内容_EasyUI 数据表格的单元格编辑(Cell Editing in DataGrid)_easyui demo...

Cell Editing in DataGrid

Click a cell to start editing.

Item ID

Product

List Price

Unit Cost

Attribute

Status

源代码

Cell Editing in DataGrid - jQuery EasyUI Demo

Cell Editing in DataGrid

Click a cell to start editing.

data-options="

iconCls: 'icon-edit',

singleSelect: true,

url: 'datagrid_data1.json',

method:'get',

onClickCell: onClickCell

">

Item IDProductList PriceUnit CostAttributeStatus

$.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

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

var col = $(this).datagrid('getColumnOption', fields[i]);

col.editor = col.editor1;

}

});

}

});

var editIndex = undefined;

function endEditing(){

if (editIndex == undefined){return true}

if ($('#dg').datagrid('validateRow', editIndex)){

$('#dg').datagrid('endEdit', editIndex);

editIndex = undefined;

return true;

} else {

return false;

}

}

function onClickCell(index, field){

if (endEditing()){

$('#dg').datagrid('selectRow', index)

.datagrid('editCell', {index:index,field:field});

editIndex = index;

}

}