easyui tree操作

  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="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
  9     <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
 10     <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/demo/demo.css">
 11     <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
 12     <script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/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                 660,
 41                 height:250,
 42                 singleSelect:true,
 43                 idField:'itemid',
 44                 data:data,
 45                 columns:[[
 46                     {field:'itemid',title:'Item ID',60},
 47                     {field:'productid',title:'Product',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',80,align:'right',editor:{type:'numberbox',options:{precision:1}}},
 65                     {field:'unitcost',title:'Unit Cost',80,align:'right',editor:'numberbox'},
 66                     {field:'attr1',title:'Attribute',180,editor:'text'},
 67                     {field:'status',title:'Status',50,align:'center',
 68                         editor:{
 69                             type:'checkbox',
 70                             options:{
 71                                 on: 'P',
 72                                 off: ''
 73                             }
 74                         }
 75                     },
 76                     {field:'action',title:'Action',80,align:'center',
 77                         formatter:function(value,row,index){
 78                             if (row.editing){
 79                                 var s = '<a href="#" onclick="saverow(this)">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)">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                     row.editing = true;
 92                     updateActions(index);
 93                 },
 94                 onAfterEdit:function(index,row){
 95                     row.editing = false;
 96                     updateActions(index);
 97                 },
 98                 onCancelEdit:function(index,row){
 99                     row.editing = false;
100                     updateActions(index);
101                 }
102             });
103         });
104         function updateActions(index){
105             $('#tt').datagrid('updateRow',{
106                 index: index,
107                 row:{}
108             });
109         }
110         function getRowIndex(target){
111             var tr = $(target).closest('tr.datagrid-row');
112             return parseInt(tr.attr('datagrid-row-index'));
113         }
114         function editrow(target){
115             $('#tt').datagrid('beginEdit', getRowIndex(target));
116         }
117         function deleterow(target){
118             $.messager.confirm('Confirm','Are you sure?',function(r){
119                 if (r){
120                     $('#tt').datagrid('deleteRow', getRowIndex(target));
121                 }
122             });
123         }
124         function saverow(target){
125             $('#tt').datagrid('endEdit', getRowIndex(target));
126         }
127         function cancelrow(target){
128             $('#tt').datagrid('cancelEdit', getRowIndex(target));
129         }
130         function insert(){
131             var row = $('#tt').datagrid('getSelected');
132             if (row){
133                 var index = $('#tt').datagrid('getRowIndex', row);
134             } else {
135                 index = 0;
136             }
137             $('#tt').datagrid('insertRow', {
138                 index: index,
139                 row:{
140                     status:'P'
141                 }
142             });
143             $('#tt').datagrid('selectRow',index);
144             $('#tt').datagrid('beginEdit',index);
145         }
146     </script>
147 </head>
148 <body>
149     <h2>Editable DataGrid Demo</h2>
150     <div class="demo-info">
151         <div class="demo-tip icon-tip">&nbsp;</div>
152         <div>Click the edit button on the right side of row to start editing.</div>
153     </div>
154     
155     <div style="margin:10px 0">
156         <a href="#" class="easyui-linkbutton" onclick="insert()">Insert Row</a>
157     </div>
158     
159     <table id="tt"></table>
160     
161 </body>
162 </html>

 1 {"total":28,"rows":[
 2     {"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":16.50,"attr1":"Large","itemid":"EST-1"},
 3     {"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
 4     {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Venomless","itemid":"EST-11"},
 5     {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Rattleless","itemid":"EST-12"},
 6     {"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Green Adult","itemid":"EST-13"},
 7     {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":58.50,"attr1":"Tailless","itemid":"EST-14"},
 8     {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"With tail","itemid":"EST-15"},
 9     {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Female","itemid":"EST-16"},
10     {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Male","itemid":"EST-17"},
11     {"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":193.50,"attr1":"Adult Male","itemid":"EST-18"}
12 ]}