<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="UTF-8">
|
<title>Cell Editing in DataGrid - jQuery EasyUI Demo</title>
|
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
|
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
<link rel="stylesheet" type="text/css" href="../demo.css">
|
<script type="text/javascript" src="../../jquery.min.js"></script>
|
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
</head>
|
<body>
|
<h2>Cell Editing in DataGrid</h2>
|
<p>Click a cell to start editing.</p>
|
<div style="margin:20px 0;"></div>
|
|
<table id="dg" title="Cell Editing in DataGrid" style="width:700px;height:auto"
|
data-options="
|
iconCls: 'icon-edit',
|
singleSelect: true,
|
url: 'datagrid_data1.json',
|
method:'get'
|
">
|
<thead>
|
<tr>
|
<th data-options="field:'itemid',width:80">Item ID</th>
|
<th data-options="field:'productid',width:100,editor:'text'">Product</th>
|
<th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:2}}">List Price</th>
|
<th data-options="field:'unitcost',width:80,align:'right',editor:{type:'numberbox',options:{precision:2}}">Unit Cost</th>
|
<th data-options="field:'attr1',width:250,editor:'text'">Attribute</th>
|
<th data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">Status</th>
|
</tr>
|
</thead>
|
</table>
|
|
<script type="text/javascript">
|
$.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);
|
var ed = $(this).datagrid('getEditor', param);
|
if (ed){
|
if ($(ed.target).hasClass('textbox-f')){
|
$(ed.target).textbox('textbox').focus();
|
} else {
|
$(ed.target).focus();
|
}
|
}
|
for(var i=0; i<fields.length; i++){
|
var col = $(this).datagrid('getColumnOption', fields[i]);
|
col.editor = col.editor1;
|
}
|
});
|
},
|
enableCellEditing: function(jq){
|
return jq.each(function(){
|
var dg = $(this);
|
var opts = dg.datagrid('options');
|
opts.oldOnClickCell = opts.onClickCell;
|
opts.onClickCell = function(index, field){
|
if (opts.editIndex != undefined){
|
if (dg.datagrid('validateRow', opts.editIndex)){
|
dg.datagrid('endEdit', opts.editIndex);
|
opts.editIndex = undefined;
|
} else {
|
return;
|
}
|
}
|
dg.datagrid('selectRow', index).datagrid('editCell', {
|
index: index,
|
field: field
|
});
|
opts.editIndex = index;
|
opts.oldOnClickCell.call(this, index, field);
|
}
|
});
|
}
|
});
|
|
$(function(){
|
$('#dg').datagrid().datagrid('enableCellEditing');
|
})
|
</script>
|
</body>
|
</html>
|
