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 相关文章推荐
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
Nov 22 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
Feb 04 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
Oct 26 Javascript
JavaScript操作URL的相关内容集锦
Oct 29 Javascript
浅谈JavaScript对象的创建方式
Jun 13 Javascript
微信小程序 教程之条件渲染
Oct 18 Javascript
微信小程序 教程之模板
Oct 18 Javascript
AngularJS之页面跳转Route实例代码
Mar 10 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
Jul 24 Javascript
详解node单线程实现高并发原理与node异步I/O
Sep 21 Javascript
详解使用uni-app开发微信小程序之登录模块
May 09 Javascript
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 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做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
php中将指针移动到数据集初始位置的实现代码[mysql_data_seek]
2012/11/01 PHP
php ajax异步读取rss文档数据
2016/03/29 PHP
javascript IFrame 强制刷新代码
2009/07/23 Javascript
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
node.js中的fs.lstat方法使用说明
2014/12/16 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
2017/05/14 Javascript
Vue项目中引入外部文件的方法(css、js、less)
2017/07/24 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
2017/08/23 Javascript
vue项目中添加单元测试的方法
2018/07/21 Javascript
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
深入了解JavaScript 防抖和节流
2019/09/12 Javascript
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
js数组中去除重复值的几种方法
2020/08/03 Javascript
JavaScript实现简单验证码
2020/08/24 Javascript
python使用7z解压apk包的方法
2015/04/18 Python
Python实现队列的方法
2015/05/26 Python
matplotlib.pyplot画图 图片的二进制流的获取方法
2018/05/24 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
解决PyCharm不运行脚本,而是运行单元测试的问题
2019/01/17 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
自定义实现 PyQt5 下拉复选框 ComboCheckBox的完整代码
2020/03/30 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
Django中使用Json返回数据的实现方法
2020/06/03 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
2016/11/21 HTML / CSS
美国购买新书和二手书网站:Better World Books
2018/10/31 全球购物
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
DNA基因检测和分析:23andMe
2019/05/01 全球购物
幼教求职信
2014/03/12 职场文书
化学教育专业自荐信
2014/07/04 职场文书
教师个人事迹材料
2014/12/17 职场文书
2015年维修工作总结
2015/04/25 职场文书
公司地址变更通知
2015/04/25 职场文书