ztree要使用自定义图标字体的时候 需要自己做皮肤cssstyle,官方有文档,但是有些时候我们值需要简单的设置图标字体class样式 是没办法使用的,我们需要对两个函数进行修改。

下面是两个函数请自己看注释

expandCollapseNode是节点折叠展开的函数
            expandCollapseNode: function (setting, node, expandFlag, animateFlag, callback) {
var root = data.getRoot(setting),
childKey = setting.data.key.children;
var tmpCb, _callback;
if (!node) {
tools.apply(callback, []);
return;
}
if (root.expandTriggerFlag) {
_callback = callback;
tmpCb = function () {
if (_callback) _callback();
if (node.open) {
setting.treeObj.trigger(consts.event.EXPAND, [setting.treeId, node]);
} else {
setting.treeObj.trigger(consts.event.COLLAPSE, [setting.treeId, node]);
}
};
callback = tmpCb;
root.expandTriggerFlag = false;
}
if (!node.open && node.isParent && ((!$$(node, consts.id.UL, setting).get(0)) || (node[childKey] && node[childKey].length > 0 && !$$(node[childKey][0], setting).get(0)))) {
view.appendParentULDom(setting, node);
view.createNodeCallback(setting);
}
if (node.open == expandFlag) {
tools.apply(callback, []);
return;
}
var ulObj = $$(node, consts.id.UL, setting),
switchObj = $$(node, consts.id.SWITCH, setting),
icoObj = $$(node, consts.id.ICON, setting); if (node.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);//这里替换的是 span的class 进去自行修改
if (animateFlag == false || setting.view.expandSpeed == "") {
ulObj.show();
tools.apply(callback, []);
} else {
if (node[childKey] && node[childKey].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);//这里替换的是 span的class 进去自行修改
if (animateFlag == false || setting.view.expandSpeed == "" || !(node[childKey] && node[childKey].length > 0)) {
ulObj.hide();
tools.apply(callback, []);
} else {
ulObj.slideUp(setting.view.expandSpeed, callback);
}
}
} else {
tools.apply(callback, []);
}
}

MakNodeIcoClass是加载节点生成class的函数  如果这里像我这里修改 需要把 expandCollapseNode函数的两行代码注视掉:view.replaceIcoClass(node, icoObj, consts.folder.CLOSE)

            //makeNodeIcoClass 负责加载节点的时候生成class
//我根据自己需求改了一下,注视掉的代码 都是原始代码
makeNodeIcoClass: function (setting, node) {
var icoCss = ["ico"];
if (!node.isAjaxing) {
icoCss[0] = (node.iconSkin ? node.iconSkin /*+ "_" */: "");// + icoCss[0];
if (node.isParent) {
//icoCss.push(node.open ? consts.folder.OPEN : icoCss.join('_')/*consts.folder.CLOSE*/);
} else {
//icoCss.push(consts.folder.DOCU);
}
}
return /*consts.className.BUTTON + " " +*/ icoCss.join('_');
}

通过上面的修改以后,我们只需要 给出 iconSkin 就可以了,iconClose 和 iconOpen 如果按照我这种改法是没办法使用的。 需要再进一步修改。

[{"id":10,"name":"test","pId":0,"iconSkin":"fa fa-link","url":"/system/Category/Details/10","iconOpen":null,"iconClose":null}]

不需要注视上面提到的两行代码,需要修改replaceIcoClass函数如下,

            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:
tmpList[tmpList.length - 1] = node.iconOpen;
break;
case consts.folder.CLOSE:
tmpList[tmpList.length - 1] = node.iconClose;
break;
case consts.folder.DOCU:
//tmpList[tmpList.length-1] = newName;
tmpList[tmpList.length - 1] = node.iconSkin;
break;
}
//obj.attr("class", tmpList[tmpList.length - 1]);
obj.attr("class", tmpList.join("_"));
}

上面的改法都是根据个人需求而定,我这个是在学习 洞庭夕照(传送门)大神的教学系列修改的。

ztree使用font-awesome字体的问题,的更多相关文章

  1. Font Awesome字体图标

    1.什么是字体图标字体图标是一个包含许多图标的字体库.可以理解为一种特殊的字体,只不过里面包含的都是图标. 2.Font Awesome图标字体库Font Awesome是目前最受欢迎最全面的图标字体 ...

  2. C#使用Font Awesome字体

    这个类是一个开源类,我做了一些功能优化1.如果没有安装Font Awesome字体,可能需要直接去exe路径下使用对应名称字体.2.可以直接返回\uFxxx类型字体,方便winform按钮使用,不然的 ...

  3. Awesome图标 | 如何在某些编辑软件中使用Font Awesome字体图标

    文章目录 Font Awesome 字体图标 在某些编辑软件中使用 Font Awesome 字体图标 Font Awesome 为您提供可缩放矢量图标,它可以被定制大小.颜色.阴影以及任何可以用 C ...

  4. Font Awesome 字体使用方法, 兼容ie7+

    WebFont 技术可以让网页使用在线字体,而无需使用图片,从而有机会解决开头设计师提到的问题.它通过 CSS 的@font-face语句引入在线字体,使用 CSS 选择器指定运用字体的文本,与此同时 ...

  5. (22)bootstrap 初识 + Font Awesome(字体图标库)

    bootstrap作用就是简化布局 bootstrap是基于JQ的,所以内部代码使用的是jq语法 所以要使用bs,必须先倒入 1.head标签内倒入bs的css文件  <link rel=&qu ...

  6. 在nuxt中引入Font Awesome字体图标库

    介绍 在element-ui框架中提供了一些图标样式,但是种类比较少,所以在这里提供一套更完善的字体图标库Font Awesome(官方文档),下面就开始介绍如何在一个nuxt项目中使用这套字体库. ...

  7. css常用样式font控制字体的多种变换

    CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母)font-family控制字体,由于各个电脑系统安装的字体不尽相同,但是基本装有黑体.宋体与微软雅黑这三款字体,通 ...

  8. javascript入门 之 ztree(五 自定义字体)

    <!--<!DOCTYPE html>--> <!--<HTML>--> <!--<HEAD>--> <!--<TI ...

  9. CSS3使用Font Awesome字体图标的控件样例(按钮,工具栏,输入框)

    按钮上加入font awesome图标,用原生的input button标签无法实现,查看网上的只能通过<a><li></li></a>实现此功能,通过 ...

  10. LaTex Font Size 字体大小命令

    LaTex中字体大小有很多中等级,分别由下列命令控制: \tiny \scriptsize \footnotesize \small \normalsize \large \Large \LARGE ...

随机推荐

  1. FSharp 调用 Oracle.ManagedDataAccess.dll

    FSharp 调用 Oracle.ManagedDataAccess.dll 1.Oracle.ManagedDataAccess.dll 的下载地址.好像如今必需要注冊才干下载. 即使是 64 位系 ...

  2. REST设计规则

    1.简介 REST(Representational State Transfer), 表述性状态转移是Roy Fielding博士在2000年他的博士论文中提出来的一种软件架构风格. REST只是一 ...

  3. 接触HTML和CSS心得体会

    1.HTML 它负责网页的三个要素之中的结构: HTML使用标签的形式来标识网页中的不同组成部分 <!DOCTYPE html> <html> <head> < ...

  4. python实现斐波那契数列(Fibonacci sequence)

    使用Python实现斐波那契数列(Fibonacci sequence) 斐波那契数列形如 1,1,2,3,5,8,13,等等.也就是说,下一个值是序列中前两个值之和.写一个函数,给定N,返回第N个斐 ...

  5. VMware 虚拟机 Ubuntu 登录后蓝屏问题

    问题起因 在一次下班收工时关闭虚拟机 Ubuntu,出现异常:关机好久没有完成,进而导致 VMware 软件卡死.后来强行杀死 VMware.第二天上班,启动 VMware 后开启 Ubuntu,输入 ...

  6. 字符设备 Vs. 块设备 Character Device Vs. Block Device

    字符设备是指驱动发送/接受单个字符(例如字节)的设备. 块设备是指驱动发送/接受整块数据(例如512个字节为一个块)的设备. 常见的字符设备:串口,并口,声卡. 常见的块设备:硬盘(最小读取单位为扇区 ...

  7. python爬虫入门学习

    近期写的一个爬虫的Demo,只是简单的用了几个函数.实现了简单的爬取网页的功能(以途牛为例). import urllib2 import re import urlparse import robo ...

  8. 使用node的fs读取文件

    啊啊啊啊啊啊啊啊啊啊啊啊啊啊,被node的fs坑了一下午,我又爬上来了,要坚强的笑着活下去,嗯,没毛病老铁. let http = require('http'); let fs = require( ...

  9. iOS 轻松实现自定义TabBar

    自定义TabBar的案例网上不少,昨天受到开发小伙伴的影响,尝试了一下非大神的取巧思路:Demo 1.创建RootViewController,后面创建几个继承的VC,将这几个VC添加到TabBarC ...

  10. windows server 2008 R2服务器安装IIS并添加网站

    一.连接远程计算机 1.因为我的电脑是win7系统,故这里以win7为例,其他windows系统大同小异,首先点开开始菜单栏,在windows附件下找到远程桌面连接 或者采用通用的方法,利用快捷键wi ...