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&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>

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"}

]}

下移同理.

datagrid实现行的上移和下移（转）的更多相关文章

datagrid实现行的上移和下移
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
Extjs中grid行的上移和下移
一.将up和down按钮放到tbar中,然后选中grid行即可实现上移和下移 var up = new Ext.Action({ text : 'Up', icon : 'up.png',//或者添加 ...
JQuery实现表格行的上移、下移、删除、增加
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%&g ...
jquery easyui datagrid实现单行的上移下移，以及保存移动的结果
1.实现行的上移.下移. 说明: 1.1 通过datagrid生成的表格有固定的格式,比如,表格div的class名是datagrid-view.比如每一行tr都有id和datagrid-row-in ...
Lind.DDD.Domain.ISortBehavor～上移与下移
在进行列表排序时,有个“上移”和“下移”操作,这个一般在内存里完成,然后统一提交到数据库中,对于上移与下移的设计,大叔在LIND.DDD.DOMAIN里有一个ISortBehavor接口,主要是说,如 ...
jquery实现标签上移、下移、置顶
eg:如在后台的标签列表中,实现上移.下移.置顶功能思路: 1.先用到的克隆方法.clone(true): 即把当前要移动的项先保存好,备于后用. 2.找到当前标签所对应的相关元素及其相关方法: 如 ...
js上移、下移、置顶、置底功能实现
实现页面上列表内容上移.下移.置顶.置底功能,主要实现思路是节点操作,比如说:上移,直接把点击项移动到前一个节点,以此类推,当然实际代码实现还要加些判断,如当前点击操作项是否已经是置底或置底了,如果 ...
ListView上移和下移
有问题 //ListBox选中的项目移动到第1位 Listbox1.Items.Move(ListBox1.ItemIndex,0); //ListView选中的项目移动到第1 ...
Easyui Datagrid rownumbers行号四位、五位显示不完全的解决办法
Easyui Datagrid rownumbers行号四位.五位显示不完全的解决办法(引) 方法一: 相信很多人在使用easyui的时候都遇到过这个问题,当我们设置成显示Rownumber的时候,你 ...

随机推荐

简单的线性回归问题-TensorFlow+MATLAB·
首先我们要试验的是人体脂肪fat和年龄age以及体重weight之间的关系,我们的目标就是得到一个最优化的平面来表示三者之间的关系: TensorFlow的程序如下: import tensorfl ...
request.setcharacterencoding()和request.setcontenttype
1.request.setCharacterEncoding()是设置从request中取得的值或从数据库中取出的值指定后可以通过getParameter()则直接获得正确的字符串,如果不指定,则默 ...
封装游戏配表读取和存储(xml格式);支持行列存取,标题存取
做服务器肯定会涉及到游戏配表,而读取游戏配表是一个必备技能; 之前一直都是采用TinyXml直接读,匹配字符串,每次加个表都是一大坨代码,看着也是心累; 因此利用了闲暇的时间封装了一个 xml配置表 ...
css3变换，过度，动画实现梦幻网页
html和css3一出,整个互联网设计发生了颠覆性的改变,各大IT企业也推出了很多新颖的设计,比如百度浏览器的下载首页,fullpage设计风格加css动画让网页看起来很流畅舒服. css3的变换有3 ...
【转载】DHCP流程
来源: http://network.51cto.com/art/201406/441752.htm DHCP是一个局域网的网络协议,使用UDP协议工作,主要有两个用途:给内部网络或网络服务供应商自动 ...
thinkphp 面向切面编程-行为拓展
thinkphp的CBD模式核心保留了最关键的部分,并在重要位置设置了标签用以标记,其他功能都采用行为扩展和驱动的方式组合,开发人员可以根据自己的需要,对某个标签位置进行行为扩展或者替换,就可以方便 ...
设计模式的征途—14.职责链（Chain of Responsibility）模式
相信大家都玩过类似于“斗地主”的纸牌游戏,某人出牌给他的下家,下家看看手中的牌,如果要不起,则将出牌请求转发给他的下家,其下家再进行判断.一个循环下来,如果其他人都要不起该牌,则最初的出牌者可以打出新 ...
java对Microsoft Document的操作--->对Excel的操作
起初,自己想对网站上爬取一些数据来写到Excel表格中,便在网上找了找java操作Excel接口,了解到Apache的POI接口可以对微软的文档进行操作,WIKI搜索的结果如下, HSSF - 提供读 ...
字符串--hdu--3783--ZOJ
/* Name: 字符串--hdu--3783--ZOJ Author: shen_渊 Date: 17/04/17 20:58 Description: 明天开始刷字符串的题,先来道水题 */ #i ...
Java 垃圾回收算法
在之前Java 运行期数据区一文中,介绍了运行时内存的各个部分.其中程序计数器.虚拟机栈.本地方法栈都随线程消亡,所以,这几个区域的内存分配和回收都具备确定性.而 Java 堆和方法区不同,我们只有在 ...

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

datagrid实现行的上移和下移（转）的更多相关文章

随机推荐

热门专题