ZTree自定义icon

最新推荐文章于 2024-07-14 03:35:34 发布

scx_white

最新推荐文章于 2024-07-14 03:35:34 发布

阅读量7.7k

点赞数 3

分类专栏：【java】 java 文章标签： ztree ztree修改样式 ztree自定义icon

本文链接：https://blog.csdn.net/su20145104009/article/details/80656910

版权

java 同时被 2 个专栏收录

147 篇文章 35 订阅

订阅专栏

【java】

110 篇文章 6 订阅

订阅专栏

在写一个界面，用到了ZTree插件。
我的目录分类有：大目录，小目录和文件。默认的ZTree并不满足我的需求，就需要一些定制化的开发。

增加变量

在jquery.ztree.core.js文件里有一个变量组，分别表示打开的文件夹，关闭的文件夹，文件。

    _consts = {
            ...
            folder: {
                OPEN: "open",
                CLOSE: "close",
                DOCU: "docu"
            },
            ...
        },

在我的项目里默认：

_consts.folder.OPEN 大目录打开状态
_consts.folder.CLOSE 大目录关闭状态
_consts.folder.DOCU 文件

为了满足我的需求，所以我在项目里添加了小目录的状态，添加后的代码如下：

 _consts = {
            ...
            folder: {
                OPEN: "open",
                CLOSE: "close",
                DOCU: "docu",
                OPEN2: "open2",
                CLOSE2: "close2"
            },
            ...
        },

其中

_consts.folder.OPEN2 小目录打开状态
_consts.folder.CLOSE2 小目录关闭状态

修改节点状态

只修改了这些，仅仅是添加了状态变量。
然后就是根据节点类型来选择不同的状态。
还是在jquery.ztree.core.js，expandCollapseNode方法里面有这些代码

       expandCollapseNode: function (setting, node, expandFlag, animateFlag, callback) {
		        ...
		        //如果是目录
			   if (isParent) {
				    //更新节点的打开状态
                    node.open = !node.open;
                    if (node.iconOpen && node.iconClose) {
                        icoObj.attr("style", view.makeNodeIcoStyle(setting, node));
                    }
					//如果当前节点的状态为打开
                    if (node.open) {
                        view.replaceSwitchClass(node, switchObj, consts.folder.OPEN);
                        view.replaceIcoClass(node, icoObj, consts.folder.OPEN);
                        if (animateFlag == false || setting.view.expandSpeed == "") {
                            ulObj.show();
                            tools.apply(callback, []);
                        } else {
                            if (children && children.length > 0) {
                                ulObj.slideDown(setting.view.expandSpeed, callback);
                            } else {
                                ulObj.show();
                                tools.apply(callback, []);
                            }
                        }
                    } else { //如果当前的节点状态为关闭
                        view.replaceSwitchClass(node, switchObj, consts.folder.CLOSE);
                        view.replaceIcoClass(node, icoObj, consts.folder.CLOSE);
                        if (animateFlag == false || setting.view.expandSpeed == "" || !(children && children.length > 0)) {
                            ulObj.hide();
                            tools.apply(callback, []);
                        } else {
                            ulObj.slideUp(setting.view.expandSpeed, callback);
                        }
                    }
                } else {
                    tools.apply(callback, []);
                }
            },

这些代码会对当前操作的节点的样式进行重绘。代码的大致意思：

IF 当前节点为目录 THEN
 	IF 目录为打开状态 THEN
		重绘该节节为打开样式;
	ELSE
		重绘该节点为关闭样式;
	END IF	
END IF

所以我需要在这里添加我的小目录的样式

        expandCollapseNode: function (setting, node, expandFlag, animateFlag, callback) {
		         ...
				  if (isParent) {
                    node.open = !node.open;
                    if (node.iconOpen && node.iconClose) {
                        icoObj.attr("style", view.makeNodeIcoStyle(setting, node));
                    }
                    //判断当前目录类型 0：大目录  1：小目录
                    var dir = node.directory;
                    if (node.open) {
					  //如果是小目录 替换为小目录的打开状态
                        if (dir == 1) {
                            view.replaceSwitchClass(node, switchObj, consts.folder.OPEN2);
                            view.replaceIcoClass(node, icoObj, consts.folder.OPEN2);
                        } else {
                            view.replaceSwitchClass(node, switchObj, consts.folder.OPEN);
                            view.replaceIcoClass(node, icoObj, consts.folder.OPEN);
                        }

                        if (animateFlag == false || setting.view.expandSpeed == "") {
                            ulObj.show();
                            tools.apply(callback, []);
                        } else {
                            if (children && children.length > 0) {
                                ulObj.slideDown(setting.view.expandSpeed, callback);
                            } else {
                                ulObj.show();
                                tools.apply(callback, []);
                            }
                        }
                    } else {
                        //如果是小目录 替换为小目录的关闭状态
                        if (dir == 1) {
                            view.replaceSwitchClass(node, switchObj, consts.folder.CLOSE2);
                            view.replaceIcoClass(node, icoObj, consts.folder.CLOSE2);
                        } else {
                            view.replaceSwitchClass(node, switchObj, consts.folder.CLOSE);
                            view.replaceIcoClass(node, icoObj, consts.folder.CLOSE);
                        }


                        if (animateFlag == false || setting.view.expandSpeed == "" || !(children && children.length > 0)) {
                            ulObj.hide();
                            tools.apply(callback, []);
                        } else {
                            ulObj.slideUp(setting.view.expandSpeed, callback);
                        }
                    }
                } else {
                    tools.apply(callback, []);
                }
            },

然后就是在replaceSwitchClass 和replaceIcoClass 方法里加上我们的两个小目录状态

 replaceSwitchClass: function (node, obj, newName) {
                if (!obj) return;
                var tmpName = obj.attr("class");
                if (tmpName == undefined) return;
                var tmpList = tmpName.split("_");
                switch (newName) {
                    case consts.line.ROOT:
                    case consts.line.ROOTS:
                    case consts.line.CENTER:
                    case consts.line.BOTTOM:
                    case consts.line.NOLINE:
                        tmpList[0] = view.makeNodeLineClassEx(node) + newName;
                        break;
                    case consts.folder.OPEN:
                    case consts.folder.CLOSE:
                    case consts.folder.DOCU:
                    //小目录打开状态
                    case consts.folder.OPEN2:
                     //小目录关闭状态
                    case consts.folder.CLOSE2:
                        tmpList[1] = newName;
                        break;
                }

            replaceIcoClass: function (node, obj, newName) {
                if (!obj || node.isAjaxing) return;
                var tmpName = obj.attr("class");
                if (tmpName == undefined) return;
                var tmpList = tmpName.split("_");
                switch (newName) {
                    case consts.folder.OPEN:
                      //小目录打开状态
                    case consts.folder.OPEN2:
                      //小目录关闭状态
                    case consts.folder.CLOSE2:
                    case consts.folder.CLOSE:
                    case consts.folder.DOCU:
                        tmpList[tmpList.length - 1] = newName;
                        break;
                }
                obj.attr("class", tmpList.join("_"));
            },

更新节点的样式

做到这一步，已经完成了99%。最后一步就是修改css。准备好自己的背景图片，好像必须要求16x16的图片，大家自己尝试哈。
在zTreeStyle.css文件中，修改原本的大目录css背景，添加自己的小目录背景

//大目录打开样式
.ztree li span.button.ico_open{margin-right:2px; background:url("./img/folder_open.png") no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
//小目录打开样式
.ztree li span.button.ico_open2{margin-right:2px; background:url("./img/notepad_2.png") no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
//文件样式
.ztree li span.button.ico_docu{margin-right:2px; background:url("./img/leaf.svg") no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
//大目录关闭样式
.ztree li span.button.ico_close{margin-right:2px; background:url("./img/folder.png") no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
//小目录关闭样式
.ztree li span.button.ico_close2{margin-right:2px; background:url("./img/notepad.png") no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}

这个时候仅仅是替换完成了目录的样式，节点左侧的开关按钮css样式也要加上

.ztree li span.button.noline_open2{background-position:-92px -72px}
.ztree li span.button.noline_close2{background-position:-74px -72px}

最后展示效果如图所示：
这里写图片描述

提示：修改后的节点目录名称不能带"_"符号，否则会导致样式失败。原因在replaceIcoClass和replaceSwitchClass 方法里，有好奇心的同学请自己查看。

scx_white

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
5
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录