jquery ligerui 一个grid数据添加到另一个grid并删除本条记录错误

最新推荐文章于 2019-07-07 21:05:53 发布
最新推荐文章于 2019-07-07 21:05:53 发布
阅读量405 收藏
点赞数
分类专栏： javascript 文章标签： javascript jquery ligerui


程序要实现使用jquery ligerui选择一个grid表格中的数据，点击“添加”将本条数据添加到别一个grid表格中

两个grid表格的数据列相同我用本地v1.1.5的环境写了如下例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="http://www.ligerui.com//lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <script src="http://www.ligerui.com//lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="http://www.ligerui.com//lib/json2.js" type="text/javascript"></script>
    <script src="http://www.ligerui.com//lib/ligerUI/js/core/base.js" type="text/javascript"></script>
    <script src="http://www.ligerui.com//lib/ligerUI/js/plugins/ligerDialog.js" type="text/javascript"></script>
    <script src="http://www.ligerui.com//lib/ligerUI/js/plugins/ligerTextBox.js" type="text/javascript"></script>
    <script src="http://www.ligerui.com//lib/ligerUI/js/plugins/ligerCheckBox.js" type="text/javascript"></script>
    <script src="http://www.ligerui.com//lib/ligerUI/js/plugins/ligerComboBox.js" type="text/javascript"></script>
    <script src="http://www.ligerui.com//lib/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>
    <script src="http://www.ligerui.com//lib/ligerUI/js/plugins/ligerDateEditor.js" type="text/javascript"></script>
    <script src="http://www.ligerui.com//lib/ligerUI/js/plugins/ligerSpinner.js" type="text/javascript"></script>
     <script src="http://www.ligerui.com/demos/grid/EmployeeData.js" type="text/javascript"></script>
    <script src="http://www.ligerui.com/demos/grid/DepartmentData.js" type="text/javascript"></script>
    <script type="text/javascript">
        var DepartmentList = DepartmentData.Rows;
        var sexData = [{ Sex: 1, text: '男' }, { Sex: 2, text: '女'}];
        $(f_initGrid);
        var g = null;
		var x = null;
        function f_initGrid()
        {
            g = $("#maingrid").ligerGrid({
                columns: [
                { display: '主键', name: 'id', width: 50, type: 'int' },
                { display: '名字', name: 'name',
                    editor: { type: 'text' }
                }], data: { Rows: [] },
                isScroll: false,checkbox:true,
                width: '50%'
            });

			 x = $("#te").ligerGrid({
                columns: [
                { display: '主键', name: 'id', width: 50, type: 'int' },
                { display: '名字', name: 'name',
                    editor: { type: 'text' }
                }], data: { Rows: [{id:"aaa",name:"aaa"},{id:"bbb",name:"bbb"},{id:"ccc",name:"ccc"}] },
                isScroll: false,
                width: '50%'
            });
        } 
		function addDelData(){
			var manager = $("#maingrid").ligerGetGridManager();
			var temanager = $("#te").ligerGetGridManager();
			var tmprow = temanager.getSelectedRow();
			manager.addRow(tmprow);
			temanager.deleteSelectedRow();
		}
    </script>
</head>
<body  style="padding:10px">
 <div class="l-clear"></div>
    <div id="maingrid" style="margin-top:20px"></div> <br />
       <br />
	 <div id="te"></div><br />
   <a class="l-button" style="width:120px" οnclick="addDelData()">添加并删除</a>
  <div style="display:none;">
  <!-- g data total ttt -->
</div>
</body>
</html>

 

运行后页面图：

 

 

选中下边的一条记录点击“添加并删除”按钮可以将本条数据显示到上边的表格，并删除本条数据，可实际我用的时候就出问题了，数据可以添加到上边，本条记录也删除了，可是添加到上边表格的数据不可被选中，复选框怎么也选不中，后来我试了一下，把js的链接地址改成ligerui中文官网的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="http://www.ligerui.com//lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <script src="http://www.ligerui.com//lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="http://www.ligerui.com//lib/json2.js" type="text/javascript"></script>
    <script src="http://www.ligerui.com//lib/ligerUI/js/core/base.js" type="text/javascript"></script>
    <script src="http://www.ligerui.com//lib/ligerUI/js/plugins/ligerDialog.js" type="text/javascript"></script>
    <script src="http://www.ligerui.com//lib/ligerUI/js/plugins/ligerTextBox.js" type="text/javascript"></script>
    <script src="http://www.ligerui.com//lib/ligerUI/js/plugins/ligerCheckBox.js" type="text/javascript"></script>
    <script src="http://www.ligerui.com//lib/ligerUI/js/plugins/ligerComboBox.js" type="text/javascript"></script>
    <script src="http://www.ligerui.com//lib/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>
    <script src="http://www.ligerui.com//lib/ligerUI/js/plugins/ligerDateEditor.js" type="text/javascript"></script>
    <script src="http://www.ligerui.com//lib/ligerUI/js/plugins/ligerSpinner.js" type="text/javascript"></script>
     <script src="http://www.ligerui.com/demos/grid/EmployeeData.js" type="text/javascript"></script>
    <script src="http://www.ligerui.com/demos/grid/DepartmentData.js" type="text/javascript"></script>
    <script type="text/javascript">
        var DepartmentList = DepartmentData.Rows;
        var sexData = [{ Sex: 1, text: '男' }, { Sex: 2, text: '女'}];
        $(f_initGrid);
        var g = null;
		var x = null;
        function f_initGrid()
        {
            g = $("#maingrid").ligerGrid({
                columns: [
                { display: '主键', name: 'id', width: 50, type: 'int' },
                { display: '名字', name: 'name',
                    editor: { type: 'text' }
                }], data: { Rows: [] },
                isScroll: false,checkbox:true,
                width: '50%'
            });

			 x = $("#te").ligerGrid({
                columns: [
                { display: '主键', name: 'id', width: 50, type: 'int' },
                { display: '名字', name: 'name',
                    editor: { type: 'text' }
                }], data: { Rows: [{id:"aaa",name:"aaa"},{id:"bbb",name:"bbb"},{id:"ccc",name:"ccc"}] },
                isScroll: false,
                width: '50%'
            });
        } 
		function addDelData(){
			var manager = $("#maingrid").ligerGetGridManager();
			var temanager = $("#te").ligerGetGridManager();
			var tmprow = temanager.getSelectedRow();
			manager.addRow(tmprow);
			temanager.deleteSelectedRow();
		}
    </script>
</head>
<body  style="padding:10px">
 <div class="l-clear"></div>
    <div id="maingrid" style="margin-top:20px"></div> <br />
       <br />
	 <div id="te"></div><br />
   <a class="l-button" style="width:120px" οnclick="addDelData()">添加并删除</a>
  <div style="display:none;">
  <!-- g data total ttt -->
</div>
</body>
</html>

 

出现相同的问题添加成功但不可被选中，调试好久最后发现是temanager.deleteSelectedRow();这句引起的，去掉就不会出错了

不知道这是不是ligerui升级后的bug，明明V1.1.5下是可以的，现在官网是V1.1.9了，却不可以这样写了

解决办法：将下边表格缓存数据中的本条记录删除，再重加载删除后的数据就可以了，修改addDelData()方法如下：

function addDelData(){
			var manager = $("#maingrid").ligerGetGridManager();
			var temanager = $("#te").ligerGetGridManager();
			var tmprow = temanager.getSelectedRow();
			manager.addRow(tmprow);
			//temanager.deleteSelectedRow();
			var tmpdata = temanager.getData();
			$(tmpdata).each(function(i){
				if(this.id == tmprow.id)
					tmpdata.splice(i,1);
			});
			var tmploadData = {Rows:tmpdata};
			temanager.loadData(tmploadData);
		}

 

 

kiis8
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
从一个grid1选中的记录在另一个grid2中显示，翻页则把grid1当前页在grid2中含有的记录选中
每天=生命的最后一天
03-12 1260
1、建整个Panel1页面脚本              var right_gridPanel = Ext.getCmp(“right_gridPanel”);          if(right_gridPanel==null){              /*********************                        * 设置列表的表头    
ligerui 表格中设置单元格不可编辑，添加行，删除行
cc_yy_zh的博客
09-14 5136
一、需求：开发个表格grid用来显示维护线路段，出发地和目的地已经确定，需要维护中间路段 二、解析: 1、既然出发地和目的地已经确定，那么出发地和目的地是不可以编辑的，因为附带有其他字段是可以编辑的，所以不可以直接操作行 2、添加的线路段需要在目的地之前显示 三、开发 上网查了一些资料，还是没有头绪，想了好久终于还是实现了 1、点击添加时在目的地之前添加一行toolbar : {
LigerUI中根据该行的元素，删除行
weixin_34392435的博客
05-15 309
在谢哥 （LigerUI地址http://www.ligerui.com/ 谢哥博客http://www.cnblogs.com/leoxie2011/）的帮助下实现了 function f_initGrid() { $("#maingrid").ligerGrid({ columns: [ { ...
[ligerUI] grid行编辑示例
weixin_30770783的博客
11-14 215
ligerui grid行编辑示例，具备新增行、删除行功能，可在修改某个cell之后，如果录入错误，可以提醒用户。 <%@ page contentType="text/html; charset=UTF-8" %> <% String path = request.getContextPath(); %> <!DOCTYPE html> ...
Jquery ligerUI一个小例子
04-08
**jQuery LigerUI：一个轻量级的前端框架** jQuery LigerUI是一个基于jQuery的轻量级前端开发框架，主要用于构建具有美观界面和交互效果的Web应用。它提供了丰富的组件和插件，使得开发者能够快速地创建出具有专业...
jQuery ligerUI API.rar_jQuery ligerUI API_ligerui api
最新发布
09-24
jQuery ligerUI API文档是一个非常重要的参考资料，它详尽地介绍了每个组件的使用方法、参数配置和事件处理。例如，ligerGrid的API中包含了如何设置列定义、数据源、编辑模式等内容；ligerDialog则提供了如何创建、...
Jquery LigerUI 中文 API
12-25
- **通用方法**：LigerUI 的大部分组件可以通过 jQuery 对象的 `ligerGetControl` 方法创建，例如创建一个简单的输入框： ```javascript $("#inputId").ligerTextBox(); ``` 3. **组件属性与配置** - **配置项*...
jQuery LigerUI V1.3.3.rar.rar
06-07
总的来说，jQuery LigerUI V1.3.3是一个强大的前端UI框架，它提供了丰富的组件和工具，帮助开发者快速构建美观、功能齐全的Web应用。通过深入学习和掌握其特性，开发者可以提升工作效率，同时为用户提供更好的使用...
基于jQuery ligerUI实现分页样式
10-21
ligerUI是一个基于jQuery的前端界面库，它提供了一系列预定义的控件，其中ligerGrid控件是该系列插件的核心，允许开发者以一种快速便捷的方式来创建表格，并且这个表格支持多种实用功能，如排序、分页、多表头、固定...
ligerGrid列表Demo
08-06
NULL 博文链接：https://xiayanghui.iteye.com/blog/2087266
jQuery liger ul ligerGrid 打造通用的分页排序查询表格
08-24
简单来说，liger grid 就是提交准备好的数据到指定的目标请求数据，拿到数据以后，显示出来。
LigerUI之Grid使用详解(一)——显示数据
11-09
LigerUI之Grid使用详解(一)——显示数据示例程序源码
Layui数据表格之间数据回填（复制数据/免查询）
qq_41708308的博客
07-07 3589
  需求：从一张数据表格中选中需要的数据，点击添加按钮把选中的数据复制一份显示在另一个数据表格中。   应用环境：选择商品销售。   UI：   功能完成思路：Layui框架中的数据表格接收的数据是一个数组数据，每条数据对应数组中的一个元素。Layui提供了一系列方法可以操作表格。只需要获取到表格中选中的数据（数据数组），调用Layui的表格重载的方法把获取到的数据直接赋给另一个表格即可。下面给...
T5 技巧 2：为Grid组件的每一行增加“删除/修改”链接。
邓胤的家当
08-21 190
[color=red]现在正在使用T5开发一个小项目。 因为现在T5还正处于发展中。 而且没有像T4一样有许多的文档。 和例子(Workbench, Vlib)。 所以我会把在这个开发中遇到的一些问题记录下来。[/color] 记得在T4中是使用一组字符串来作为table columns。 为了加上删除/修改按钮的话，我们就只要加上"!operation" 这样的字符串， 然后用block ...
ligerGrid的使用
热门推荐
p419228530的专栏
12-04 1万+
加载： $.post('@Url.Action("defindselect")', {SPName: _productname, SPType: _sptype,ZhiYiTongID:$("#txtZhiYiTong").val() },              function(json) {                 manager.loadData([]);     
ligerui联动清空控件值
德玛西亚！
05-20 669
最近做项目时遇到一个问题，用ligerui构建的form控件需要联动，但是控件按钮处都有个*x*号用于清空该控件的content，这时也得需要清空与该控件联动的控件content，ligerui本身并没有此事件，于是自己拓展了一下，代码如下：1：ligerComboBox中$.ligerDefaults.ComboBox = {        afterClearContent : null,/...
jQuery liger ui ligerGrid 打造通用的分页排序查询表格(提供下载)
zhengxiuchen86的博客
08-10 202
一，ligerGrid是如何工作的。 在没有开始做之前，需要先了解一下ligerGrid是如何工作的。简单来说，liger grid 就是提交准备好的数据到指定的目标请求数据，拿到数据以后，显示出
jQuery ligerUI分页实现详解
jQuery ligerUI 是一个流行的前端组件库，尤其在创建高效、美观的用户界面时非常有用。ligerUI 提供了一个名为 ligerGrid 的核心控件，它允许开发者轻松创建具有高级功能的表格，如排序、分页、多表头和固定列等。在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值