在做项目的时候遇到选择部门下人员的功能,可多选可单选,所以就想着使用树状列表来进行选择,但在网上找了很多,发现要么就是挺复杂,要么就是需要各种前端框架的支持,试了一个感觉难用,所以就想着自己写一个简便的树状列表,后期再遇到类似问题的时候可以作为工具使用,将它写成了插件,推荐给大家来使用。

  该树状列表是基于jquery来写的,没有使用任何前端框架,只需要支持jquery的页面就可以使用。

  首先我们来看一下该插件的目录结构:

  

  包含一个css样式表文件夹,一个js文件夹,一个demo示例文件,一个img图片文件夹,在css文件夹里面包含一个核心样式文件:alvintree.css,在js文件夹包含一个核心js文件:alvintree.js,在img文件夹里面包含两个图标:分别是打开关闭的图标(可自己替换)。demo.html是一个示例文件,可在浏览器中打开该文件看一下功能示例。

  该插件的功能效果如下:

  (1)树状列表单选功能

    显示数据,数据里面可包含无限极节点:

    

    如果选中其中某一项,取选中项的值:

    

  (2)树状列表多选功能

  显示数据,数据里面可包含无限极节点,多选前面加了一个复选框:

  

  如果选中其中某些项,取选中项的值:

  

  还可以设置某些项选中:

  

  以上就是该插件大体能够实现的功能,功能比较简单但比较实用,样式比较简单不复杂,当然因为没有美工的帮助,本插件的样子就比较朴素了,下面我们具体来看一下,如何在我们自己的页面使用该插件:

  1.将该插件文件夹放到我们自己的项目目录下。

  2.在需要使用的页面引入三个核心文件:

  jquery文件、alvintree.js文件、alvintree.css文件,例如:

<script src="./js/jquery-1.11.2.min.js"></script>
<script src="./js/alvintree.js"></script>
<link href="./css/alvintree.css" rel="stylesheet" type="text/css" />

  3.在页面需要显示树状列表的位置,添加一个DIV元素,给一个ID:

<div id="alvintree" style="width:300px"></div>

  4.在页面的js里面来加载树状列表数据显示:(李昌辉)

  (1)该插件需要的数据格式,json数据,关键的三个key:name代表要显示的名字,tag代表标识的值(一般是数据的主键值),item代表它的子集数据;该json数据可以使用ajax调取处理页面获取,因为该插件是可以支持无限极树状列表的,所以数据格式可能比较复杂一些,可在处理页面通过递归的方式组合好。

var jsondata = [
{
"name":"一级节点一", //显示的名字
"tag":"1", //主键值
"item":[ //子集元素
{
"name":"二级节点一",
"tag":"21",
"item":[
{
"name":"三级节点一",
"tag":"31",
"item":[
]
},
{
"name":"三级节点二",
"tag":"32",
"item":[
]
}
]
},
{
"name":"二级节点二",
"tag":"22",
"item":[
]
}
]
},
{
"name":"一级节点二",
"tag":"2",
"item":[
]
},
{
"name":"一级节点三",
"tag":"3",
"item":[
]
},
];

  (2)显示单选树状列表,外层容器的ID即对应上面我们在页面里面放的DIV的ID:

var tree = new AlvinTree({
data:jsondata, //需要显示的数据
container:"alvintree", //外层容器的ID
ishidden:true //是否默认隐藏子集
});

  (3)单选树状列表取选中项的值,需调用方法getvalue()即可获取选中项的tag值:    

tree.getvalue();

  (4)如需使用多选树状列表,则使用如下代码,单选的为Alvintree,多选的为Alvintrees。

var trees = new AlvinTrees({
data:jsondata, //需要显示的数据
container:"alvintrees", //外层容器的ID
ishidden:true //是否默认隐藏子集
});

  (5)多选树状列表取选中项的值,需调用方法getvalues()来获取多个选中项的值,返回结果是多个值中间用逗号分隔的一个字符串:

   该方法包含一个参数,0代表取所有选中的,不分级别;1代表取选中项中的一级项;2代表取选中项中的二级项;依次类推。。。

trees.getvalues(0);

  (6)如需设置某些项默认选中,则需调用selected()方法来实现,该方法需要三个参数,后两个参数可写可不写。

   第一个参数代表要选中的主键值,是"1,2,3"这种形式的字符串;

   第二个参数代表选中之前是否要清除以前的选中状态,true代表清除,如不填第二个参数,默认为false;

   第三个参数代表想要让第几层的复选框选中,由于在数据库里面不同的表主键可能会重复,所以可使用第三个参数控制让第几层的选中,默认为0,0代表所有 1代表第一层 2代表第二层,依次类推。。。

var arr = [1,2,3];  //需要选中的主键值,多个用数组表示
trees.selected(arr); //设置选中

  以上即该插件的用法,功能相对来说比较少一些,但能够满足正常的使用,附上下载地址:

  https://pan.baidu.com/s/1sl9MrMl

  可以下载使用,如需其他功能可留言,有时间再增加额外功能。

jquery写的树状列表插件-alvintree的更多相关文章

  1. GTK+中的树状列表构件(GtkTreeView)

    GTK+中的树状列表构件(GtkTreeView) GTK+中的树状列表构件(GtkTreeView) 在本章的GTK+程序设计教程中,我们将向大家重点介绍非常常用也有点复杂的构件--GtkTreeV ...

  2. 用jQuery写了一个模态框插件

    用jQuery写了一个模态框插件 大家觉得下面的框框好看么, 水印可以去掉(这个任务交给你们了(- o -)~zZ); "info"框 $("div").con ...

  3. selenium如何操作页面树状列表

    selenium如何操作页面树状列表??举个例子:我要怎么操作如下图所示的树状结构列表?我要对这个树状结构列表做什么操作? 一.思路 1.根据driver.find_element_by_xpath( ...

  4. C#使用Jquery zTree实现树状结构显示_异步数据加载

    JQuery-Ztree下载地址:https://github.com/zTree/zTree_v3 JQuery-Ztree数结构演示页面:  http://www.treejs.cn/v3/dem ...

  5. jQuery 写的幻灯左右切换插件

    <html> <head> <meta charset="utf-8"> <title>官网</title> <s ...

  6. LigerUI 树状列表折叠显示

    http://blog.csdn.net/haojuntu/article/details/8626040 —————————————————————————————————————————————— ...

  7. Android中的树状(tree)列表

    树状列表前端挺常用的,还有人专门写过Ztree,Android中有的时候也需要使用到树状列表,上篇文章写了一下ExpandableListView,ExpandableListView最多支持两级结构 ...

  8. jquery-treegrid树状表格的使用(.Net平台)

    上一篇介绍了DataTable,这一篇在DT的基础之上再使用jquery的一款插件:treegrid,官网地址:http://maxazan.github.io/jquery-treegrid/ 一. ...

  9. 【BZOJ】1901: Zju2112 Dynamic Rankings(区间第k小+树状数组套主席树)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1901 首先还是吐槽时间,我在zoj交无限tle啊!!!!!!!!我一直以为是程序错了啊啊啊啊啊啊. ...

随机推荐

  1. 树的三种遍历方式(C语言实现)

    //************************************************************************* // [前序]遍历算法 //二叉树不空,先访问根 ...

  2. windows 系统下C++实现的多线程

    摘抄http://blog.csdn.net/huyiyang2010/article/details/5809919 Thread.h #ifndef __THREAD_H__ #define __ ...

  3. Hive简单安装

    数据库的创建 Hive1版本 在此之前要安装好JDK,HADOOP,下载解压Hive 在root下安装mysql:yum install mysql-server mysql-client //一般M ...

  4. js 作用域,作用域链,闭包

    什么是作用域? 作用域是一种规则,在代码编译阶段就确定了,规定了变量与函数的可被访问的范围.全局变量拥有全局作用域,局部变量则拥有局部作用域. js是一种没有块级作用域的语言(包括if.for等语句的 ...

  5. js input输入事件兼容性问题

    if(navigator.userAgent.indexOf('Android') > -1){ $("#sign").on("input", funct ...

  6. C++分布式实时应用框架 (Cpp Distributed Real-time Application Framework)----(一):整体介绍

    C++分布式实时应用框架 (Cpp Distributed Real-time Application Framework) 在现今软件系统纷纷"云化"的浪潮下,各种支持" ...

  7. 查看 docker 容器使用的资源

    在容器的使用过程中,如果能及时的掌握容器使用的系统资源,无论对开发还是运维工作都是非常有益的.幸运的是 docker 自己就提供了这样的命令:docker stats. 默认输出 docker sta ...

  8. Java 核心内容相关面试题【1】

    1.什么是 transient 变量? transient 变量是指不会被序列化的变量. 2.什么是同步(synchronization)? 在多线程环境中,同步是指控制多个线程访问共享资源的方式.没 ...

  9. [LeetCode] BFS解决的题目

    一.130  Surrounded Regions(https://leetcode.com/problems/surrounded-regions/description/) 题目: 解法: 这道题 ...

  10. c#控件攻略宝典之ListBox控件

    ListBox控件的使用: 1)控件属性 Items SelectedItems SelectioModes 2)数据绑定 DataSoure DisplayMember ValueMenber 3) ...