zoukankan      html  css  js  c++  java
  • 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+"
    Price:"+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('
    '));
    		}
            
            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="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"}
    ]}
    
  • 相关阅读:
    【BZOJ5298】【CQOI2018】交错序列(矩阵快速幂优化dp)
    【BZOJ5297】【CQOI2018】社交网络(有向图生成树计数)
    【BZOJ5296】【CQOI2018】破解D-H协议(BSGS)
    【BZOJ1185】【HNOI2007】最小矩形覆盖(凸包+旋转卡壳)
    【BZOJ1069】【SCOI2007】—最大土地面积(凸包+旋转卡壳)
    【BZOJ2300】【HAOI2011】—防线修建(set维护动态凸包)
    【POJ1912】【Ceoi2002】—A highway and the seven dwarfs(凸包)
    【BZOJ1043】【HAOI2008】—下落的圆盘(圆的并集)
    node-多进程
    Node-RESTful
  • 原文地址:https://www.cnblogs.com/zhao1949/p/6108601.html
Copyright © 2011-2022 走看看