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

]}

下移同理.

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

  1. datagrid实现行的上移和下移

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  2. Extjs中grid行的上移和下移

    一.将up和down按钮放到tbar中,然后选中grid行即可实现上移和下移 var up = new Ext.Action({ text : 'Up', icon : 'up.png',//或者添加 ...

  3. JQuery实现表格行的上移、下移、删除、增加

    <%@ page language="java" import="java.util.*" pageEncoding="GBK"%&g ...

  4. jquery easyui datagrid实现单行的上移下移，以及保存移动的结果

    1.实现行的上移.下移. 说明: 1.1 通过datagrid生成的表格有固定的格式,比如,表格div的class名是datagrid-view.比如每一行tr都有id和datagrid-row-in ...

  5. Lind.DDD.Domain.ISortBehavor～上移与下移

    在进行列表排序时,有个“上移”和“下移”操作,这个一般在内存里完成,然后统一提交到数据库中,对于上移与下移的设计,大叔在LIND.DDD.DOMAIN里有一个ISortBehavor接口,主要是说,如 ...

  6. jquery实现标签上移、下移、置顶

    eg:如在后台的标签列表中,实现上移.下移.置顶功能 思路: 1.先用到的克隆方法.clone(true): 即把当前要移动的项先保存好,备于后用. 2.找到当前标签所对应的相关元素及其相关方法: 如 ...

  7. js上移、下移、置顶、置底功能实现

    实现页面上列表内容上移.下移.置顶.置底 功能,主要实现思路是节点操作,比如说:上移,直接把点击项移动到前一个节点,以此类推,当然实际代码实现还要加些判断,如当前点击操作项是否已经是置底或置底了,如果 ...

  8. ListView上移 和下移

              有问题 //ListBox选中的项目移动到第1位   Listbox1.Items.Move(ListBox1.ItemIndex,0); //ListView选中的项目移动到第1 ...

  9. Easyui Datagrid rownumbers行号四位、五位显示不完全的解决办法

    Easyui Datagrid rownumbers行号四位.五位显示不完全的解决办法(引) 方法一: 相信很多人在使用easyui的时候都遇到过这个问题,当我们设置成显示Rownumber的时候,你 ...

随机推荐

  1. oracle预定义角色

    角色是相关权限的集合,使用角色能够简化权限的管理.简而言之就是oracle可以事先把一系列权限集中在一起(角色),打包赋予给用户,那么用户就具有了角色的一系列权限. oracle预定义角色有25种,它 ...

  2. Visual Studio自动添加头部注释 -C#开发2010-2013验证

    在团队开发中,头部注释是必不可少的.但在开发每次新建一个类都要复制一个注释模块也很不爽,所以得想个办法让开发工具自动生成我们所需要的模板.....操作方法如下: 找你的vs安装目录, 比如我的是在D盘 ...

  3. Maven入门2-pom.xml文件与settings.xml文件

    Maven入门2-pom.xml文件与settings.xml文件 本文内容来源于官网文档部分章节,settings.xml文件:参考http://maven.apache.org/settings. ...

  4. Java版简易画图板的实现

    Windows的画图板相信很多人都用过,这次我们就来讲讲Java版本的简易画板的实现. 基本的思路是这样的:画板实现大致分三部分:一是画板界面的实现,二是画板的监听以及画图的实现,三是画板的重绘.(文 ...

  5. 新篇章之我的java学习之路上

    现在我怀着激动和兴奋的心情来写我的第一篇博客,谈谈我自己的学习java的这段历程. 我大学学的软件工程专业,学校开设过c++,数据结构,java,Android等等这类的关于开发的相关课程,但是在学校 ...

  6. Docker 中的一些概念

    笔者使用 Mac 系统玩的,所以会更多阐述 Mac 上使用的一些东西. 在安装之前有些 Docker 相关的概念需要了解一下,以便我们更好了解 Docker. 简单来说,安装 Docker 之后,会在 ...

  7. Windows7 下安装 tersorflow

    最近看起深度学习的一些知识,想要学习一个框架.在网上看了别人对这些框架的评比后,决定学习 tersorflow.之前一直以为 tersorflow 只可以在 Linux 下安装,出乎意料的是,Wind ...

  8. （转）.tar.gz文件和.rpm文件的区别

    场景:在Linux环境下安装软件时候总是会遇到安装软件格式的选择,以及安装. 1 软件的二进制分发 Linux软件的二进制分发是指事先已经编译好二进制形式的软件包的发布形式, 其优点是安装使用容易,缺 ...

  9. 【Mysql】Mysql关键字

    ADD ALL ALTER ANALYZE AND AS ASC ASENSITIVE BEFORE BETWEEN BIGINT BINARY BLOB BOTH BY CALL CASCADE C ...

  10. 实例化bean

    从bean.xml中<bean>标签内容可以看出bean其实是一个管理对象的东西,我们只需要修改xml配置文件,就可以改变对象之间的依赖关系,不需要去修改任何源代码.我觉得学习好sprin ...