码迷,mamicode.com
首页 > 其他好文 > 详细

easyui行内编辑

时间:2017-06-08 21:30:58      阅读:250      评论:0      收藏:0      [点我收藏+]

标签:ansi   doc   required   ack   actions   cli   asc   res   ==   

  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="#" onclick="saverow(this,+ index +)">Save</a> ;
 80                                 var c = <a href="#" onclick="cancelrow(this)">Cancel</a>;
 81                                 return s+c;
 82                             } else {
 83                                 var e = <a href="#" onclick="editrow(this,+ index +)">Edit</a> ;
 84                                 var d = <a href="#" onclick="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>

 

easyui行内编辑

标签:ansi   doc   required   ack   actions   cli   asc   res   ==   

原文地址:http://www.cnblogs.com/cxxjohnson/p/6964694.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!