easyUI 两个grid表格数据左移右移代码

做项目中经常遇到选择已有数据,移动到选择好数据grid的场景,比如为项目添加员工,左侧grid是待选择员工,选好后移动到右侧grid,这里我用的jquery-easyui-1.4.2,整理出一份grid数据移动的代码,可以直接使用。

1、jsp代码:(创建两个easyui-datagrid,左右横向排列)

<table>
     <tr><td><table id="leftGrid" class="easyui-datagrid" style="width: 330px; height: 230px"></table></td>
         <td><img src="../image/toRight.png" alt="全部右移" title="全部向右" onclick="onclick_leftToRight()" style="cursor: pointer;" />
                 <br /> <br /> <br />
                 <img src="../image/toLeft.png" alt="全部左移" title="全部向左" onclick="onclick_rightToLeft()" style="cursor: pointer;" />
         </td>
            <td><table id="rightGrid" class="easyui-datagrid selectedGrid" title="已选择员工列表"  style="width: 330px; height: 230px" data-options="rownumbers:true"></table></td>
     </tr>
     </table>

2、js代码:实现数据左右grid移动

//员工信息从左往右移
function onclick_leftToRight() {
   var slected = $(‘#leftGrid‘).datagrid("getSelections");
   for (var i = 0; i < slected.length; i++) {
    $(‘#rightGrid‘).datagrid(‘appendRow‘, slected[i]);//把选择的数据添加到右侧grid
    var rowIdex = $(‘#leftGrid‘).datagrid("getRowIndex",slected[i]);//得到索引
    $(‘#leftGrid‘).datagrid("deleteRow", rowIdex);//删除左侧grid中被移动的数据
   }
}
//员工信息从右往左移
function onclick_rightToLeft() {
  var slected = $(‘#rightGrid‘).datagrid("getSelections");
  for (var i = 0; i < slected.length; i++) {
   $(‘#leftGrid‘).datagrid(‘appendRow‘, slected[i]);
   //得到索引
   var rowIdex = $(‘#rightGrid‘).datagrid("getRowIndex",slected[i]);
   $(‘#rightGrid‘).datagrid("deleteRow", rowIdex);
  }
}

时间: 2024-10-13 16:23:06

easyUI 两个grid表格数据左移右移代码的相关文章

easyui 两个datagrid 数据左移右移

easyui 代码 <div class="easyui-layout" data-options="fit:true,border:false" > <div data-options="region:'north'" style="height:40px"> <h1>类别 : ${goodscatModel.text }</h1> </div> <div d

从零开始学_JavaScript_系列(十)——dojo(3)(GRID表格创建、样式、列宽可变、排序、过滤器)

(34)gridx gridx系列插件并非和dojo的插件在一起 需要下载的请通过以下网址下载: http://oria.github.io/gridx/ 不过我也不太懂不同版本有什么区别(事实上我对gridx还属于新手水平) PS:dojo本身有dojox/grid插件,语法和gridx并不同,所以不能混用. PSS: 由于看这篇帖子的人,基本没办法自己和服务器/数据库互动,所以建议自己写一个json文件,然后get这个json文件(具体看之前的AJAX相关的,很简单,或者使用我下面给的例子也

ExtJS4.2学习(三)Grid表格(转)

鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-07/172.html ---------------------------------------------------------------------------------------------- Ext中的表格功能非常强大,包括排序.缓存.拖动.隐藏某一列.自动显示行号.列汇总.单元格编辑等实用功能.表格由类Ext.grid.Grid

Python 中的驻留机制:小数据池和代码块

Python 中的驻留机制:小数据池和代码块 Python 中的驻留机制主要有两个:小数据池和代码块.驻留机制并不是学习 Python 过程中特别重要的概念,我们学习小数据池的目的主要有两个方面: 解决日后写代码过程中可能出现的疑惑.在后期开发中,能 明确 知道有些代码为什么不能正常使用 找工作面试时或多或少可能被问到,关键时刻起到装 X 的作用 先补充一个关键字 is.is(是) 和 ==(等于) 的作用十分相似,我们在这里将它们进行一个对比: == : 官方:判断等号两边的内容是否相同 白话

EASYUI- EASYUI左移右移 GRID中值

EASYUI左移右移 GRID中值 $("#addAll").click(function(){ var ids = []; var names = []; var srcrows = $('#sourceTable').datagrid('getSelections'); if(srcrows.length == 0 ){ Sys.InfoShow("请选择要移动的记录!"); return; } var id;var name; for(var srci=src

用easyui从servlet传递json数据到前端页面的两种方法

用easyui从servlet传递json数据到前端页面的两种方法 两种方法获取的数据在servlet层传递的方法相同,下面为Servlet中代码,以查询表中所有信息为例. //重写doGet方法 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stu

Easy-ui Datagrid表格数据的编辑与提交

前言 jQuery EasyUI是一组基于jQuery的UI 插件集合体,而jQuery EasyUI可以打造出功能更加丰富且美观的UI界面.开发者不需要了解复杂的javascript和css样式,只需要了解html标签. 一.    easy-ui基本知识 1.            easy-ui引用js顺序详解 引用Jquery的js文件: <script src="jquery-easyui-1.3.4/jquery-1.8.0.min.js" type="te

EasyUI笔记(六)数据表格

前言用asp.net结合easyui做个一个数据网格的页面,包括对数据的增删改查,界面如下:  一.UI界面 先写UI界面,代码如下,记得引入相关js和css文件 <body> <table id="tb1"></table> <div id="tb" style="padding:5px"> <div style="margin-bottom:5px"> <a

EasyUi 分页 和 表格数据加载

这里说明的是将说有数据先返回到前端再由前端去分页,性能可能没有先在后台分好页再返回给前端高 但如果操作不涉及大数据的话也没什么大问题,具体问题具体分析 要使用分页控件首先要声明初始化一下: 1 //设置分页控件 2 var p = $("#tt").datagrid('getPager'); //tt为表格id 3 $(p).pagination({ 4 // pageSize: 10,//每页显示的记录条数,默认为10 5 pageList: [5,10,15],//可以设置每页记录