项目介绍


项目中需要用到下拉树多选功能,找到两个相关组件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://zyl0151_admin.gitee.io/ztreeselectm/
码云下载
https://gitee.com/zyl0151_admin/zTreeSelectM

layui扩展组件,下拉树多选的更多相关文章

  1. WPF 组织机构下拉树多选,递归绑定方式现实

    使用HierarchicalDataTemplate递归绑定现实 XAML代码: <UserControl x:Class="SunCreate.CombatPlatform.Clie ...

  2. elementUI下拉树组件封装

    使用组件:Popover 弹出框.Tree 树形控件 和 input 输入框 用法: 1.新建一个.vue文件,粘贴以下组件封装的代码(完全可以使用) 2.在页面需要使用下拉树的地方调用即可. (1) ...

  3. vue-Treeselect实现组织机构(员工)下拉树的功能

    知识点:前端使用vuetree的组件库,调用后台查询组织机构,包括人员的接口 实现下拉树的功能 查考: vue-treeselect官网:https://vue-treeselect.js.org/ ...

  4. vue+element下拉树选择器

    项目需求:输入框点击弹出树形下拉结构,可多选或者单选. 解决方案:1.使用layui formSelect多选插件 2.基于vue+elementui 下拉框和树形控件组合成树形下拉结构 <el ...

  5. EasyUI-combotree 下拉树 数据回显时默认选中

    组合树(combotree)把选择控件和下拉树结合起来.它与组合框(combobox)相似,不同的是把列表替换成树组件.组合树(combotree)支持带有用于多选的树状态复选框的树. 依赖 comb ...

  6. Layui:select下拉框回显

    一..需求场景分析 基于Thymeleaf模板下的layui下选框回显. 二.获得一个Layui标配的下拉框,我们需要在html中填写的内容如下 <div class="layui-f ...

  7. zTree开发下拉树

    最近,因为工作需要一个树形下拉框的组件,经过查资料一般有两种的实现方法.其一,就是使用zTree实现:其二,就是使用easyUI实现.因为公司的前端不是使用easyUI设计的,故这里我选择了zTree ...

  8. 开源框架.netCore DncZeus学习(五)下拉树的实现

    千里之行,始于足下,先从一个小功能研究起,在菜单管理页面有一个下拉树,先研究下它怎么实现的 1.先找到menu.vue页面 惯性思维先搜索请选择三个字,原来是动态生成的 再向上找DropDown组件, ...

  9. Extjs下拉树代码测试总结

    http://blog.csdn.net/kunoy/article/details/8067801 首先主要代码源自网络,对那些无私的奉献者表示感谢! 笔者对这些代码做了二次修改,并总结如下: Ex ...

随机推荐

  1. 百度下载给的termux是个坑

    termux有两个版本,0.32以及0.64.百度提供0.32的下载,太坑爹.谷歌则是0.64的下载.32版uname -m识别为armv8l,绝对影响你进行其它linux的部署.通过atilo脚本会 ...

  2. 前端页面传来数组,后台用对象集合list接收数据的写法

    //保存页面显示应用$("#save").click(function(){ var data = [{"applicationtypeid":"65 ...

  3. Curl elasticsearch

    1. 查看cluster state curl localhost:9200/_cluster/health?pretty Or curl localhost:9200/_cluster/health ...

  4. Redis 的底层数据结构(对象)

    目前为止,我们介绍了 redis 中非常典型的五种数据结构,从 SDS 到 压缩列表,这都是 redis 最底层.最常用的数据结构,相信你也掌握的不错. 但 redis 实际存储键值对的时候,是基于对 ...

  5. 一篇文章搞定Python多进程(全)

    1.Python多进程模块 Python中的多进程是通过multiprocessing包来实现的,和多线程的threading.Thread差不多,它可以利用multiprocessing.Proce ...

  6. 2019-11-6:ubuntu安装配置JAVA环境

    1,下载JAVA,官方java 18下载网站:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-21331 ...

  7. 一图读懂Spring Core,Spring MVC, Spring Boot,Spring Cloud 的关系与区别

    Spring框架自诞生到现在,历经多次革新,形成了多种不同的产品,分别应用于不同的项目中,为了帮助自己理解这些产品之间的关系,特此整理此图,以便自己记忆和复习.

  8. selenium webdriver学习--------iframe的处理

    有时候我们在定位一个页面元素的时候发现一直定位不了,反复检查自己写的定位器没有任何问题,代 码也没有任何问题.这时你就要看一下这个页面元素是否在一个iframe中,这可能就是找不到的原因之一.如果你在 ...

  9. 在IOS中实现新浪微博OAuth认证

    主要讲解在ios中的认证流程,至于如何得到新浪用户授权账号,地址,这些可以见视频0506. 1.用UIWebView访问新浪授权页面https://api.weibo.com/oauth2/autho ...

  10. Gitlab用户信息批量导出

    前言 因运维体系中涉及到用户权限管理及统计,需将Gitlab用户数据提取出来并录入到公司内部自建的权限统计平台. 本文将对Gitlab的用户信息数据批量导出进行操作说明! 思路 A)要对数据进行批量的 ...