layui當(dāng)點(diǎn)擊文本框時(shí)彈出選擇框,顯示選擇內(nèi)容的例子

更新時(shí)間：2019年09月02日 10:11:29 作者：求學(xué)務(wù)實(shí)

今天小編就為大家分享一篇layui當(dāng)點(diǎn)擊文本框時(shí)彈出選擇框,顯示選擇內(nèi)容的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

實(shí)現(xiàn)如圖所示的功能

實(shí)現(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實(shí)現(xiàn)

1）、全局設(shè)置




// 定義全局變量. 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 請(qǐng)求從后臺(tái)獲取。

 // part 3: 讓 layui 為頁面的元素綁定事件處理函數(shù)
 table.on('tool(department_result)', department_tool_event_handler); // 為頁面上的table上的tool綁定事件處理函數(shù)
 
 // part 4: 為輸入框綁定光標(biāo)聚焦事件的觸發(fā)該函數(shù)，
 $('#dname').focus(depart_input_focus_handler);
});

2）、table渲染



//頁面上隱藏的用于彈層的所有客戶的列表的相關(guān)設(shè)置
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 : '部門編號(hào)', width : 100}
 ,{ field : 'dname', title : '部門名稱', width : 150 }
 ,{ field : 'loc', title : '所在地', width : 150 }
 ,{ fixed : 'right', title : '操作', toolbar : '#hidden1-table-tool', width : 80 } ] ]
};

3）、客戶點(diǎn)擊時(shí)彈出彈層

// “客戶”輸入框的光標(biāo)聚焦事件的觸發(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）、客戶點(diǎn)擊選擇按鈕時(shí)數(shù)據(jù)回填

//點(diǎn)擊彈出的“客戶信息”彈層上的表格中“選中”按鈕的觸發(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.后臺(tái)代碼實(shí)現(xiàn)略

以上這篇layui當(dāng)點(diǎn)擊文本框時(shí)彈出選擇框,顯示選擇內(nèi)容的例子就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: