layui 選擇列表,打勾,點(diǎn)擊確定返回?cái)?shù)據(jù)的例子
如下所示:
<!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>文件數(shù)據(jù)</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: '產(chǎn)品', width: 200, align: 'left', templet: '#ProductTpl' } , { field: 'version', title: '版本', width: 200, align: 'left' } , { field: 'mixname', title: '對(duì)象', 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 }); //監(jiān)聽工具條 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>
此頁面為彈出框頁面,選擇某一列后,點(diǎn)擊確定返回?cái)?shù)據(jù)
layui.use('layer', function () { var layer = layui.layer; layer.open({ cache: false, type: 2, title: '對(duì)比', skin: 'layui-layer-tb_125', area: ['600px', '250px'], content: '../ModelList/ModelMapNodeAttributeContrastForm', moveOut: true, zIndex: layer.zIndex, btn: ['確定', '關(guān)閉'], yes: function (index) { //當(dāng)點(diǎn)擊‘確定'按鈕的時(shí)候,獲取彈出層返回的值 var resdata = window["layui-layer-iframe" + index].callbackdata(); //最后關(guān)閉彈出層 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) { //右上角關(guān)閉回調(diào) layer.close(index); } }); });
以上這篇layui 選擇列表,打勾,點(diǎn)擊確定返回?cái)?shù)據(jù)的例子就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
使用重寫url機(jī)制實(shí)現(xiàn)驗(yàn)證碼換一張功能
重寫URL機(jī)制:為了保證一個(gè)url的地址唯一,可每次向服務(wù)器傳遞的參數(shù)不一樣即可。此處在實(shí)現(xiàn)驗(yàn)證碼的換一張的功能時(shí),就是利用了改變參數(shù)列表的值進(jìn)行刷新。具體詳細(xì)代碼大家參考下本文2017-08-08JavaScript設(shè)計(jì)模式之單例模式詳解
單例模式(Singleton Pattern)是一種創(chuàng)建型設(shè)計(jì)模式,確保一個(gè)類只有一個(gè)實(shí)例,并提供全局訪問該實(shí)例的方式,這在某些場(chǎng)景下非常有用,例如配置管理類、日志類或數(shù)據(jù)庫連接管理類,需要的朋友可以參考下2024-08-08JS生態(tài)系統(tǒng)加速一次一庫PostCSS SVGO的重構(gòu)源碼和性能優(yōu)化探索
這篇文章主要介紹了JS生態(tài)系統(tǒng)加速一次一庫PostCSS SVGO的重構(gòu)源碼和性能優(yōu)化探索,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01layui實(shí)現(xiàn)動(dòng)態(tài)和靜態(tài)分頁
本篇文章通過實(shí)例給大家分享了layui實(shí)現(xiàn)動(dòng)態(tài)和靜態(tài)分頁的詳細(xì)方法,以及效果展示,有需要的朋友可以跟著參考學(xué)習(xí)下。2018-04-04JS實(shí)現(xiàn)下拉框的動(dòng)態(tài)添加(附效果)
頁面初加載時(shí):選擇車類型后:選擇車顏色后:JS實(shí)現(xiàn)下拉框的動(dòng)態(tài)添加,網(wǎng)頁代碼如下:動(dòng)態(tài)添加下拉框 車類型:請(qǐng)選擇寶馬、奔馳 車顏色2013-04-04javascript中的altKey 和 Event屬性大全
本文給大家介紹javascript中的altkey和event屬性大全,涉及到altkey和event屬性語法定義及用法,本文介紹的非常詳細(xì),感興趣的朋友一起看看吧2015-11-11