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"}
]}
下移同理.
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的时候,你 ...
随机推荐
- JavaScript+canvas 绘制多边形
效果图: <body> <canvas id="square" width="500"></canvas> <canv ...
- Vue2.0 生产环境部署
简要:继上次搭建vue环境后,开始着手vue的学习;为此向大家分享从开发环境部署到生产环境(线上)中遇到的问题和解决办法,希望能够跟各位VUE大神学习探索,如果有不对或者好的建议告知下:*~*! 一. ...
- IDEA的热部署插件jrebel6.4.3离线安装版配置与破解
JRebel 介绍 IDEA上原生是不支持热部署的,一般更新了 Java 文件后要手动重启 Tomcat 服务器,才能生效,浪费不少生命啊.目前对于idea热部署最好的解决方案就是安装JRebel插件 ...
- iOS 图文并茂的带你了解深拷贝与浅拷贝
一.概念与总结 1.浅拷贝 浅拷贝就是对内存地址的复制,让目标对象指针和源对象指向同一片内存空间,当内存销毁的时候,指向这片内存的几个指针需要重新定义才可以使用,要不然会成为野指针. 浅拷贝就是拷贝指 ...
- nyoj_14:会场安排问题
一道很经典的贪心问题 题目链接: http://acm.nyist.net/JudgeOnline/problem.php?pid=14 #include<iostream> #inclu ...
- (转)递归算法的时间复杂度终结篇与Master method
开篇前言:为什么写这篇文章?笔者目前在学习各种各样的算法,在这个过程中,频繁地碰到到递归思想和分治思想,惊讶于这两种的思想的伟大与奇妙的同时,经常要面对的一个问题就是,对于一个给定的递归算法或者用分治 ...
- FPGA计算3行同列数据之和
实验:FPGA计算3行同列数据之和 实验要求:PC机通过串口发送3行数据(一行有56个数据,3行共有56*3=168个数据)给FPGA,FPGA计算3行同一列数据的和,并将结果通过串口返回给上位机. ...
- Oracle 12C 新特性 - “可插拔数据库”功能
Oracle 12C加入了一个非常有新意的功能"可插拔数据库"特性,实现了数据库(PDB)在"容器"(CDB)上的拔功能,既能提高系统资源的利用率,也简化大面积 ...
- 解决lxml不含etree模块导致scrapy startproject ***出错
本文环境:win10(64) python3.6(64) 背景:之前已成功安装scrapy(1.4.0),但在命令行敲 scrapy startproject ***出错,错误提示:from ... ...
- hdu--1077--Catching Fish
思路: 1.枚举两点确定圆心,大于2不用考虑 2.逐个判断判断距圆心的距离小于1.00001符合题意 这个题,主要在求圆心上废了不少功夫,但是仍存在问题 #include<iostrea ...