使用数据字典layui搜索框三联动
时间:2019-04-12
本文章向大家介绍使用数据字典layui搜索框三联动,主要包括使用数据字典layui搜索框三联动使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
/** * 自定义的搜索初始化插件 * 说明: * 给需要异步加载数据字典的加上自定义属性jq-search="qu" * qu为数据字典对应的key * 如果需要级联查询的则加上自定义属性lay-filter, * 如果没有下一级或者子集则不需要加 * 三联动第一个lay-filter设成1,第三个设成3,代码中有判定 * echo用于放入回显的key */ var Dictionary = { init : function() {// 入口 this.initData(); }, initData : function(){//初始化数据 $(".layui-form select[jq-search]").each(function(){ //同步加载 $.ajaxSettings.async = false; param = {}; param.key = $(this).attr("jq-search"); Dictionary.ajaxDic(param,$(this)); }); }, bindEvent : function(value,id){//绑定数据 param = {}; param.key = value; Dictionary.ajaxDic(param,$("#"+id+"")); }, ajaxDic : function(param,$this){ //$.ajaxSettings.async = false; $.post(path+"/manage/dictionary/search",param,function(data){ $this.empty(); $this.append("<option value=''>请输入或选择</option>"); for(var i=0;i < data.length;i++){ if($this.attr("echo")==data[i].key){ $this.append("<option value='"+data[i].key+"' selected>"+data[i].value+"</option>"); }else{ $this.append("<option value='"+data[i].key+"'>"+data[i].value+"</option>"); } } }); if(typeof($this.attr("lay-filter"))!="undefined"){ Dictionary.bindLayui($this.attr("lay-filter"),$this.parent().next().children("select").attr("id")); } }, bindLayui:function(region,id){ layui.use(['form'],function(){ layui.form.on("select("+region+")", function(data){ if(data.value!=""){ if(region == '1'){ $("select[lay-filter=3]").empty(); } if(region != '3'){ Dictionary.bindEvent(data.value,id); layui.form.render('select'); $("#"+id+"").next().find('dd.layui-this').trigger('click'); } } }) /*if($("#"+region+"").val()!=""){ $("#"+region+"").next().find('dd.layui-this').trigger('click'); }else{ $("#"+id+"").val("") }*/ }) } /*modifyEcho:function(){ $(".layui-form select[echo]").each(function(){ if($(this).attr("echo")!=""){ $(this).next().find("input").val($(this).attr("echo")); } }); }*/ } $(function() { Dictionary.init(); });
前端页面
<div class='fl mr20'> 区域:<div class="layui-inline"> <select name="category" id="parentArea" class="layui-input" lay-search jq-search="qu" lay-filter="1"> </select> </div> <div class="layui-inline"> <select name="type" class="layui-input" id="area" lay-search jq-cascade lay-filter="2"> </select> </div> <div class="layui-inline"> <select name="type" class="layui-input" id="committee" lay-search lay-filter="3"> </select> </div> </div>
直接引入js即可,加入相应需要的自定义属性
写的不是很好,较为繁琐,有时间再去修改
- XCode日常使用备忘录
- .net中close和dispose及关闭流操作
- Linux文件管理相关命令
- 实现滑动分页(微博分页方式)
- 腾讯汇赢正式上线,变革2018大连房地产市场营销
- Windows下程序启动时出现0xc000007b错误的解决方案
- 外媒报道:CBM.com、NMA.com等域名齐交易
- ObjectDataSource与GridView配合使用经验总结系列一:数据绑定
- ObjectDataSource与GridView配合使用经验总结系列二:分页
- 网页优化系列二:使用Cache缓存静态文件、图片(asp.net版)
- Linux用户与“最小权限”原则
- WPF一步一脚印系列(1):万事起头难
- 自定义迭代器使用foreach
- 理解cookie的path和domain属性
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- .NETCore中实现ObjectId反解
- GSE16561数据集的文章图表复现,小众的illumina表达量芯片
- 数据挖掘课程能带给你什么收获
- AkShare-股票数据-龙虎榜-机构席位成交明细
- AkShare-股票数据-龙虎榜-机构席位追踪
- AkShare-股票数据-龙虎榜-营业上榜统计
- AkShare-股票数据-龙虎榜-个股上榜统计
- React中路由的使用
- CyanX 基于ReactHook的状态管理器,遵循函数式编程的理念,极简、可扩展设计哲学上手
- Serverless 架构下如何实现日志的实时输出?
- typescript基础篇(1):helloworld
- typescript基础篇(2):数据类型
- 22款好用的CLI工具
- typescript基础篇(3):接口
- 2020 年,苹果的 AI 还有创新吗?