layui 选择列表,打勾,点击确定返回数据的例子


Posted in Javascript onSeptember 02, 2019

如下所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>文件数据</title>
 <link href="~/Content/Base/layui/css/layui.css" rel="external nofollow" rel="stylesheet" type="text/css" />
 <script src="~/Content/Base/layui/layui.js" type="text/javascript"></script>
 <script src="../../../../Content/Views/js/jquery-1.8.3.min.js" type="text/javascript"></script>
</head>
<body>
<style type="text/css">
  body
  {
   background-color: #F0F0F0;
  }
  #content
  {
   margin-top: 2px;
  }
  #btns
  {
   float:left;
  }
  #btns .layui-btn
  {
   margin-top: 5px;
  }
  #Addbtn
  {
   margin-left: 20px;
  }
  .layui-btn
  {
   background-color: #3385ff;
   width: 120px;
  }
  #datatable
  {
   background-color: White;
   margin-top: 5px;
   clear:both;
  }
  .topbox
  {
   height: 50px;
   background-color: #ffffff;
  }
  .searchbox
  {
   float: right;
   margin-right: 20px;
  }
  .searchinput, .searchbtn
  {
   float: left;
   margin-top: 5px;
  }
  .searchinput
  {
   width: 300px;
   margin-left: 20px;
  }
  .searchbtn button
  {
   width: 80px;
  }
 </style>
  <div id="content">
  <div class="topbox">
  <div class="searchinput">
   <input type="text" name="name" class="layui-input" id="SearchText" />
  </div>
  <div class="searchbtn">
   <button type="button" class="layui-btn" onclick="BtnSearchDataListInfo()">
    搜索</button></div>
  </div>
  <div id="datatable">
   <table id="demo" lay-filter="test" style="height:100%">
   </table>
  </div>
 </div>

 <script type="text/html" id="barDemo">
   <a class="layui-btn-mini" lay-event="Select" style="color:#3385ff">选择</a><span style="color:#3385ff">/</span>
 </script>
 <script type="text/javascript">
  layui.use('form', function () {
   var form = layui.form;
  });
  var table;
  var datas = null;
  function BindData() {
   $.ajax({
    cache: false,
    async: false,
    url: '/ModelList/BindModelListView',
    type: 'get',
    dataType: 'json',
    success: function (data) {
     DataTable(data);
    }, error: function (data) {
     alert(JSON.stringify(data));
    }
   })
  }
  function DataTable(data) {
   layui.use('table', function () {
    table = layui.table;
    window.demoTable = table.render({
     id: 'tempData',
     elem: '#demo',
     data: data,
     cols: [[
       { checkbox: true, title: '全选', width: 33 }
       , { field: 'modelname', title: '名称', width: 260, align: 'left' }
       , { field: 'name', title: '产品', width: 200, align: 'left', templet: '#ProductTpl' }
       , { field: 'version', title: '版本', width: 200, align: 'left' }
        , { field: 'mixname', title: '对象', width: 150, align: 'left' }
       , { field: 'methodsName', title: '方法', width: 150, align: 'right' }
       , { field: 'attributename', title: '属性', width: 180, align: 'left', templet: '#FeaturesTpl' }
     //, { field: 'name', title: '文件', width: 260, align: 'left', templet: '#DataListTpl' }
     //       , { field: 'name', title: '文件', width: 260, align: 'left',templet:'#DataListTpl' }
       , { field: 'ModelListType', title: '类型', width: 150, align: 'left' }
       // , { field: '', title: '操作', width: 300, align: 'center', toolbar: '#barDemo', fixed: 'right' }
         ]],
     height: 500,
     even: true,
     page: true

    });
    //监听工具条
    table.on('tool(test)', function (obj) {
     var data = obj.data;
     if (obj.event === 'Select') {
      alert("select");
     }
    });
   })

  }
  BindData();

  var callbackdata = function () {
   var checkStatus = table.checkStatus('tempData')
   , data = checkStatus.data;
   return data;
  }
 </script>
</body>
</html>

此页面为弹出框页面,选择某一列后,点击确定返回数据

layui.use('layer', function () {
    var layer = layui.layer;
    layer.open({
     cache: false,
     type: 2,
     title: '对比',
     skin: 'layui-layer-tb_125',
     area: ['600px', '250px'],
     content: '../ModelList/ModelMapNodeAttributeContrastForm',
     moveOut: true,
     zIndex: layer.zIndex,
     btn: ['确定', '关闭'],
     yes: function (index) {
      //当点击‘确定'按钮的时候,获取弹出层返回的值
      var resdata = window["layui-layer-iframe" + index].callbackdata();
      //最后关闭弹出层
      layer.close(index);
      layui.use('layer', function () {
       var layer = layui.layer;
       layer.open({
        type: 2,
        title: '查看',
        skin: 'layui-layer-tb_125',
        area: ['600px', '250px'],
        content: '../ModelList/ModelMapNodeAttributeDataForm?ContrastModelId=' + resdata["0"].modelid + '&ContrastModelName=' + resdata["0"].modelname + '&ContrastProductId=' + resdata["0"].productconfigid + '&aaaaaa=1',
        moveOut: true,
        zIndex: layer.zIndex,
        cancel: function (index, layero) {
         layer.close(index);
         return true;
        }, end: function () {

        }
       });
      });


     },
     cancel: function (index) {
      //右上角关闭回调
      layer.close(index);
     }
    });
   });

以上这篇layui 选择列表,打勾,点击确定返回数据的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 面向对象 继承
May 13 Javascript
网页中返回顶部代码(多种方法)另附注释说明
Apr 24 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
简单纯js实现点击切换TAB标签实例
Aug 23 Javascript
Angularjs中使用Filters详解
Mar 11 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
Sep 06 Javascript
原生JS实现幻灯片
Feb 22 Javascript
详解JavaScript中return的用法
May 08 Javascript
微信小程序对接七牛云存储的方法
Jul 30 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
Jul 26 Javascript
详解vue-cli3 中跨域解决方案
Apr 10 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
利用JS响应式修改vue实现页面的input值
Sep 02 #Javascript
layui 弹出层回调获取弹出层数据的例子
Sep 02 #Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
Sep 01 #Javascript
Vue使用mixin分发组件的可复用功能
Sep 01 #Javascript
JavaScript页面加载事件实例讲解
Sep 01 #Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 #Javascript
vue组件命名和props命名代码详解
Sep 01 #Javascript
You might like
php中实现精确设置session过期时间的方法
2014/07/17 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
jQuery显示和隐藏 常用的状态判断方法
2015/01/29 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
解决vue-cli中stylus无法使用的问题方法
2017/06/19 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
vue 使用ref 让父组件调用子组件的方法
2018/02/08 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
使用python编写脚本获取手机当前应用apk的信息
2014/07/21 Python
python中如何使用朴素贝叶斯算法
2017/04/06 Python
Python使用matplotlib简单绘图示例
2018/02/01 Python
PyQt4实现下拉菜单可供选择并打印出来
2018/04/20 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
python2与python3爬虫中get与post对比解析
2019/09/18 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
2020/01/25 Python
解决Python发送Http请求时,中文乱码的问题
2020/04/30 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
python实现简单的五子棋游戏
2020/09/01 Python
Python类成员继承重写的实现
2020/09/16 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
校三好学生主要事迹
2014/01/11 职场文书
新品发布会策划方案
2014/06/08 职场文书
作风整顿剖析材料
2014/09/30 职场文书
小平您好观后感
2015/06/09 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
js中Object.create实例用法详解
2021/10/05 Javascript
python脚本框架webpy模板控制结构
2021/11/20 Python
青岛市的收音机研制与生产
2022/04/07 无线电