easyui data-grid 实现行内编辑 多选操作 功能

1、datagrid配合单元格编辑的部分

配置datagrid属性：

onDblClickCell:onDblClickCell,
onEndEdit:onEndEdit

    var dg = $('#dg').datagrid({  
	                url: '../../qian_tai/getAllMingXiDanInfo.do', //后台返回数据的请求url  
	                pagination: true,//是否使用分页功能  
	                singleSelect:false,//设置可以多选
	            
	                queryParams : {ddbm:row},
	                checkbox:true,//设置第一列显示复选框
	        		toolbar:$("#tb"),
	        		onDblClickCell:onDblClickCell,
	        		onEndEdit:onEndEdit
	        		
	            });  

定义  onDblClickCell， onEndEdit方法

 

 var editIndex = undefined;
  function onDblClickCell(index, field){
        	$('#dg').datagrid('unselectAll')
        	
        	$('#dg').datagrid('selectRow',index)
        	var row =$('#dg').datagrid('getSelected');//获取被选中的对象
        	if(row["peiSongZhuangTai"]=="未配送")//只有未配送的明细才可以编辑
            if (editIndex != index){
                if (endEditing()){
                    $('#dg').datagrid('selectRow', index)
                            .datagrid('beginEdit', index);
                    var ed = $('#dg').datagrid('getEditor', {index:index,field:field});
                
                    if (ed){
                        ($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
                    }
                    editIndex = index;
                } else {
                    setTimeout(function(){
                        $('#dg').datagrid('selectRow', editIndex);
                    },0);
                }
            }
        }
        function onEndEdit(index, row){
            var ed = $(this).datagrid('getEditor', {
                index: index,
                field: 'chanPinBianMa'
            });
            row.chanPinMingCheng = $(ed.target).combobox('getText');
        }
 
        function endEditing(){
            if (editIndex == undefined){return true}
            if ($('#dg').datagrid('validateRow', editIndex)){
                $('#dg').datagrid('endEdit', editIndex);
                editIndex = undefined;
                return true;
            } else {
                return false;
            }
        }

获取变更的记录

 function getChanges(cao_zuo){
        	 var rows=""
        	if(cao_zuo=="2"){
        		 rows = $('#dg').datagrid('getChanges');
        		 alert(JSON.stringify(rows))
        	}
        	 if(cao_zuo=="3"){
        		 rows=$('#dg').datagrid('getChecked')
        		 for(var i=0;i<= rows.length-1;i++){
        			 if(rows[i].peiSongZhuangTai!="未配送"){
        				 alert(i)
        				 rows.splice(i,1);
        			 }
        		 }
        		
        	 }
           
            	url_="../../qian_tai/xiuGaiDingDanMingXi.do?cao_zuo="+cao_zuo;
        	$.ajax({
    			type:"POST",
    			url:url_,
    			contentType : 'application/json;charset=utf-8',
    			data:JSON.stringify(rows),
    			dataType:"json",
    			success:function(data){
    				alert(data.res);
    				  $('#dg').datagrid("reload")
    			},
    			error:function(XMLHttpRequest, textStatus){                       
                    if(XMLHttpRequest.status==403){
                       var result = eval("("+XMLHttpRequest.responseText+")");
                        alert("登录失败，请重新登录");
                        window.location.href="login.do"
                        
                      }
               }
    			});
            
        }

保存修改记录

  function accept(){
            if (endEditing()){
            	getChanges("2")
                $('#dg').datagrid('acceptChanges');
            }
        }

editor 

editor 是 column 属性之一，如果想一个单元格是可编辑的，则必须要设置这个对象。

设置editor属性可以通过js方式，代码如下所示。下面的代码为设置 datagrid filed 为chanPinBianMa列的editor。

editor属性包含两个参数，type和options,源文档如下：

Indicate the edit type. When string indicates the edit type, when object contains two properties:
type: string, the edit type, possible types are: text,textbox,numberbox,numberspinner, combobox,combotree,combogrid,datebox,datetimebox, timespinner,datetimespinner, textarea,checkbox,validatebox.
options: object, the editor options corresponding to the edit type.

//设置产品单元格editor
	            $("#dg").datagrid('getColumnOption', "chanPinBianMa").editor  = {//设置chanPINBianMa列的editor,getColumnOptions为获取列的当前所有option
	            	type:'combobox',
	            	options:{
	            		valueField:'chanPinBianMa',
                        textField:'chanPinMingCheng',
                        url: "../../getAllKuCun.do?shi_chang_bian_ma=" + scbm
						+ "&wang_dian_bian_ma=" + wdbm + "&ku_cun_you_xiao=1&sffy=1",
    					required:true,
    					onChange : function() {
    						var code = $(this).combobox('getValue').trim();//获取选中的产品编码
    						
    						 $.getJSON("../../qian_tai/getAllShiChangDingJiaInfo.do", {
    							code : scbm,
    							cpcode : code,
    							scdj_yx : '1'
    						}, function(data, status) {
    							if (status == "success") {
    								$.each(data, function(index, entity) {
    									
    									var row =$('#dg').datagrid('getSelected');//获取被选中的对象
    									var ed_ding_jia_bian_ma =$('#dg').datagrid('getEditor', {index:$("#dg").datagrid('getRowIndex', row),field:'shiChangDingJiaBianMa'});
    									var ed_ding_jia =$('#dg').datagrid('getEditor', {index:$("#dg").datagrid('getRowIndex', row),field:'chanPinDingSongJiaGe'});
    									
    								
    									 $(ed_ding_jia_bian_ma.target).textbox('setValue', entity.shiChangDingJiaBianMa);
    									 $(ed_ding_jia.target).textbox('setValue', entity.chanPinDingSongJiaGe);
    									
    									
    									 $(ed_ding_jia.target).textbox("disable");
    									
    								});
    							} else {
    								alert("获取数据失败！");
    							}
    						}); 
    					}
	            		
	            	}
	            	
	            }  

上面的代码是给一个单元格绑定combobox类型的下拉框，并设置下拉框的参数。其中设置了 onChange属性，当下拉框的值改变时，同时调整另外两列中对应单元格的值。

var ed_ding_jia_bian_ma =$('#dg').datagrid('getEditor', {index:$("#dg").datagrid('getRowIndex', row),field:'shiChangDingJiaBianMa'});
var ed_ding_jia =$('#dg').datagrid('getEditor', {index:$("#dg").datagrid('getRowIndex', row),field:'chanPinDingSongJiaGe'});
    									

通过上面的代码获取这两列的editor，这两列的editor是在table中的 th中的data-options中设置的，代码如下：

 <th data-options="field:'riSongShuLiang',align:'right',editor:'textbox'">日送数量</th> 
<th data-options="field:'shiChangDingJiaBianMa',align:'right',editor:'textbox',hidden:true">定价编码</th> 

通过下面的代码更改单元格的值，并将chanPingDingSongJiaGe对应的单元格设置为不可编辑

 $(ed_ding_jia_bian_ma.target).textbox('setValue', entity.shiChangDingJiaBianMa);
 $(ed_ding_jia.target).textbox('setValue', entity.chanPinDingSongJiaGe); 
$(ed_ding_jia.target).textbox("disable");

2、设置第一列的复选框

table 第一列增加如下列

<th data-options="field:'ck',checkbox:true"></th>
datagrid属性中设置 checkbox:true