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 相关文章推荐
用js脚本控制asp.net下treeview的NodeCheck的实现代码
Mar 02 Javascript
解决jquery的datepicker的本地化以及Today问题
May 23 Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
Nov 07 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 Javascript
Javascript 一些需要注意的细节(必看篇)
Jul 08 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
vue移动端监听滚动条高度的实现方法
Sep 03 Javascript
基于JS开发微信网页录音功能的实例代码
Apr 30 Javascript
微信小程序实现pdf、word等格式文件上传的方法
Sep 10 Javascript
Vue-cli3项目引入Typescript的实现方法
Oct 18 Javascript
微信小程序 scroll-view 实现锚点跳转功能
Dec 12 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
PHP调用三种数据库的方法(3)
2006/10/09 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
php+mysqli实现将数据库中一张表信息打印到表格里的方法
2015/01/28 PHP
php中header设置常见文件类型的content-type
2015/06/23 PHP
php文件操作之文件写入字符串、数组的方法分析
2019/04/15 PHP
分享一个自己写的table表格排序js插件(高效简洁)
2011/10/29 Javascript
JavaScript语言核心数据类型和变量使用介绍
2013/08/23 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
2016/01/26 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
2018/10/28 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
2019/11/12 Javascript
详解在Python程序中自定义异常的方法
2015/10/16 Python
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
python实现微信远程控制电脑
2018/02/22 Python
python opencv设置摄像头分辨率以及各个参数的方法
2018/04/02 Python
python中利用zfill方法自动给数字前面补0
2018/04/10 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
VSCode Python开发环境配置的详细步骤
2019/02/22 Python
python如何将两个txt文件内容合并
2019/10/18 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
Python利用socket模块开发简单的端口扫描工具的实现
2021/01/27 Python
Html5内唤醒百度、高德APP的实现示例
2019/05/20 HTML / CSS
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
意大利单身交友网站:Meetic
2020/07/12 全球购物
财务会计毕业生自荐信
2013/11/02 职场文书
中专毕业生自我鉴定范文
2013/11/09 职场文书
师范生的个人求职信范文
2014/01/04 职场文书
草船借箭教学反思
2014/02/03 职场文书
投资建议书模板
2014/05/12 职场文书
村容村貌整治方案
2014/05/21 职场文书
工伤事故赔偿协议书范文
2014/09/24 职场文书
爱心捐款感谢信
2015/01/20 职场文书
培训讲师开场白
2015/06/01 职场文书