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 相关文章推荐
jquery提升性能最佳实践小结
Dec 06 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
Dec 11 Javascript
js控制当再次点击按钮时的间隔时间
Jun 03 Javascript
分享两款带遮罩的jQuery弹出框
Dec 30 Javascript
详解javascript事件冒泡
Jan 09 Javascript
ES6记录异步函数的执行时间详解
Aug 31 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
Dec 09 Javascript
axios学习教程全攻略
Mar 26 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
Postman内建变量常用方法实例解析
Jul 28 Javascript
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
PHP 图片上传实现代码 带详细注释
2010/04/29 PHP
PHP中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
一句话JavaScript表单验证代码
2009/08/02 Javascript
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
jQuery的层级查找方式分析
2016/06/16 Javascript
JavaScript随机生成颜色的方法
2016/10/15 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
关于JavaScript中forEach和each用法浅析
2017/07/27 Javascript
Bootstrap图片轮播效果详解
2017/10/17 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
2019/05/22 Javascript
nodejs log4js 使用详解
2019/05/31 NodeJs
js实现跟随鼠标移动的小球
2019/08/26 Javascript
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
Python实现读取文件最后n行的方法
2017/02/23 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
PIL图像处理模块paste方法简单使用详解
2019/07/17 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
Python configparser模块应用过程解析
2020/08/14 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
西班牙家用电器和电子产品购物网站:Mi Electro
2019/02/25 全球购物
应用心理学个人的求职信
2013/12/08 职场文书
材料物理专业个人求职信
2013/12/15 职场文书
硕士生工作推荐信
2014/03/07 职场文书
班长竞选演讲稿
2014/04/24 职场文书
中学生民族团结演讲稿
2014/08/27 职场文书
考试没考好检讨书(精选篇)
2014/11/16 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
2015重阳节座谈会主持词
2015/07/30 职场文书
详解SQL报错盲注
2022/07/23 SQL Server