jQuery EasyUI使用教程之啓用數據網格內聯編輯

時間 2019-11-11

標籤 jquery easyui 使用教程啓用數據網格內聯編輯欄目 JQuery 简体版

原文原文鏈接

<jQuery EasyUI最新試用版免費下載>javascript
可編輯的功能已經添加到數據網格中了，它使用戶可以添加新的行到數據網格中，用戶還能夠更新一個或多個行。本教程將介紹如何建立一個具備內聯編輯功能的數據網格。html
查看jQuery EasyUI演示java
建立數據網格 
 $( 
 function 
 (){ 
 
 $( 
 '#tt' 
 ).datagrid({ 
 
 title: 
 'Editable DataGrid' 
 , 
 
 iconCls: 
 'icon-edit' 
 , 
 
 width:660, 
 
 height:250, 
 
 singleSelect: 
 true 
 , 
 
 idField: 
 'itemid' 
 , 
 
 url: 
 'data/datagrid_data.json' 
 , 
 
 columns:[[ 
 
 {field: 
 'itemid' 
 ,title: 
 'Item ID' 
 ,width:60}, 
 
 {field: 
 'productid' 
 ,title: 
 'Product' 
 ,width:100, 
 
 formatter: 
 function 
 (value,row){ 
 
 return 
 row.productname || 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:180,editor: 
 'text' 
 }, 
 
 {field: 
 'status' 
 ,title: 
 'Status' 
 ,width:50,align: 
 'center' 
 , 
 
 editor:{ 
 
 type: 
 'checkbox' 
 , 
 
 options:{ 
 
 on:  
 'P' 
 , 
 
 off:  
 '' 
 
 } 
 
 } 
 
 }, 
 
 {field: 
 'action' 
 ,title: 
 'Action' 
 ,width:80,align: 
 'center' 
 , 
 
 formatter: 
 function 
 (value,row,index){ 
 
 if 
 (row.editing){ 
 
 var 
 s =  
 '<a href="javascript:void(0)" onclick="saverow(this)">Save</a> ' 
 ; 
 
 var 
 c =  
 '<a href="javascript:void(0)" onclick="cancelrow(this)">Cancel</a>' 
 ; 
 
 return 
 s+c; 
 
 }  
 else 
 { 
 
 var 
 e =  
 '<a href="javascript:void(0)" onclick="editrow(this)">Edit</a> ' 
 ; 
 
 var 
 d =  
 '<a href="javascript:void(0)" onclick="deleterow(this)">Delete</a>' 
 ; 
 
 return 
 e+d; 
 
 } 
 
 } 
 
 } 
 
 ]], 
 
 onEndEdit: 
 function 
 (index,row){ 
 
 var 
 ed = $( 
 this 
 ).datagrid( 
 'getEditor' 
 , { 
 
 index: index, 
 
 field:  
 'productid' 
 
 }); 
 
 row.productname = $(ed.target).combobox( 
 'getText' 
 ); 
 
 }, 
 
 onBeforeEdit: 
 function 
 (index,row){ 
 
 row.editing =  
 true 
 ; 
 
 $( 
 this 
 ).datagrid( 
 'refreshRow' 
 , index); 
 
 }, 
 
 onAfterEdit: 
 function 
 (index,row){ 
 
 row.editing =  
 false 
 ; 
 
 $( 
 this 
 ).datagrid( 
 'refreshRow' 
 , index); 
 
 }, 
 
 onCancelEdit: 
 function 
 (index,row){ 
 
 row.editing =  
 false 
 ; 
 
 $( 
 this 
 ).datagrid( 
 'refreshRow' 
 , index); 
 
 } 
 
 }); 
 
 }); 
想要在數據網格中啓用編輯功能，您須要添加一個編輯器屬性到列中。編輯器會告訴數據網格如何編輯字段以及如何保存字段值，咱們定義了三個編輯器：text、combobox和checkbox。json
 
 function 
 getRowIndex(target){ 
 
 var 
 tr = $(target).closest( 
 'tr.datagrid-row' 
 ); 
 
 return 
 parseInt(tr.attr( 
 'datagrid-row-index' 
 )); 
 
 } 
 
 function 
 editrow(target){ 
 
 $( 
 '#tt' 
 ).datagrid( 
 'beginEdit' 
 , getRowIndex(target)); 
 
 } 
 
 function 
 deleterow(target){ 
 
 $.messager.confirm( 
 'Confirm' 
 , 
 'Are you sure?' 
 , 
 function 
 (r){ 
 
 if 
 (r){ 
 
 $( 
 '#tt' 
 ).datagrid( 
 'deleteRow' 
 , getRowIndex(target)); 
 
 } 
 
 }); 
 
 } 
 
 function 
 saverow(target){ 
 
 $( 
 '#tt' 
 ).datagrid( 
 'endEdit' 
 , getRowIndex(target)); 
 
 } 
 
 function 
 cancelrow(target){ 
 
 $( 
 '#tt' 
 ).datagrid( 
 'cancelEdit' 
 , getRowIndex(target)); 
 
 } 
下載EasyUI示例：easyui-datagrid-demo.zip編輯器
有興趣的朋友能夠點擊查看更多有關jQuery EasyUI的教程！
ui