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判断数组中是否包含某一元素(类似于php中的in_array())
Dec 12 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
jQuery中after()方法用法实例
Dec 25 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 Javascript
js判断是否是手机页面
Mar 17 Javascript
vue实现底部菜单功能
Jul 24 Javascript
vue项目添加多页面配置的步骤详解
May 22 Javascript
js实现简单掷骰子效果
Oct 24 Javascript
浅谈vue权限管理实现及流程
Apr 23 Javascript
Element el-button 按钮组件的使用详解
Feb 01 Javascript
微信小程序input抖动问题的修复方法
Mar 03 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
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
php PDO判断连接是否可用的实现方法
2017/04/03 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
IE和firefox浏览器的event事件兼容性汇总
2009/12/06 Javascript
淘宝搜索框效果实现分析
2011/03/05 Javascript
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
判断对象是否Window的实现代码
2012/01/10 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
详解如何实现一个简单的 vuex
2018/02/10 Javascript
layui的table中显示图片方法
2018/08/17 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
react antd表格中渲染一张或多张图片的实例
2020/10/28 Javascript
[01:04:31]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第二场 1月8日
2021/03/11 DOTA
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
Python中的ctime()方法使用教程
2015/05/22 Python
Python 专题三 字符串的基础知识
2017/03/19 Python
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
Django中的AutoField字段使用
2020/05/18 Python
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
关于HTML5语义标签的实践(blog页面)
2016/07/12 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
荷兰皇家航空公司中国官网:KLM中国
2017/12/13 全球购物
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
庆元旦广播稿
2014/02/10 职场文书
趣味运动会策划方案
2014/06/02 职场文书
早读课迟到检讨书
2014/09/25 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
党员个人承诺书
2015/04/27 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
公司档案管理制度
2015/08/05 职场文书
掌握一个领域知识,高效学习必备方法
2019/08/08 职场文书