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>
<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"
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"}
- ]}
{"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"}
]}
下移同理.
最新文章
- js 的一些知识 摘自http://img0.pconline.com.cn/Pc_intranet/1105/13/313647_7.pdf
- Centos下yum安装PHP
- maven使用阿里云仓库
- 程序员定制的中州韵(rime)windows版(小狼毫)微软双拼输入法
- 追访现代主流程序员的家庭事业观---禅宗派程序员KUROKY
- HDU 4638 Group ★(树状数组)
- js 乱码解决方案
- 解题报告 HDU1087 Super Jumping! Jumping! Jumping!
- Android开发系列之屏幕密度和单位转换
- Struts1文件上传、单文件、多文件上传【Struts1】
- 【Egret】里使用iframe标签达到内嵌多个web界面
- nginx启动停止
- Android自定义控件及自定义属性
- MySQL性能调优——锁定机制与锁优化分析
- 正则表达式判断QQ号格式是否正确
- PHP 图片验证码验证
- Linux下的进程类别(内核线程、轻量级进程和用户进程)--Linux进程的管理与调度(四)
- IOS 数据存储之 FMDB 详解
- 【SPL标准库专题(1)】 SPL简介
- BZOJ2738:矩阵乘法——题解
热门文章
- 容器_JDK源码分析_自己简单实现ArrayList容器
- .NetCore~Json代替了Xml
- 基于 WebRTC 技术的实时通信服务开发实践
- 计算 x y 的最近值
- c/c++ SQLite3的常用使用方法;
- spring加载异常
- form表单提交图片禁止跳转
- ubuntu14.04下编译安装ambari-2.4.2.0
- xmake v2.1.5版本正式发布,大量新特性更新
- Given n pairs of parentheses, write a function to generate all combinations of well-formed parentheses. For example, given n = 3, a solution set is: ";((()))";, ";(()())";, ";(())()";, ";()(())";, ";()()()";