easyui版本为：jQuery EasyUI 1.4.1
尝试了2天，单最终因为删除行(新建的、原有的)后，datagrid对剩余行不重新修订行号，导致取消、保存无法正常使用，最后不得不放弃，转而使用ext。
但是2天的摸索，还是找到了不少好知识点，以兹共享，码农共勉！
0.扩展只读text
/* 扩展编辑器---只读文本框 */
$.extend($.fn.datagrid.defaults.editors, {
textR: {
init: function(container, options){
var input = $('').appendTo(container);
return input;
},
getValue: function(target){
return $(target).val();
},
setValue: function(target, value){
$(target).val(value);
},
resize: function(target, width){
var input = $(target);
if ($.boxModel == true){
input.width(width - (input.outerWidth() - input.width()));
} else {
input.width(width);
}
}
}
});
1.操作按钮
{field:'opt',title:'操作',width:100,align:'center',formatter: function(value,row,index){
var str = '';
var e = '编辑';//编辑
var s = '保存';//保存
var c = '取消';//取消
var d = "删除";//删除
if(row.editing){
str = s + ' '+ c + ' '+ d;
}else{
str = e + ' '+ d;
}
return str;
}},
2.combobox格式化、编辑、联动单元格赋值
{field:'spec',title:'规格',width:100,editor:'textR'},
{field:'unit',title:'单位',width:100,editor:'textR'},
{field:'feeName',title:'收费项目名称',width:100,
formatter:function(value){
for(var i=0; i
return feeNameData[i].feeName;
}
}
return value;
},
editor:{type:'combobox',options: {
valueField:'feeId',textField:'feeName',data:feeNameData,required:true,
onSelect:function(rec){
var index = $(this).parent().parent().parent().parent().parent().parent().parent()[0].rowIndex;
$("tr[datagrid-row-index="+index+"] td[field=spec] input[type=text]").val(rec.spec);
$("tr[datagrid-row-index="+index+"] td[field=unit] input[type=text]").val(rec.unit);
$("tr[datagrid-row-index="+index+"] td[field=price] input[type=text]").val(rec.price);
$("tr[datagrid-row-index="+index+"] td[field=baoxianType] input[type=text]").val(rec.yibao);
}
}}
},
3.增删改查
/**
* 增加
* @return
*/
function addData1(){
$('#dataGrid1').datagrid('appendRow',blankRow);
}
/**
* 编辑
* @return
*/
function editData1(rowIndex){
$('#dataGrid1').datagrid('beginEdit', rowIndex);
}
/**
* 保存
* @return
*/
function saveData1(rowIndex){
$('#dataGrid1').datagrid('endEdit', rowIndex);
}
/**
* 取消
* @return
*/
function cancleData1(rowIndex){
$('#dataGrid1').datagrid('cancelEdit', rowIndex);
}
/**
* 删除
* @return
*/
function delData1(index, row){
if(row.haiid == ''){
$('#dataGrid1').datagrid('deleteRow', rowIndex);
}else{
//ajax从库中删除
}
}
4.整个表格代码
function init1(){
$('#dataGrid1').datagrid({
url:'',method:'post',
queryParams: { hafid:'',types:'' },striped:true,
method:'post',idField:'haiid',loadMsg:'数据加载中……',
singleSelect:false,rownumbers:true,nowrap:true,//fit: true,
pagination:true,pageSize:10,pageList:[10,20,50,100],
columns:[[
{field:'ck',checkbox:true},
//haiid,status,types,feeName,spec,unit,price,nums,money,drugDose,drugFreq,drugCycle,drugNum,drugWay,baoxianType
{field:'opt',title:'操作',width:100,align:'center',formatter: function(value,row,index){
var str = '';
var e = '编辑';//编辑
var s = '保存';//保存
var c = '取消';//取消
//var d = "删除";//删除
if(row.editing){
str = s + ' '+ c + ' '+ d;
}else{
str = e + ' '+ d;
}
return str;
}},
{field:'haiid',title:'haiid',hidden:true},
{field:'status',title:'医嘱状态',width:100,
//1已保存/2已收款/3已发药/4已停止
formatter:function(value){
if(value == 1){
return '已保存';
}else if(value == 2){
return '已收款';
}else if(value == 3){
return '已发药';
}else if(value == 4){
return '已停止';
}
return value;
}
},
//1药品2诊疗
{field:'types',title:'诊疗类型 ',width:100, formatter:function(value){ return '药品'; } },
{field:'feeName',title:'收费项目名称',width:100,
formatter:function(value){
for(var i=0; i
return feeNameData[i].feeName;
}
}
return value;
},
editor:{type:'combobox',options: {
valueField:'feeId',textField:'feeName',data:feeNameData,required:true,
onSelect:function(rec){
var index = $(this).parent().parent().parent().parent().parent().parent().parent()[0].rowIndex;
$("tr[datagrid-row-index="+index+"] td[field=spec] input[type=text]").val(rec.spec);
$("tr[datagrid-row-index="+index+"] td[field=unit] input[type=text]").val(rec.unit);
$("tr[datagrid-row-index="+index+"] td[field=price] input[type=text]").val(rec.price);
$("tr[datagrid-row-index="+index+"] td[field=baoxianType] input[type=text]").val(rec.yibao);
}
}}
},
{field:'spec',title:'规格',width:100,editor:'textR'},
{field:'unit',title:'单位',width:100,editor:'textR'},
{field:'price',title:'单价 ',width:100,align:'right',editor:'textR',
formatter: function(value,row,index){ return RMBMoney(value); }
},
{field:'nums',title:'数量',width:100,align:'right',
editor:{type:'numberbox',options: {min:0,max:999999,precision:2,onChange:function(newV,oldV){
var index = $(this).parent().parent().parent().parent().parent().parent().parent()[0].rowIndex;
var price = $("tr[datagrid-row-index="+index+"] td[field=price] input[type=text]").val();
var money = newV * price;
$("tr[datagrid-row-index="+index+"] td[field=money] input[type=text]").val(money);
}}}
},
{field:'money',title:'金额',width:100,align:'right',editor:'textR',
formatter: function(value,row,index){ return RMBMoney(value); }
},
{field:'drugDose',title:'用药剂量',width:100,
editor:{type:'validatebox',options: {required:true,validType:'length[0,50]'}}
},
{field:'drugFreq',title:'用药频率',width:100,
formatter:function(value){
for(var i=0; i
return pinlvData[i].name;
}
}
return value;
},
editor:{type:'combobox',options: {valueField:'id',textField:'name',data:pinlvData,required:true,editable: false} }
},
{field:'drugCycle',title:'周期',width:100,
formatter:function(value){
for(var i=0; i
return zhouqiData[i].name;
}
}
return value;
},
editor:{type:'combobox',options: {valueField:'id',textField:'name',data:zhouqiData,required:true,editable: false} }
},
{field:'drugNum',title:'周期使用数量',width:100,align:'right',
editor:{type:'validatebox',options: {required:true,validType:'length[0,50]'}}
},
{field:'drugWay',title:'给药方式',width:100,
formatter:function(value){
for(var i=0; i
return geiyaoData[i].name;
}
}
return value;
},
editor:{type:'combobox',options: {valueField:'id',textField:'name',data:geiyaoData,required:true,editable: false} }
},
{field:'baoxianType',title:'保险类别',width:100,editor:'textR'}
]],
toolbar: [{
text: '增加', iconCls: 'icon_add', handler: function(){ addData1(); }
}],
onLoadSuccess: function(data){
$('#dataGrid1').datagrid('clearSelections');
},
onClickRow: function(rowIndex, rowData){
},
onDblClickRow: function(rowIndex, rowData){
editData1(rowIndex);
},
onBeforeEdit:function(index,row){
row.editing = true;
$('#dataGrid1').datagrid('refreshRow', index);
},
onAfterEdit:function(index,row){
row.editing = false;
$('#dataGrid1').datagrid('refreshRow', index);
},
onCancelEdit:function(index,row){
row.editing = false;
if(row.haiid == ''){
$('#dataGrid1').datagrid('updateRow', {
index: index,
row: blankRow
});
}else{
$('#dataGrid1').datagrid('updateRow', {
index: index,
row: row
});
}
}
});
}