EasyUI实现二级页面的内容勾选的方法


Posted in Javascript onMarch 01, 2015

EasyUI,在增、删的时候,经常用到二级页面进行勾选。

可以在datagird下面添加onCheck、onUncheck、onSelectAll、onUnselectAll事件。

在这些事件中,将勾选的内容存到map中,并转换成json格式字符串放到隐藏域中。

onCheck : function(rowIndex, rowData) 

   if (rowIndex > -1) {

    var userId= rowData.id;

    if(!dataMap.containsKey(userId))

    {

     dataMap.put(userId, rowData);

      $("input[name=selectData]").val(JSON.stringify(dataMap));

    }

   }

  } ,

  onUncheck : function(rowIndex, rowData) {

   if (rowIndex > -1) {

    var userId= rowData.id;

    if( dataMap.containsKey(userId))

    {

     dataMap.remove(userId);

      $("input[name=selectData]").val(JSON.stringify(dataMap));     

    }

   }

  },

  onSelectAll:function(rows){

   for(var i=0;i<rows.length;i++){

     var rowData=rows[i];

     var userId= rowData.id;

     if(!dataMap.containsKey(userId))

     {

      dataMap.put(userId, rowData);

       $("input[name=selectData]").val(JSON.stringify(dataMap));

     }

   }

  },

  onUnselectAll:function(rows){

   for(var i=0;i<rows.length;i++){

     var rowData=rows[i];

     var userId= rowData.id;

     if( dataMap.containsKey(userId))

     {

      dataMap.remove(userId);

       $("input[name=selectData]").val(JSON.stringify(dataMap));     

     }

   }

  }

在父页面,获取隐藏域中的内容。

selectForm是二级页面的form表单的id,selectData是form表单中存放勾选数据的隐藏域。

将隐藏域中的数据转换成json格式,再用map的形式将数据一个个提取出来。

最后userId和rowData分别为map.elements[i].key和map.elements[i].value。

var f = parent.$.modalDialogTwo.handler.find('#selectForm');

    var selectData = f.find('input[name="selectData"]').get(0).value;

    if (!selectData) {

     parent.$.messager.alert('提示', "请选择一条记录!");

     return;

    }

    var map = jQuery.parseJSON(selectData);

    if (map.elements.length > 0) {

     var nos = new Array();

     var names = new Array();

     for ( var i = 0; i < map.elements.length; i++) {

      var data = map.elements[i];

      nos.push(data.key);

      names.push(data.value.name);

     }

以上就是给大家分享的EasyUI实现二级页面的内容勾选的方法,希望对大家能够有所帮助。

Javascript 相关文章推荐
实现png图片和png背景透明(支持多浏览器)的方法
Sep 08 Javascript
Javascript 设计模式(二) 闭包
May 26 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
Oct 18 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
Jan 25 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
Cpage.js给组件绑定事件的实现代码
Aug 31 Javascript
详解小程序原生使用ES7 async/await语法
Aug 06 Javascript
node错误处理与日志记录的实现
Dec 24 Javascript
详解Vue.js v-for不支持IE9的解决方法
Dec 29 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
Jan 04 Javascript
JavaScript快速调试的两个技巧
Nov 04 Javascript
原生js中运算符及流程控制示例详解
Jan 05 Javascript
EasyUI实现第二层弹出框的方法
Mar 01 #Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
Mar 01 #Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 #Javascript
浅谈EasyUI中编辑treegrid的方法
Mar 01 #Javascript
EasyUI中combobox默认值注意事项
Mar 01 #Javascript
jquery中EasyUI实现异步树
Mar 01 #Javascript
jquery中EasyUI实现同步树
Mar 01 #Javascript
You might like
pdo中使用参数化查询sql
2011/08/11 PHP
destoon找回管理员密码的方法
2014/06/21 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
浅谈Javascript中的Function与Object
2015/01/26 Javascript
Bootstrap每天必学之js插件
2015/11/30 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
使用AJAX实现Web页面进度条的实例分享
2016/05/06 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
jQuery使用unlock.js插件实现滑动解锁
2017/04/04 jQuery
简单实现js上传文件功能
2017/08/21 Javascript
Angular2里获取(input file)上传文件的内容的方法
2017/09/05 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
JS 实现微信扫一扫功能
2018/09/14 Javascript
小试SVG之新手小白入门教程
2019/01/08 Javascript
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
简明 Python 基础学习教程
2007/02/08 Python
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
python3实现基于用户的协同过滤
2018/05/31 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
python删除指定列或多列单个或多个内容实例
2020/06/28 Python
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
数据员岗位职责
2013/11/19 职场文书
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
幼儿园三八妇女节活动总结
2015/02/06 职场文书
小学总务工作总结
2015/08/13 职场文书
SQL Server中的游标介绍
2022/05/20 SQL Server
windows系统搭建WEB服务器详细教程
2022/08/05 Servers