datagrid实现行的上移和下移（转）

[html] view plain copy
 print?
  1. <html>  
  2. <head>  
  3.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  4.     <meta name="keywords" content="jquery,ui,easy,easyui,web">  
  5.     <meta name="description" content="easyui help you build your web page easily!">  
  6.     <title>jQuery EasyUI Demo</title>  
  7.     <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">  
  8.     <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">  
  9.     <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>  
  10.     <script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>  
  11.     <script>  
  12.         function getSelected(){  
  13.             var row = $('#tt').datagrid('getSelected');  
  14.             if (row){  
  15.                 alert('Item ID:'+row.itemid+"\nPrice:"+row.listprice);  
  16.             }  
  17.         }  
  18.         function getSelections(){  
  19.             var ids = [];  
  20.             var rows = $('#tt').datagrid('getSelections');  
  21.             for(var i=0; i<rows.length; i++){  
  22.                 ids.push(rows[i].itemid);  
  23.             }  
  24.             alert(ids.join('\n'));  
  25.         }  
  26.           
  27.         function upRow(){  
  28.             var row = $('#tt').datagrid('getSelected');  
  29.             var rowindex = $('#tt').datagrid('getRowIndex',row);  
  30.             //alert(rowindex);  
  31.             if(rowindex === 0) {return; }  
  32.             $('#tt').datagrid('insertRow',{index:rowindex-1,row});  
  33.             $('#tt').datagrid('deleteRow',rowindex+1);  
  34.         }  
  35.         function allRows(){  
  36.             var rows = $('#tt').datagrid('getRows');  
  37.             alert(rows.length);  
  38.             for(var i=0; i<rows.length; i++){  
  39.                 alert(rows[i].itemid);  
  40.             }  
  41.         }  
  42.     </script>  
  43. </head>  
  44. <body>  
  45.     <h1>DataGrid</h1>  
  46.     <div style="margin-bottom:20px">  
  47.         <a href="#" onclick="getSelected()">GetSelected</a>  
  48.         <a href="#" onclick="getSelections()">GetSelections</a>  
  49.         <a href="#" onclick="upRow()">upRow</a>  
  50.         <a href="#" onclick="allRows()">all rows</a>  
  51.     </div>  
  52.     <table id="tt" class="easyui-datagrid" style="width:600px;height:250px"  
  53.             url="data/datagrid_data.json"  
  54.             data-options="singleSelect:true"  
  55.             title="Load Data" iconCls="icon-save" fitColumns="true">  
  56.         <thead>  
  57.             <tr>  
  58.                 <th field="itemid" width="80">Item ID</th>  
  59.                 <th field="productid" width="80">Product ID</th>  
  60.                 <th field="listprice" width="80" align="right">List Price</th>  
  61.                 <th field="unitcost" width="80" align="right">Unit Cost</th>  
  62.                 <th field="attr1" width="150">Attribute</th>  
  63.                 <th field="status" width="60" align="center">Stauts</th>  
  64.             </tr>  
  65.         </thead>  
  66.     </table>  
  67. </body>  
  68. </html>  

[html] view plain copy
 print?
  1. data-options="singleSelect:true"  
实现单行选择.

参考数据:

[javascript] view plain copy
 print?
  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":"AV-CB-01","unitcost":92.00,"status":"P","listprice":193.50,"attr1":"Adult Male","itemid":"EST-18"}  
  6. ]}  

下移同理.

posted @ 2017-08-17 15:20  星朝  阅读(295)  评论(0)  编辑  收藏  举报