layui当点击文本框时弹出选择框,显示选择内容的例子 - 行业资讯

<>强实现如图所示的功能

实现步骤:

<强> 1. html页面需要注意的内容

1),表

　　　　　　　　　　& lt; div id=" hidden1 " lay-filter=癶idden1”比; 　　& lt;表id=癲epartment_result lay-filter”=癲epartment_result”祝辞& lt;/table> 　　& lt;/div> 　　　　

2),弹出部门表格中的按钮

　　　　　　　　& lt; !——添加弹出部门表格的工具(里面的按钮) 　　& lt;脚本type=" text/html " id=癶idden1-table-tool”比; 　　& lt;一个类=" layui-btn layui-btn-xs”lay-event=把≡瘛钡脑谘≡? lt;/a> 　　& lt;/script> 　　　　

<强> 2. js实现

1),全局设置

　　　　//定义全局变量。员工。js中要用的到　　var美元,管理、表层,laydate,形式; 　　var context_path='/layui-curd '; 　　　　layui.config ({ 　　基地:context_path +/layuiadmin/? 　　.extend ({}) 　　指数:“lib/指数” 　　})。使用([‘表’,‘层’,‘laydate’,‘形式’),函数(){//第1部分:为全局变量赋值=layui。美元, 　　管理=layui.admin, 　　表=layui.table, 　　层=layui.layer, 　　laydate=layui.laydate, 　　形式=layui.form;//第2部分:让layui渲染页面　　table.render (department_result_table_options);//渲染页面上的表。表中的数据是通过ajax请求从后台获取。//第3部分:让layui为页面的元素绑定事件处理函数　　table.on(“工具(department_result)”, department_tool_event_handler);//为页面上的表上的工具绑定事件处理函数//第4部分:为输入框绑定光标聚焦事件的触发该函数, 　　$ (' # dname ') .focus (depart_input_focus_handler); 　　}); 　　之前　　　　

2),表渲染

　　　　//页面上隐藏的用于弹层的所有客户的列表的相关设置　　var department_result_table_options={ 　　elem:“# department_result” 　　url: context_path +/api/部门的　　方法:“得到” 　　响应:{ 　　statusName:“代码” 　　statusCode: 200 　　msgName:“味精” 　　countName:“数” 　　dataName:“数据” 　　} 　　标题:“部门列表” 　　关口:[[ 　　{字段:“deptno”,标题:“部门编号”,宽度:100} 　　,{字段:“dname”,标题:“部门名称”,宽度:150} 　　,{字段:“疯狂的”,标题:“所在地”,宽度:150} 　　{固定:“正确”的标题:“操”作,工具栏:# hidden1-table-tool,宽度:80}]] 　　}; 　　　　

3),客户点击时弹出弹层

　　　　//翱突А笔淙肟虻墓獗昃劢故录拇シ⒑?弹出弹层,弹层上显示所有的客户,以供选择。　　函数depart_input_focus_handler () { 　　layer.open ({ 　　类型:1 　　,面积:600 px,“450 px”) 　　、内容:$ (' # hidden1 ') 　　成功:函数(){//重新加载表格中的数据　　表格重载(department_result, department_result_table_options); 　　$ (" # hidden1”)。css(“显示”、“块”); 　　} 　　}); 　　} 　　　　

4),客户点击选择按钮时数据回填

　　　　//点击弹出的“客户信息”弹层上的表格中“选”中按钮的触发函数　　函数department_tool_event_handler (obj) { 　　console.info (obj); 　　var=https://www.yisu.com/zixun/obj.data数据; 　　开关(obj.event) { 　　案例'select”: 　　$ (' # dname ') .val (data.dname); 　　layer.close (layer.index); 　　打破; 　　} 　　} 　　　　

<强> 3。后台代码实现略

以上这篇layui当点击文本框时弹出选择框,显示选择内容的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。