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

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. function upRow(){
27. var row = $('#tt').datagrid('getSelected');
28. var rowindex = $('#tt').datagrid('getRowIndex',row);
29. //alert(rowindex);
30. if(rowindex === 0) {return; }
31. $('#tt').datagrid('insertRow',{index:rowindex-1,row});
32. $('#tt').datagrid('deleteRow',rowindex+1);
33. }
34. function allRows(){
35. var rows = $('#tt').datagrid('getRows');
36. alert(rows.length);
37. for(var i=0; i<rows.length; i++){
38. alert(rows[i].itemid);
39. }
40. }
41. </script>
42. </head>
43. <body>
44. <h1>DataGrid</h1>
45. <div style="margin-bottom:20px">
46. <a href="#" onclick="getSelected()">GetSelected</a>
47. <a href="#" onclick="getSelections()">GetSelections</a>
48. <a href="#" onclick="upRow()">upRow</a>
49. <a href="#" onclick="allRows()">all rows</a>
50. </div>
51. <table id="tt" class="easyui-datagrid" style="width:600px;height:250px"
52. url="data/datagrid_data.json"
53. data-options="singleSelect:true"
54. title="Load Data" iconCls="icon-save" fitColumns="true">
55. <thead>
56. <tr>
57. <th field="itemid" width="80">Item ID</th>
58. <th field="productid" width="80">Product ID</th>
59. <th field="listprice" width="80" align="right">List Price</th>
60. <th field="unitcost" width="80" align="right">Unit Cost</th>
61. <th field="attr1" width="150">Attribute</th>
62. <th field="status" width="60" align="center">Stauts</th>
63. </tr>
64. </thead>
65. </table>
66. </body>
67. </html>

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="keywords" content="jquery,ui,easy,easyui,web">
	<meta name="description" content="easyui help you build your web page easily!">
	<title>jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
	<script>
		function getSelected(){
			var row = $('#tt').datagrid('getSelected');
			if (row){
				alert('Item ID:'+row.itemid+"\nPrice:"+row.listprice);
			}
		}
		function getSelections(){
			var ids = [];
			var rows = $('#tt').datagrid('getSelections');
			for(var i=0; i<rows.length; i++){
				ids.push(rows[i].itemid);
			}
			alert(ids.join('\n'));
		}
    function upRow(){
        var row = $('#tt').datagrid('getSelected');
        var rowindex = $('#tt').datagrid('getRowIndex',row);
        //alert(rowindex);
        if(rowindex === 0) {return; }
        $('#tt').datagrid('insertRow',{index:rowindex-1,row});
        $('#tt').datagrid('deleteRow',rowindex+1);
    }
    function allRows(){
        var rows = $('#tt').datagrid('getRows');
        alert(rows.length);
        for(var i=0; i&lt;rows.length; i++){
            alert(rows[i].itemid);
        }
    }
&lt;/script&gt;

</head>

<body>

<h1>DataGrid</h1>

<div style="margin-bottom:20px">

<a href="#" onclick="getSelected()">GetSelected</a>

<a href="#" onclick="getSelections()">GetSelections</a>

<a href="#" onclick="upRow()">upRow</a>

<a href="#" onclick="allRows()">all rows</a>

</div>

<table id="tt" class="easyui-datagrid" style="width:600px;height:250px"

url="data/datagrid_data.json"

data-options="singleSelect:true"

title="Load Data" iconCls="icon-save" fitColumns="true">

<thead>

<tr>

<th field="itemid" width="80">Item ID</th>

<th field="productid" width="80">Product ID</th>

<th field="listprice" width="80" align="right">List Price</th>

<th field="unitcost" width="80" align="right">Unit Cost</th>

<th field="attr1" width="150">Attribute</th>

<th field="status" width="60" align="center">Stauts</th>

</tr>

</thead>

</table>

</body>

</html>

1. data-options="singleSelect:true"

data-options="singleSelect:true"

实现单行选择.

参考数据:

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. ]}

{"total":28,"rows":[
	{"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":16.50,"attr1":"Large","itemid":"EST-1"},
	{"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
	{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Venomless","itemid":"EST-11"},
	{"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":193.50,"attr1":"Adult Male","itemid":"EST-18"}
]}

下移同理.