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)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Egg.js 中 AJax 上傳文件獲取參數(shù)的方法
這篇文章主要介紹了Egg.js 中 AJax 上傳文件獲取參數(shù),需要的朋友可以參考下2018-10-10
使用JavaScript實現(xiàn)按鈕的漣漪效果實例代碼
近來看到個不錯的按鈕點擊效果,當點擊時產(chǎn)生一次水波漣漪效果,挺好玩的,下面這篇文章主要給大家介紹了關于使用JavaScript實現(xiàn)按鈕漣漪效果的相關資料,需要的朋友可以參考下2022-11-11

