[转载]easyui datagrid 行内编辑功能

最新推荐文章于 2022-10-25 14:27:48 发布

Miss_Squirrel

最新推荐文章于 2022-10-25 14:27:48 发布

阅读量6k

点赞数 2

文章标签： datagrid easyui 行内编辑

EASY UI 中文官网给出了行内编辑demo：http://www.jeasyui.net/tutorial/36.html，但是updateActions方法实际使用并不成功，在网上查了很久，总算找到了替代方法，即使用

$('#tt').datagrid('refreshRow', index)

替代demo中的

$('#tt').datagrid('updateRow',{
				index: index,
				row:{}
			});

具体代码转载如下。此外还需注意的是，当row处于编辑开启的状态时，无论如何修改值，直到行编辑关闭前，使用 row.field 获取到的值均是编辑开启之前的值。对编辑后的新值做处理，需在 onAfterEdit 中进行。

 
 $( 
 '#tt' 
 ).datagrid({ 

 
      
 title: 
 'Editable DataGrid' 
 , 

 
      
 iconCls: 
 'icon-edit' 
 , 

 
      
 width:660, 

 
      
 height:250, 

 
      
 singleSelect: 
 true 
 , 

 
      
 idField: 
 'itemid' 
 , 

 
      
 url: 
 'datagrid_data.json' 
 , 

 
      
 columns:[[ 

 
          
 {field: 
 'itemid' 
 ,title: 
 'Item ID' 
 ,width:60}, 

 
          
 {field: 
 'productid' 
 ,title: 
 'Product' 
 ,width:100, 

 
              
 formatter: 
 function 
 (value){ 

 
                  
 for 
 ( 
 var  
 i=0; i<products.length; i++){ 

 
                      
 if  
 (products[i].productid == value)  
 return  
 products[i].name; 

}

 
 return  
 value;

},

 
              
 editor:{ 

 
                  
 type: 
 'combobox' 
 , 

 
                  
 options:{ 

 
                      
 valueField: 
 'productid' 
 , 

 
                      
 textField: 
 'name' 
 , 

 
                      
 data:products, 

 
 required: 
 true

}

}

},

 
          
 {field: 
 'listprice' 
 ,title: 
 'List Price' 
 ,width:80,align: 
 'right' 
 ,editor:{type: 
 'numberbox' 
 ,options:{precision:1}}}, 

 
          
 {field: 
 'unitcost' 
 ,title: 
 'Unit Cost' 
 ,width:80,align: 
 'right' 
 ,editor: 
 'numberbox' 
 }, 

 
          
 {field: 
 'attr1' 
 ,title: 
 'Attribute' 
 ,width:150,editor: 
 'text' 
 }, 

 
          
 {field: 
 'status' 
 ,title: 
 'Status' 
 ,width:50,align: 
 'center' 
 , 

 
              
 editor:{ 

 
                  
 type: 
 'checkbox' 
 , 

 
                  
 options:{ 

 
 off:  
 ''

}

}

},

 
          
 {field: 
 'action' 
 ,title: 
 'Action' 
 ,width:70,align: 
 'center' 
 , 

 
              
 formatter: 
 function 
 (value,row,index){ 

 
 if  
 (row.editing){

 
                      
 var  
 s =  
 '<a href="#" onclick="saverow(' 
 +index+ 
 ')">Save</a> ' 
 ; 

 
                      
 var  
 c =  
 '<a href="#" onclick="cancelrow(' 
 +index+ 
 ')">Cancel</a>' 
 ; 

 
 return  
 s+c;

 
                      
 var  
 e =  
 '<a href="#" onclick="editrow(' 
 +index+ 
 ')">Edit</a> ' 
 ; 

 
                      
 var  
 d =  
 '<a href="#" onclick="deleterow(' 
 +index+ 
 ')">Delete</a>' 
 ; 

 
 return  
 e+d;

}

}

}

]],

 
      
 onBeforeEdit: 
 function 
 (index,row){ 

 
          
 row.editing =  
 true 
 ; 

 
          
 $( 
 '#tt' 
 ).datagrid( 
 'refreshRow' 
 , index); 

},

 
      
 onAfterEdit: 
 function 
 (index,row){ 

 
          
 row.editing =  
 false 
 ; 

 
          
 $( 
 '#tt' 
 ).datagrid( 
 'refreshRow' 
 , index); 

},

 
      
 onCancelEdit: 
 function 
 (index,row){ 

 
          
 row.editing =  
 false 
 ; 

 
          
 $( 
 '#tt' 
 ).datagrid( 
 'refreshRow' 
 , index); 

}

});

关注