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