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


Posted in Javascript onSeptember 02, 2019

实现如图所示的功能

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

实现步骤:

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

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实现

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中 的数据是通过 ajax 请求从后台获取。

 // part 3: 让 layui 为页面的元素绑定事件处理函数
 table.on('tool(department_result)', department_tool_event_handler); // 为页面上的table上的tool绑定事件处理函数
 
 // part 4: 为输入框绑定光标聚焦事件的触发该函数,
 $('#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)、客户点击时弹出弹层

// “客户”输入框的光标聚焦事件的触发函数, 弹出弹层,弹层上显示所有的客户,以供选择。
function depart_input_focus_handler() {
 layer.open({
 type : 1
 , area : [ '600px', '450px' ]
 , content : $('#hidden1')
 , success : function () {
 // 重新加载表格中的数据
 table.reload('department_result', department_result_table_options);
 $('#hidden1').css('display', 'block');
 }
 });
}

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

//点击弹出的“客户信息”弹层上的表格中“选中”按钮的触发函数
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.后台代码实现略

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

Javascript 相关文章推荐
解析arp病毒背后利用的Javascript技术附解密方法
Aug 06 Javascript
javascript基础第一章 JavaScript与用户端
Jul 22 Javascript
浅析Node在构建超媒体API中的作用
Jul 30 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
Vue项目自动转换 px 为 rem的实现方法
Oct 29 Javascript
layui下拉框获取下拉值(select)的例子
Sep 10 Javascript
js实现图片跟随鼠标移动效果
Oct 16 Javascript
jQuery弹框插件使用方法详解
May 26 jQuery
JavaScript中window和document用法详解
Jul 28 Javascript
PHP读取远程txt文档到数组并实现遍历
Aug 25 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
Vue内部渲染视图的方法
Sep 02 #Javascript
一步一步实现Vue的响应式(对象观测)
Sep 02 #Javascript
Layui多选只有最后一个值的解决方法
Sep 02 #Javascript
解决layui checkbox 提交多个值的问题
Sep 02 #Javascript
LayUI动态设置checkbox不显示的解决方法
Sep 02 #Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 #Javascript
layui 选择列表,打勾,点击确定返回数据的例子
Sep 02 #Javascript
You might like
Linux系统递归生成目录中文件的md5的方法
2015/06/29 PHP
php验证手机号码
2015/11/11 PHP
理解PHP中的Session及对Session有效期的控制
2016/01/08 PHP
PHP+ajax实现二级联动菜单功能示例
2018/08/10 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
解析JavaScript中的不可见数据类型
2013/12/02 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
javascript获取select值的方法分析
2015/07/02 Javascript
Jquery时间轴特效(三种不同类型)
2015/11/02 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
2016/01/25 Javascript
实例详解ECMAScript5中新增的Array方法
2016/04/05 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
2016/08/15 Javascript
javascript self对象使用详解
2016/10/18 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
vue移动端实现下拉刷新
2018/04/22 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
2019/08/27 Javascript
vue中使用element组件时事件想要传递其他参数的问题
2019/09/18 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
Python3写入文件常用方法实例分析
2015/05/22 Python
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
深入理解Python中的super()方法
2017/11/20 Python
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
2014年大学生自我评价
2014/01/19 职场文书
家长对孩子评语
2014/01/30 职场文书
社会实践活动总结
2015/02/05 职场文书
幼师辞职信范文
2015/02/27 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书
高考百日冲刺决心书
2015/09/23 职场文书
学习型家庭事迹材料(2016精选版)
2016/02/29 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书
Matplotlib绘制条形图的方法你知道吗
2022/03/21 Python
Nginx的gzip相关介绍
2022/05/11 Servers
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis