datagrid实现行的上移和下移
<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<rows.length; i++){ alert(rows[i].itemid); } } </script> </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>
data-options="singleSelect:true"
实现单行选择.
参考数据
{"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"} ]}