ZTree自定义icon

自定义icon"/>

ZTree自定义icon

在写一个界面，用到了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 当前节点为目录 THENIF 目录为打开状态 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 方法里，有好奇心的同学请自己查看。