easyui datagrid行内编辑

最新推荐文章于 2023-04-29 08:14:32 发布
dht91597
最新推荐文章于 2023-04-29 08:14:32 发布
阅读量112
点赞数
文章标签： javascript ui ViewUI
原文链接：http://www.cnblogs.com/cxxjohnson/p/6964694.html
版权
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2 <html>
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5     <meta name="keywords" content="jquery,ui,easy,easyui,web">
  6     <meta name="description" content="easyui help you build your web page easily!">
  7     <title>DataGrid inline editing - jQuery EasyUI Demo</title>
  8     <link rel="stylesheet" type="text/css" href="/easyui/jquery-easyui-1.4/themes/default/easyui.css">
  9     <link rel="stylesheet" type="text/css" href="/easyui/jquery-easyui-1.4/easyui/themes/icon.css">
 10     <link rel="stylesheet" type="text/css" href="/easyui/jquery-easyui-1.4/easyui/demo/demo.css">
 11     <script type="text/javascript" src="/easyui/jquery-easyui-1.4/jquery.min.js"></script>
 12     <script type="text/javascript" src="/easyui/jquery-easyui-1.4/jquery.easyui.min.js"></script>
 13     <script>
 14         var data = {"total":28,"rows":[
 15             {"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":16.50,"attr1":"Large","itemid":"EST-1"},
 16             {"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
 17             {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Venomless","itemid":"EST-11"},
 18             {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Rattleless","itemid":"EST-12"},
 19             {"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Green Adult","itemid":"EST-13"},
 20             {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":58.50,"attr1":"Tailless","itemid":"EST-14"},
 21             {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"With tail","itemid":"EST-15"},
 22             {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Female","itemid":"EST-16"},
 23             {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Male","itemid":"EST-17"},
 24             {"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":193.50,"attr1":"Adult Male","itemid":"EST-18"}
 25         ]};
 26 
 27         var products = [
 28             {productid:'FI-SW-01',name:'Koi'},
 29             {productid:'K9-DL-01',name:'Dalmation'},
 30             {productid:'RP-SN-01',name:'Rattlesnake'},
 31             {productid:'RP-LI-02',name:'Iguana'},
 32             {productid:'FL-DSH-01',name:'Manx'},
 33             {productid:'FL-DLH-02',name:'Persian'},
 34             {productid:'AV-CB-01',name:'Amazon Parrot'}
 35         ];
 36         $(function(){
 37             $('#tt').datagrid({
 38                 title:'Editable DataGrid',
 39                 iconCls:'icon-edit',
 40                 width:660,
 41                 height:250,
 42                 singleSelect:true,
 43                 idField:'itemid',
 44                 data:data,
 45                 columns:[[
 46                     {field:'itemid',title:'Item ID',width:60},
 47                     {field:'productid',title:'Product',width:100,
 48                         formatter:function(value){
 49                             for(var i=0; i<products.length; i++){
 50                                 if (products[i].productid == value) return products[i].name;
 51                             }
 52                             return value;
 53                         },
 54                         editor:{
 55                             type:'combobox',
 56                             options:{
 57                                 valueField:'productid',
 58                                 textField:'name',
 59                                 data:products,
 60                                 required:true
 61                             }
 62                         }
 63                     },
 64                     {field:'listprice',title:'List Price',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}},
 65                     {field:'unitcost',title:'Unit Cost',width:80,align:'right',editor:'numberbox'},
 66                     {field:'attr1',title:'Attribute',width:180,editor:'text'},
 67                     {field:'status',title:'Status',width:50,align:'center',
 68                         editor:{
 69                             type:'checkbox',
 70                             options:{
 71                                 on: 'P',
 72                                 off: ''
 73                             }
 74                         }
 75                     },
 76                     {field:'action',title:'Action',width:80,align:'center',
 77                         formatter:function(value,row,index){
 78                             if (row.editing){
 79                                 var s = '<a href="#" οnclick="saverow(this,'+ index +')">Save</a> ';
 80                                 var c = '<a href="#" οnclick="cancelrow(this)">Cancel</a>';
 81                                 return s+c;
 82                             } else {
 83                                 var e = '<a href="#" οnclick="editrow(this,'+ index +')">Edit</a> ';
 84                                 var d = '<a href="#" οnclick="deleterow(this)">Delete</a>';
 85                                 return e+d;
 86                             }
 87                         }
 88                     }
 89                 ]],
 90                 onBeforeEdit:function(index,row)
 91                 {
 92                     row.editing = true;
 93                     updateActions(index);
 94                 },
 95                 onAfterEdit:function(index,row)
 96                 {
 97                     row.editing = false;
 98                     updateActions(index);
 99                 },
100                 onCancelEdit:function(index,row)
101                 {
102                     row.editing = false;
103                     updateActions(index);
104                 }
105             });
106         });
107         function updateActions(index)
108         {
109             $('#tt').datagrid('updateRow',{
110                 index: index,
111                 row:{}
112             });
113         }
114         
115         function getRowIndex(target)
116         {
117             var tr = $(target).closest('tr.datagrid-row');
118             return parseInt(tr.attr('datagrid-row-index'));
119         }
120         
121         function editrow(target, index)
122         {
123             $('#tt').datagrid('beginEdit', getRowIndex(target));
124             
125             $("#tt").attr('refreshRow',11);
126         }
127         
128         function deleterow(target)
129         {
130             $.messager.confirm('Confirm','Are you sure?',function(r){
131                 if (r){
132                     $('#tt').datagrid('deleteRow', getRowIndex(target));
133                 }
134             });
135         }
136         
137         function saverow(target, index)
138         {
139             $('#tt').datagrid('endEdit', getRowIndex(target));
140             
141             var row = $("#tt").datagrid("getRows");
142             console.log(row[index]);
143         }
144         
145         function cancelrow(target)
146         {
147             $('#tt').datagrid('cancelEdit', getRowIndex(target));
148         }
149         
150         function insert()
151         {
152             var row = $('#tt').datagrid('getSelected');
153             if (row){
154                 var index = $('#tt').datagrid('getRowIndex', row);
155             } else {
156                 index = 0;
157             }
158             $('#tt').datagrid('insertRow', {
159                 index: index,
160                 row:{
161                     status:'P'
162                 }
163             });
164             $('#tt').datagrid('selectRow',index);
165             $('#tt').datagrid('beginEdit',index);
166         }
167     </script>
168 </head>
169 <body>
170     <h2>Editable DataGrid Demo</h2>
171     <div class="demo-info">
172         <div class="demo-tip icon-tip">&nbsp;</div>
173         <div>Click the edit button on the right side of row to start editing.</div>
174     </div>
175     
176     <div style="margin:10px 0">
177         <a href="#" class="easyui-linkbutton" onclick="insert()">Insert Row</a>
178     </div>
179     
180     <table id="tt"></table>
181     
182 </body>
183 </html>