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 无提示关闭窗口脚本
Aug 17 Javascript
Jquery遍历checkbox获取选中项value值的方法
Feb 13 Javascript
JavaScript实现自动变换表格边框颜色
May 08 Javascript
Bootstrap每天必学之下拉菜单
Nov 25 Javascript
js中删除数组中的某一元素实例(无下标时)
Feb 28 Javascript
vue滚动tab跟随切换效果
Jun 29 Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 Javascript
浅谈vuex中store的命名空间
Nov 08 Javascript
Vue实现图片与文字混输效果
Dec 04 Javascript
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
vue element table中自定义一些input的验证操作
Jul 18 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 08 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 heredoc和phpwind的模板技术使用方法小结
2008/03/28 PHP
php 三维饼图的实现代码
2008/09/28 PHP
解析php扩展php_curl.dll不加载的解决方法
2013/06/26 PHP
PHP5.3安装Zend Guard Loader图文教程
2014/09/29 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
JQuery datepicker 使用方法
2011/05/20 Javascript
jquery特效 幻灯片效果示例代码
2013/07/16 Javascript
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
2016/02/26 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
2017/07/19 Javascript
基于JavaScript实现前端数据多条件筛选功能
2020/08/19 Javascript
7个好用的JavaScript技巧分享(译)
2019/05/07 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
微信小程序点击保存图片到本机功能
2019/12/13 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
[11:42]2018DOTA2国际邀请赛寻真——OG卷土重来
2018/08/17 DOTA
c++生成dll使用python调用dll的方法
2014/01/20 Python
Python自动调用IE打开某个网站的方法
2015/06/03 Python
Python使用re模块正则提取字符串中括号内的内容示例
2018/06/01 Python
Python for循环及基础用法详解
2019/11/08 Python
使用CSS3制作一个简单的进度条(demo)
2017/05/23 HTML / CSS
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
美国牙科折扣计划:DentalPlans.com
2019/08/26 全球购物
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
教师师德教育的自我评价
2013/10/31 职场文书
法律进机关实施方案
2014/03/12 职场文书
电脑售后服务承诺书
2014/03/27 职场文书
纪律教育学习月活动总结
2014/08/27 职场文书
卫校毕业生自我鉴定
2014/09/28 职场文书
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书
JavaScript声明变量和数据类型的转换
2022/04/12 Javascript