欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-12-02 16:42:22
如下所示:

如下所示:

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