最近项目需要一个基于树形结构的多选下拉列表的功能,,网上搜了搜也没发现有啥好的,,,一生气决定自己搞一个。。。。。。
首先,树形的结构是用的zTree,,所以项目需要引入ztree的相关脚本,下图是这个插件的目录结构
下图是引入的相关脚本和样式:
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="<%=request.getContextPath() %>/assets/iesSelectTree/ztree/jquery.ztree.all.min.js"></script> <script type="text/javascript" src="<%=request.getContextPath() %>/assets/iesSelectTree/iesselect.js"></script> <link href="<%=request.getContextPath() %>/assets/iesSelectTree/ztree/zTreeStyle.css" rel="stylesheet" /> <link href="<%=request.getContextPath() %>/assets/iesSelectTree/iesselect.css" rel="stylesheet" />
Jquery是必须要引入的。。。。
以下代码,是例子的代码。。。。
使用步骤如下:
1、先定义一个div,,指定ID
<div id="test"></div>
2、定义数据源,按照zTree的格式,增加value属性对应原生select的value
var data = [ { name: '树形结构展示名称', value: '原生select类似的value', children: [{}]//子内容 } ]
3、项目的使用方式,第一个参数是jquery的对象,第二个参数是数据源,第三个参数表示是否多选
var test = new iesSelectTree($("#test"), data, true);
4、获取数据的方式
var data = ddd.getValue(); //获取value属性 var name = data.getName(); //获取name属性
5、多选的例子:
6、单选的例子(单选不该用这个,原生的就满足了,,。。。哈哈哈):
该项目的测试代码如下:
<SCRIPT LANGUAGE="JavaScript"> // zTree 的数据属性,深入使用请参考 API 文档(zTreeNode 节点数据详解) var zNodes = [ { name:"test1", value: '1', children:[ { name:"test1_1", value: "1-19" }, { name:"test1_2", value: "1-20" } ] }, { name:"test2", children:[ { name:"test2_1" }, { name:"test2_2" } ] } ]; var zNodes1 = [ {name:"test1", open:true, children:[ {name:"test1_1"}, {name:"test1_2"}]}, {name:"test2", open:true, children:[ {name:"test2_1"}, {name:"test2_2"}]} ]; var ddd; $(document).ready(function(){ ddd = new iesSelectTree($("#test"), zNodes, true); var d = new iesSelectTree($("#test1"), zNodes1, false); // iesSelectTree.initSelectTree($("#test"), zNodes); }); function getData(){ alert(ddd.getValue()); } </SCRIPT> </HEAD> <BODY> <div> <input type="button" value="点击" onclick="getData()"/> <div id="test"></div> <div id="test1"></div> <br> <div>测试</div> </div>
相关推荐
需求: vue-cli项目树形控件:一级节点为本地节点,默认展开一级节点,增删改后局部刷新数据。 增加节点,点击确定后局部刷新,渲染新数据。 源码 element组件样式 <el-tree class="treeitems" :data="data...
实际上,el-tree-transfer 依赖的 element-ui 组件分别是Checkbox 多选框,Button 按钮,和最主要的Tree 树形控件写成!并非是在 element-ui 的穿梭框组件上的扩展,而仅仅是参照了其外观样式和功能。
将文件直接复制到layui/lay/modules目录下,会覆盖layui原有的tree.js,调用方法与layui树形组件的适应方式一致,新增的方法可在文件中查看
layui-tree是layui提供的树形管理,可以用于后台做权限列表的使用,只需要后台整理好数据给前台展示,勾选之后提交给后台即可。
基于XFP-tree的XML结构重构策略,刘波,杨路明,基于海量XML文档资源组织与查询速度不能满足日益增长的信息关联和服务请求多样性的需求,提出了一个重构XML结构的频繁向量选择增量
树形组件:支持selected选中状态(单/多),checkbox选择框,拖拽功能,增、删、改功能,双击展开、箭头展开收起功能,全部展开、收起功能,自定义图标、按钮、辅助信息等。
对DBSCAN算法的改进,使用R-Tree算法对DBSCAN的改进
基于KD-Tree实现的近似查询处理AQP问题python源码(课程大作业).zip基于KD-Tree实现的近似查询处理AQP问题python源码(课程大作业).zip基于KD-Tree实现的近似查询处理AQP问题python源码(课程大作业).zip基于KD-Tree...
最近用到了el-tree控件,主要是数据的格式,按照官网的数据格式来就可以显示节点的树形结构了。 代码参考很多 这里给出一个比较好的链接:https://www.jb51.net/article/181990.htm 代码说明在注释里写的很详细...
实验经济学专用软件z-Tree说明书,由瑞士开发
el-tree-fransfer是一个基于VUE和element-ui的树形穿梭框组件,使用前请确认已经发布 !此组件功能组件element-ui的组件,但是里面的数据是树形结构!,, el-tree-transfer依赖的element-ui组件分别是, ,和最主要...
DirectoryTree插件-jquery树形滑动导航
菜单树形结构,支持三级、多级树形结构代码,纯手写代码,简单易懂,适合各个阶段试用,支持jquery调用。
在element-ui中的el-tree上实现单独拉出一棵树来显示树的选中节点,同时可以在该树上删除已选中节点
修改iview-ui tree树结构前面得小三角。可以使用ui库自带的icon图标,也可以自己根据项目 需求添加背景图片。 并且包括点击当前的父级节点文字,展开/隐藏 子级菜单,同时背景高亮显示 下载后,直接npm install 就...
树状结构插件 z-tree 功能强大, 便于操作树状结构插件 z-tree 功能强大, 便于操作树状结构插件 z-tree 功能强大, 便于操作树状结构插件 z-tree 功能强大, 便于操作
实现树的下拉效果,和ExtJs的treecombox大同小异。
树结构的Vue组件。 支持添加treenode / leafnode,编辑节点名称并拖动。 安装 安装插件,然后您就可以全局使用该组件了。 import Vue from 'vue' import VueTreeList from 'vue-tree-list' Vue . use ( VueTreeList...
此插件是基于elementUI开发的下拉树组件 目前不支持单选,暂只支持多选 安装 npm i ele-tree-select -S 使用 在 main.js 中引入 import EleTreeSelect from 'ele-tree-select' import 'ele-tree-select/lib/ele-tree-...