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,有空研究学习下
Jan 25 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 Javascript
javascript中的this详解
Dec 08 Javascript
JavaScript动态创建link标签到head里的方法
Dec 22 Javascript
jQuery地图map悬停显示省市代码分享
Aug 20 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
Nov 04 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
jQuery中使用validate插件校验表单功能
May 24 jQuery
基于Vue 撸一个指令实现拖拽功能
Oct 09 Javascript
javascript实现简单搜索功能
Mar 26 Javascript
从源码角度来回答keep-alive组件的缓存原理
Jan 18 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 多个submit提交表单 处理方法
2009/07/07 PHP
PHP 多维数组排序实现代码
2009/08/05 PHP
一个PHP针对数字的加密解密类
2014/03/20 PHP
php实现微信公众号主动推送消息
2015/12/31 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
laravel 获取某个查询的查询SQL语句方法
2019/10/12 PHP
脚本吧 - 幻宇工作室用到js,超强推荐base.js
2006/12/23 Javascript
将string解析为json的几种方式小结
2010/11/11 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
2013/05/24 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
2017/01/13 Javascript
jQuery使用unlock.js插件实现滑动解锁
2017/04/04 jQuery
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
express框架实现基于Websocket建立的简易聊天室
2017/08/10 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
vue+elementUI组件table实现前端分页功能
2020/11/15 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
Python编写电话薄实现增删改查功能
2016/05/07 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
python标记语句块使用方法总结
2019/08/05 Python
TensorBoard 计算图的可视化实现
2020/02/15 Python
python应用Axes3D绘图(批量梯度下降算法)
2020/03/25 Python
python将数据插入数据库的代码分享
2020/08/16 Python
Europcar英国:英国汽车和货车租赁
2017/01/21 全球购物
实习生求职自荐信
2014/02/07 职场文书
大学生活动总结模板
2014/07/02 职场文书
2014年自愿离婚协议书范本
2014/09/25 职场文书
幼师自荐信范文
2015/03/06 职场文书
MySQL主从复制断开的常用修复方法
2021/04/07 MySQL
Nginx内网单机反向代理的实现
2021/11/07 Servers