layui扩展组件,下拉树多选
项目中需要用到下拉树多选功能,找到两个相关组件moretop-layui-select-ext和wujiawei0926-treeselect,但是moretop-layui-select-ext不支持树结构,wujiawei0926-treeselect不支持多选,于是干脆仿照moretop-layui-select-ext动手写了一个组件,选择zTree而没有选择layuiTree的主要原因是layuiTree暂不支持父子关系取消。
var _zTreeSelectM = zTreeSelectM({
elem: '#zTreeSelectM',//元素容器【必填】
data: './json/1.json',//候选数据【必填】
width: 600, //设置了长度
selected: [3,6,29],//默认值
max: 3,//最多选中个数,默认5
name: 'field',//input的name 不设置与选择器相同(去#.)
delimiter: ',',//值的分隔符
field: { idName: 'id', titleName: 'name' },//候选项数据的键名
zTreeSetting: { //zTree设置
check: {
enable: true,
chkboxType: { "Y": "", "N": "" }
},
data: {
simpleData: {
enable: false
},
key: {
name: 'name',
children: 'children'
}
}
}
});
form.on('submit(demo)',function(data){
console.log('zTreeSelectM 当前选中的值名:',_zTreeSelectM.selected);
console.log('zTreeSelectM 当前选中的值:',_zTreeSelectM.values);
console.log('zTreeSelectM 当前选中的名:',_zTreeSelectM.names); var formData = data.field;
console.log('表单对象:',formData);
return false;
}) //监听重置按钮
$('form').find(':reset').click(function(){
$('form')[0].reset();
_zTreeSelectM.set();//默认值
return false;
});
$("#set").on('click',function(e){
_zTreeSelectM.set([4,7,13]);
return false;
})

https://gitee.com/zyl0151_admin/zTreeSelectM
layui扩展组件,下拉树多选的更多相关文章
- WPF 组织机构下拉树多选,递归绑定方式现实
使用HierarchicalDataTemplate递归绑定现实 XAML代码: <UserControl x:Class="SunCreate.CombatPlatform.Clie ...
- elementUI下拉树组件封装
使用组件:Popover 弹出框.Tree 树形控件 和 input 输入框 用法: 1.新建一个.vue文件,粘贴以下组件封装的代码(完全可以使用) 2.在页面需要使用下拉树的地方调用即可. (1) ...
- vue-Treeselect实现组织机构(员工)下拉树的功能
知识点:前端使用vuetree的组件库,调用后台查询组织机构,包括人员的接口 实现下拉树的功能 查考: vue-treeselect官网:https://vue-treeselect.js.org/ ...
- vue+element下拉树选择器
项目需求:输入框点击弹出树形下拉结构,可多选或者单选. 解决方案:1.使用layui formSelect多选插件 2.基于vue+elementui 下拉框和树形控件组合成树形下拉结构 <el ...
- EasyUI-combotree 下拉树 数据回显时默认选中
组合树(combotree)把选择控件和下拉树结合起来.它与组合框(combobox)相似,不同的是把列表替换成树组件.组合树(combotree)支持带有用于多选的树状态复选框的树. 依赖 comb ...
- Layui:select下拉框回显
一..需求场景分析 基于Thymeleaf模板下的layui下选框回显. 二.获得一个Layui标配的下拉框,我们需要在html中填写的内容如下 <div class="layui-f ...
- zTree开发下拉树
最近,因为工作需要一个树形下拉框的组件,经过查资料一般有两种的实现方法.其一,就是使用zTree实现:其二,就是使用easyUI实现.因为公司的前端不是使用easyUI设计的,故这里我选择了zTree ...
- 开源框架.netCore DncZeus学习(五)下拉树的实现
千里之行,始于足下,先从一个小功能研究起,在菜单管理页面有一个下拉树,先研究下它怎么实现的 1.先找到menu.vue页面 惯性思维先搜索请选择三个字,原来是动态生成的 再向上找DropDown组件, ...
- Extjs下拉树代码测试总结
http://blog.csdn.net/kunoy/article/details/8067801 首先主要代码源自网络,对那些无私的奉献者表示感谢! 笔者对这些代码做了二次修改,并总结如下: Ex ...
随机推荐
- 百度下载给的termux是个坑
termux有两个版本,0.32以及0.64.百度提供0.32的下载,太坑爹.谷歌则是0.64的下载.32版uname -m识别为armv8l,绝对影响你进行其它linux的部署.通过atilo脚本会 ...
- 前端页面传来数组,后台用对象集合list接收数据的写法
//保存页面显示应用$("#save").click(function(){ var data = [{"applicationtypeid":"65 ...
- Curl elasticsearch
1. 查看cluster state curl localhost:9200/_cluster/health?pretty Or curl localhost:9200/_cluster/health ...
- Redis 的底层数据结构(对象)
目前为止,我们介绍了 redis 中非常典型的五种数据结构,从 SDS 到 压缩列表,这都是 redis 最底层.最常用的数据结构,相信你也掌握的不错. 但 redis 实际存储键值对的时候,是基于对 ...
- 一篇文章搞定Python多进程(全)
1.Python多进程模块 Python中的多进程是通过multiprocessing包来实现的,和多线程的threading.Thread差不多,它可以利用multiprocessing.Proce ...
- 2019-11-6:ubuntu安装配置JAVA环境
1,下载JAVA,官方java 18下载网站:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-21331 ...
- 一图读懂Spring Core,Spring MVC, Spring Boot,Spring Cloud 的关系与区别
Spring框架自诞生到现在,历经多次革新,形成了多种不同的产品,分别应用于不同的项目中,为了帮助自己理解这些产品之间的关系,特此整理此图,以便自己记忆和复习.
- selenium webdriver学习--------iframe的处理
有时候我们在定位一个页面元素的时候发现一直定位不了,反复检查自己写的定位器没有任何问题,代 码也没有任何问题.这时你就要看一下这个页面元素是否在一个iframe中,这可能就是找不到的原因之一.如果你在 ...
- 在IOS中实现新浪微博OAuth认证
主要讲解在ios中的认证流程,至于如何得到新浪用户授权账号,地址,这些可以见视频0506. 1.用UIWebView访问新浪授权页面https://api.weibo.com/oauth2/autho ...
- Gitlab用户信息批量导出
前言 因运维体系中涉及到用户权限管理及统计,需将Gitlab用户数据提取出来并录入到公司内部自建的权限统计平台. 本文将对Gitlab的用户信息数据批量导出进行操作说明! 思路 A)要对数据进行批量的 ...