欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

layui當點擊文本框時彈出選擇框,顯示選擇內(nèi)容的例子

 更新時間:2019年09月02日 10:11:29   作者:求學務實  
今天小編就為大家分享一篇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)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關文章

最新評論