easyui datagrid editor

 

easyui版本为：jQuery EasyUI 1.4.1

尝试了2天，单最终因为删除行(新建的、原有的)后，datagrid对剩余行不重新修订行号，导致取消、保存无法正常使用，最后不得不放弃，转而使用ext。

但是2天的摸索，还是找到了不少好知识点，以兹共享，码农共勉！

 

 

 

0.扩展只读text

/* 扩展编辑器---只读文本框 */
$.extend($.fn.datagrid.defaults.editors, {
    textR: {
        init: function(container, options){
            var input = $('<input type="text" class="datagrid-editable-input textbox textbox-text" readonly="readonly" style="width:89px;" >').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 = '<a href="javascript:void(0);" οnclick="editData1('+index+')">编辑</a>';//编辑
          var s = '<a href="javascript:void(0);" οnclick="saveData1('+index+')">保存</a>';//保存
          var c = '<a href="javascript:void(0);" οnclick="cancleData1('+index+')">取消</a>';//取消
          var d = "<a href='javascript:void(0);' οnclick='delData1("+index+","+JSON.stringify(row)+");'>删除</a>";//删除
          
          if(row.editing){
           str = s + '&nbsp;&nbsp;'+ c + '&nbsp;&nbsp;'+ d;
          }else{
           str = e + '&nbsp;&nbsp;'+ 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<feeNameData.length; i++){ 
            if (feeNameData[i].feeId == value){
             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 = '<a href="javascript:void(0);" οnclick="editData1('+index+')">编辑</a>';//编辑
          var s = '<a href="javascript:void(0);" οnclick="saveData1('+index+')">保存</a>';//保存
          var c = '<a href="javascript:void(0);" οnclick="cancleData1('+index+')">取消</a>';//取消
          //var d = "<a href='javascript:void(0);' οnclick='delData1("+index+","+JSON.stringify(row)+");'>删除</a>";//删除
          
          if(row.editing){
           str = s + '&nbsp;&nbsp;'+ c + '&nbsp;&nbsp;'+ d;
          }else{
           str = e + '&nbsp;&nbsp;'+ 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<feeNameData.length; i++){ 
            if (feeNameData[i].feeId == value){
             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<pinlvData.length; i++){
         if (pinlvData[i].id == value){
          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<zhouqiData.length; i++){
         if (zhouqiData[i].id == value){
          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<geiyaoData.length; i++){
         if (geiyaoData[i].id == value){
          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
    });
   }
  }
 });
}