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. 与你们分享我学习linux系统的三大妙招

    一说到linux,我们就自然会想到企业服务器系统,目前市场上的网络设备都是使用linux内核操作系统,一些网络服务器也是使用linux操作系统下面的服务搭建实现的:目前操作系统这块也基本被linux占 ...

  2. 使用curl,libcurl访问Https

    编译curl,libcurl 下载curl源码(git clone https://github.com/curl/curl),在目录curl\winbuild\BUILD.WINDOWS.txt文件 ...

  3. IE浏览器兼容问题(上)——html和css的兼容写法

    用户使用的浏览器五花八门,我们要保证每一种浏览器都能兼容我们的代码,不能要求用户去改变浏览器,那么就得在我们的代码上下功夫.此时我们要用到hack. HACK就是针对不同的浏览器写不同的HTML.CS ...

  4. PHP ORM笔记

    1.ORM是什么? 经常听到程序员的面试中会问到对ORM的了解,但是一直不知道ORM是个什么鬼东西,知道有一天在百度上顺带看到才发现ORM就是我们平时在框架中一直使用的数据库对象操作.ORM(Obje ...

  5. STL—内存的配置与释放

    上一篇我们介绍了STL对象的构造与析构,这篇介绍STL内存的配置与释放. STL有两级空间配置器,默认是使用第二级.第二级空间配置器会在某些情况下去调用第一级空间配置器.空间配置器都是在allocat ...

  6. Ubuntu source insight3稳定性

    Ubuntu 14.04 中安装了source insight3,用wine打开.导入工程,开始查看代码. 原来是直接导入了Android所有的源码,SI同步文件很慢.而且容易出现窗口变灰色的情况.经 ...

  7. 51nod_1639:绑鞋带

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1639 #include <bits/stdc++.h& ...

  8. openjudge8465:马走日 [搜索]

    描述 马在中国象棋以日字形规则移动. 请编写一段程序,给定n*m大小的棋盘,以及马的初始位置(x,y),要求不能重复经过棋盘上的同一个点,计算马可以有多少途径遍历棋盘上的所有点. 输入 第一行为整数T ...

  9. HDU-4787 GRE Words Revenge 解题报告

    这是我之前博客里提到的一道AC自动机的练手题,但是要完成这道题,我之前博客里提到的东西还不够,这里总结一下这道题. 这道题不是一般的裸的AC自动机,它的询问和插入是交叉出现的所以用我之前写的板子不大合 ...

  10. phpMyAdmin安装部署

    phpMyAdmin 是一个用PHP编写的软件工具,可以通过web方式控制和操作MySQL数据库.通过phpMyAdmin 可以完全对数据库进行操作,例如建立.复制和删除数据等等.如果使用合适的工具, ...