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实现的动态文字变换
Jul 28 Javascript
function foo的原型与prototype属性解惑
Nov 19 Javascript
javascript生成随机数的方法
May 16 Javascript
jquery实现的省市区三级联动
Apr 02 Javascript
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
vuejs使用FormData实现ajax上传图片文件
Aug 08 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 Javascript
AngualrJs清除定时器遇到的坑
Oct 13 Javascript
React Router V4使用指南(精讲)
Sep 17 Javascript
vue 实现小程序或商品秒杀倒计时
Apr 14 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
Aug 18 Javascript
使用原生javascript开发计算器实例代码
Feb 21 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
Phpbean路由转发的php代码
2008/01/10 PHP
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
php短址转换实现方法
2015/02/25 PHP
php判断访问IP的方法
2015/06/19 PHP
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
弹出广告特效代码(一个IP只弹出一次)
2007/05/11 Javascript
js获取url参数的使用扩展实例
2007/12/29 Javascript
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
javascript 计算两个整数的百分比值
2009/12/26 Javascript
JavaScript CSS修改学习第六章 拖拽
2010/02/19 Javascript
Ext 今日学习总结
2010/09/19 Javascript
js如何取消事件冒泡
2013/09/23 Javascript
javascript变量声明实例分析
2015/04/25 Javascript
浅析javascript的return语句
2015/12/15 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
[02:43]2018DOTA2亚洲邀请赛主赛事首日TOP5
2018/04/04 DOTA
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
python处理csv数据的方法
2015/03/11 Python
python样条插值的实现代码
2018/12/17 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
python3实现带多张图片、附件的邮件发送
2019/08/10 Python
python 浮点数四舍五入需要注意的地方
2020/08/18 Python
用python批量下载apk
2020/12/29 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
CSS3 新增选择器的实例
2019/11/13 HTML / CSS
英国儿童家具专卖店:GLTC
2016/09/24 全球购物
全球最大的服务市场:Fiverr
2017/01/03 全球购物
采购内勤岗位职责
2013/12/10 职场文书
业务内勤岗位职责
2014/04/30 职场文书
党员电教片《信仰》心得体会
2016/01/15 职场文书
详解JAVA中的OPTIONAL
2021/06/14 Java/Android
Java并发编程之Executor接口的使用
2021/06/21 Java/Android