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 相关文章推荐
JavaScript Perfection kill 测试及答案
Mar 23 Javascript
setTimeout和setInterval的区别你真的了解吗?
Mar 31 Javascript
javascript中数组的concat()方法使用介绍
Dec 18 Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
js显示文本框提示文字的方法
May 07 Javascript
CSS javascript 结合实现悬浮固定菜单效果
Aug 23 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
详解如何构建Angular项目目录结构
Jul 13 Javascript
vue几个常用跨域处理方式介绍
Feb 07 Javascript
vue-prop父组件向子组件进行传值的方法
Mar 01 Javascript
基于node简单实现RSA加解密的方法步骤
Mar 21 Javascript
js实现省级联动(数据结构优化)
Jul 17 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下将图片以二进制存入mysql数据库中并显示的实现代码
2010/05/27 PHP
PHP实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
PHP中使用sleep函数实现定时任务实例分享
2014/08/21 PHP
php商品对比功能代码分享
2015/09/24 PHP
yii数据库的查询方法
2015/12/28 PHP
PHP  实现等比压缩图片尺寸和大小实例代码
2016/10/08 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
node.js中的fs.lchown方法使用说明
2014/12/16 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
JQuery选择器绑定事件及修改内容的方法
2015/01/23 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
JavaScript ES6中export、import与export default的用法和区别
2017/03/14 Javascript
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
JS实现的抛物线运动效果示例
2018/01/30 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
vue  elementUI 表单嵌套验证的实例代码
2019/11/06 Javascript
Python实现简单HTML表格解析的方法
2015/06/15 Python
基于Django用户认证系统详解
2018/02/21 Python
python traceback捕获并打印异常的方法
2018/08/31 Python
python+selenium 点击单选框-radio的实现方法
2019/09/03 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
如何提高SQL Server的安全性
2016/07/25 面试题
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
大专应届生个人的自我评价
2013/11/21 职场文书
两只小狮子教学反思
2014/02/05 职场文书
《识字五》教学反思
2014/03/01 职场文书
春风化雨观后感
2015/06/11 职场文书
新学期主题班会
2015/08/17 职场文书
《老人与海鸥》教学反思
2016/02/16 职场文书
python中的plt.cm.Paired用法说明
2021/05/31 Python