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操作select下拉列表框的代码
Jun 04 Javascript
javascript 图片裁剪技巧解读
Nov 15 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
May 04 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
学习javascript的闭包,原型,和匿名函数之旅
Oct 18 Javascript
深入学习js瀑布流布局
Oct 14 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
详解angular部署到iis出现404解决方案
Aug 14 Javascript
Vue动态修改网页标题的方法及遇到问题
Jun 09 Javascript
微信小程序实现时间进度条功能
Nov 17 Javascript
js实现ajax的用户简单登入功能
Jun 18 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
ThinkPHP之用户注册登录留言完整实例
2014/07/22 PHP
php中执行系统命令的方法
2015/03/21 PHP
快速解决PHP调用Word组件DCOM权限的问题
2017/12/27 PHP
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
javascript中的遍历for in 以及with的用法
2014/12/22 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
DOM 事件的深入浅出(二)
2016/12/05 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
2017/04/17 jQuery
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
JavaScript实现一个简易的计算器实例代码
2018/05/10 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
JavaScript实现单图片上传并预览功能
2019/09/30 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
python中sleep函数用法实例分析
2015/04/29 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
使用Python实现画一个中国地图
2019/11/23 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
面向游戏玩家和书呆子的极客订阅盒:Loot Crate
2020/11/25 全球购物
密封类可以有虚函数吗
2014/08/11 面试题
给排水专业应届生求职信
2013/10/12 职场文书
公务员政审个人鉴定
2014/02/25 职场文书
财务工作疏忽检讨书
2014/09/11 职场文书
支教个人总结
2015/03/04 职场文书
CSS实现背景图片全屏铺满自适应的3种方式
2022/07/07 HTML / CSS
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS
Vue router配置与使用分析讲解
2022/12/24 Vue.js