编程 Javascript

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 选择列表,打勾,点击确定返回数据的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

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

- Author -

lxysoid

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript基础知识大全便于大家学习，也便于我自己查看

Aug 17 Javascript

JQuery对class属性的操作实现按钮开关效果

Oct 11 Javascript

JS短路原理的应用示例精简代码的途径

Dec 13 Javascript

使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享

Apr 23 Javascript

三种取消选中单选框radio的方法

Sep 09 Javascript

jquery搜索框效果实现方法

Jan 16 Javascript

angularJS与bootstrap结合实现动态加载弹出提示内容

Oct 16 Javascript

js转html实体的方法

Sep 27 Javascript

微信小程序 loading（加载中提示框）实例

Oct 28 Javascript

微信小程序图片选择区域裁剪实现方法

Dec 02 Javascript

Cookbook组件形式：优化 Vue 组件的运行时性能

Nov 25 Javascript

小程序自定义导航栏兼容适配所有机型（附完整案例）

Apr 26 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