layui當點擊文本框時彈出選擇框,顯示選擇內(nèi)容的例子
實現(xiàn)如圖所示的功能
實現(xiàn)步驟:
1.html頁面需要注意的內(nèi)容
1)、 table
<div id="hidden1" lay-filter="hidden1" style="display: none"> <table id="department_result" lay-filter="department_result"></table> </div>
2)、彈出部門表格中的按鈕
<!-- 添加 彈出部門表格的 tool(里面的按鈕) <script type="text/html" id="hidden1-table-tool"> <a class="layui-btn layui-btn-xs" lay-event="select">選擇</a> </script>
2.js實現(xiàn)
1)、全局設置
// 定義全局變量. employee.js 中要用到 var $, admin, table, layer, laydate, form; var context_path = '/layui-curd'; layui.config({ base: context_path + '/layuiadmin/' }).extend({ index : 'lib/index' }).use([ 'table', 'layer', 'laydate', 'form' ], function() { // part 1: 為全局變量賦值 $ = layui.$, admin = layui.admin, table = layui.table, layer = layui.layer, laydate = layui.laydate, form = layui.form; // part 2: 讓layui渲染頁面 table.render(department_result_table_options); // 渲染頁面上的table. table中 的數(shù)據(jù)是通過 ajax 請求從后臺獲取。 // part 3: 讓 layui 為頁面的元素綁定事件處理函數(shù) table.on('tool(department_result)', department_tool_event_handler); // 為頁面上的table上的tool綁定事件處理函數(shù) // part 4: 為輸入框綁定光標聚焦事件的觸發(fā)該函數(shù), $('#dname').focus(depart_input_focus_handler); });
2)、table渲染
//頁面上隱藏的用于彈層的所有客戶的列表的相關設置 var department_result_table_options = { elem: '#department_result' ,url: context_path + '/api/department' ,method : 'get' ,response : { statusName : 'code' ,statusCode : 200 ,msgName : 'msg' ,countName : 'count' ,dataName : 'data' } ,title : '部門列表' ,cols : [ [ { field : 'deptno', title : '部門編號', width : 100} ,{ field : 'dname', title : '部門名稱', width : 150 } ,{ field : 'loc', title : '所在地', width : 150 } ,{ fixed : 'right', title : '操作', toolbar : '#hidden1-table-tool', width : 80 } ] ] };
3)、客戶點擊時彈出彈層
// “客戶”輸入框的光標聚焦事件的觸發(fā)函數(shù), 彈出彈層,彈層上顯示所有的客戶,以供選擇。 function depart_input_focus_handler() { layer.open({ type : 1 , area : [ '600px', '450px' ] , content : $('#hidden1') , success : function () { // 重新加載表格中的數(shù)據(jù) table.reload('department_result', department_result_table_options); $('#hidden1').css('display', 'block'); } }); }
4)、客戶點擊選擇按鈕時數(shù)據(jù)回填
//點擊彈出的“客戶信息”彈層上的表格中“選中”按鈕的觸發(fā)函數(shù) function department_tool_event_handler(obj) { console.info(obj); var data = obj.data; switch (obj.event) { case 'select': $('#dname').val(data.dname); layer.close(layer.index); break; } }
3.后臺代碼實現(xiàn)略
以上這篇layui當點擊文本框時彈出選擇框,顯示選擇內(nèi)容的例子就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
JS基于ES6新特性async await進行異步處理操作示例
這篇文章主要介紹了JS基于ES6新特性async await進行異步處理操作,結(jié)合實例形式分析了async await進行異步處理操作的相關原理、步驟與注意事項,需要的朋友可以參考下2019-02-02javascript function、指針及內(nèi)置對象
該文摘自于匿名教程總結(jié),希望對初學js的同學有幫助,因為它解決了我學習js的眾多迷惑。。。2009-02-02微信小程序通過點擊事件跨頁面?zhèn)鲄⒓癲ata-方法傳參(data-)的示例詳解
在?vue?中,我們可以直接在點擊事件中放入傳遞的參數(shù)進行傳參;然而微信小程序中并不適用這樣的寫法,但是微信小程序可以通過自定義屬性從而綁定參數(shù)使用,這篇文章主要介紹了微信小程序通過點擊事件跨頁面?zhèn)鲄⒁约癲ata-方法傳參(data-),需要的朋友可以參考下2023-12-12使用Require.js封裝原生js輪播圖的實現(xiàn)代碼
這篇文章主要介紹了使用Require.js封裝原生js輪播圖的實現(xiàn)代碼,需要的朋友可以參考下2017-06-06bootstrap如何讓dropdown menu按鈕式下拉框長度一致
bootstrap框架提供了下拉菜單組件(dropdown),即點擊一個元素或按鈕,觸發(fā)隱藏的列表顯示出來。下面通過本文給大家介紹bootstrap如何讓dropdown menu按鈕式下拉框長度一致,需要的朋友可以參考下2017-04-04