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

2019-11-19 10:55:47

字体：大中小

来源：转载

供稿：网友

如下所示：

<!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 checkbox默认选中,获取选中值,清空所有选中项的例子

下一篇：利用JS响应式修改vue实现页面的input值