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
	        		
	            });  
 

 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("獲取資料失敗！");
    							}
    						}); 
    					}
	            		
	            	}
	            	
	            }  

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'});
    									

 <th data-options="field:'riSongShuLiang',align:'right',editor:'textbox'">日送數量</th> 
<th data-options="field:'shiChangDingJiaBianMa',align:'right',editor:'textbox',hidden:true">定價編碼</th> 

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

table 第一列增加如下列

<th data-options="field:'ck',checkbox:true"></th>
datagrid屬性中設定 checkbox:true