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实现二分查找法实现代码
Nov 12 Javascript
JavaScript prototype属性使用说明
May 13 Javascript
js 验证密码强弱的小例子
Mar 21 Javascript
jquery购物车实时结算特效实现思路
Sep 23 Javascript
为指定的元素添加遮罩层的示例代码
Jan 15 Javascript
教你如何使用PHP输出中文JSON字符串
May 22 Javascript
javascript 10进制和62进制的相互转换
Jul 31 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
Feb 10 Javascript
原生js FileReader对象实现图片上传本地预览效果
Mar 27 Javascript
vue 属性拦截实现双向绑定的实例代码
Oct 24 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
May 29 Javascript
JS事件循环机制event loop宏任务微任务原理解析
Aug 04 Javascript
利用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里的JS打印函数
2006/10/09 PHP
PHP脚本的10个技巧(3)
2006/10/09 PHP
php中filter函数验证、过滤用户输入的数据
2014/01/13 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
详解PHP素材图片上传、下载功能
2019/04/12 PHP
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
2013/11/13 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
2015/01/28 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
2015/04/14 Javascript
纯javascript版日历控件
2016/11/24 Javascript
基于jQuery实现火焰灯效果导航菜单
2017/01/04 Javascript
详解用node编写自己的cli工具
2017/05/23 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
2017/08/06 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
JS中获取 DOM 元素的绝对位置实例详解
2018/04/23 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
初步理解Python进程的信号通讯
2015/04/09 Python
python中尾递归用法实例详解
2015/04/28 Python
python使用PyGame模块播放声音的方法
2015/05/20 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
Python Excel处理库openpyxl使用详解
2019/05/09 Python
Python音频操作工具PyAudio上手教程详解
2019/06/26 Python
python turtle库画一个方格和圆实例
2019/06/27 Python
python用什么编辑器进行项目开发
2020/06/17 Python
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
建筑工程专业毕业生自荐信
2013/10/19 职场文书
计算机网络工程专业职业生涯规划书
2014/03/10 职场文书
班主任新年寄语
2014/04/04 职场文书
珍爱生命演讲稿
2014/05/10 职场文书
python3 删除所有自定义变量的操作
2021/04/08 Python
PHP实现rar解压读取扩展包小结
2021/06/03 PHP