TreeView的图标个性化和动态数据加载

1、简述

如图，需要在页面上实现一个这样的树状图，具体要求如下：

1、最顶层的行的收缩图标为绿色小三角，其余层存在子节点的行的收缩图标为一个朝右的尖括号和一个绿色小三角，无子节点      的行无需图标；

2、点击小三角时，能收缩或展开节点；

3、点击文字所在行（除小三角所在区域）的任何区域能够响应点击事件，且不影响节点收缩状态；

4、每行有全屏的分割线；

5、点击某一行时，该行背景色变成浅灰色，其余行背景色不变；

基于以上的需求，我选用了TreeView插件，通过更改部分源码，实现了一定个性化，且完全满足上述需求。

2、TreeView基本分析

1、正常的TreeView树状图如下图，整体是一个嵌套的无序列表，然后通过TreeView进行样式和事件控制来实现该效果。

2、通过查看TreeView的源码可以看到，每一行实际上是由一个通过JS生成的class为hitarea的div和一个span构成，hitarea为折

      叠图标区域，span主要放置每一行显示的文本，而类似文件夹的图标事实上是span的背景图片，然后通过把更改背景图片的

      位置，实现图标显示在文字前方。

3、页面需求的实现

1、三角小图标是通过更改hitarea的样式实现，这个可以百度如何使用div+css实现三角形；

2、尖括号是通过代码<font style="font-weight:bold;float:left;margin-top:5px;" color="#1ea22a">></font>实现，而该段代码要添加

      到TreeView中用JS创建hitarea代码中，如下图

3、上述两步会使所有有子节点的行都存在“尖括号+小三角”，因此还需在所有行创建完后，通过JS删除所有顶行的尖括号，而

       所有顶行的标识可以通过设置专门的id来区分，如folderTop。删除尖括号的JS代码如下

4、点击小三角收缩节点的功能，由于我采用的是用hitarea实现的小三角形，因此节点收缩功能，可以直接默认Treeview的原有

      代码

5、Treeview默认点击文字或文字所在行任意区域，都会折叠或打开节点，要想去掉该效果，需要更改Treeview的JS源码，去掉

      文字的事件响应。代码如下图

6、没一行全屏分割线的实现，需要运用点小技巧，一般人会想到，直接显示span的底框线。如果这样写，你会看到，有的行的

      线不会布满整行。因此可以通过margin-right和padding-right的结合，可以实现底框线右移，但是文字还是保持原来的位置不

      变，代码如下

7、实现点击某一行，背景变灰，其余行不变。可以通过设置全局变量，保存上一次点击的行，然后每次将当前行背景色改变成

      灰色前，恢复上一次点击行的背景色，代码如下，（注意corpSearch函数是在TreeView的文字点击事件中调用的）

4、总结

通过这个界面的编写，让自己对TreeView的理解进一步加深。思想无边界，代码无疆！（附上源码如下）

一共三个文件：treeview.html、jquery.treeview.js、jquery.treeview.css；将其放在同一目录下，即可运行！

https://code.csdn.net/snippets/1975805

整体效果图如下：

转载地址：http://blog.csdn.net/qq_28088659/article/details/53091033