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. Cocos2d-x3.0 触摸事件

    TouchableSpriteTest auto winSize = Director::getInstance()->getWinSize(); Point origin = Director ...

  2. html5视频标签

    <video width="200" height="200" poster="img/shamo.jpg" src="vi ...

  3. 深入理解javascript函数进阶系列第四篇——惰性函数

    前面的话 惰性函数表示函数执行的分支只会在函数第一次调用的时候执行,在第一次调用过程中,该函数会被覆盖为另一个按照合适方式执行的函数,这样任何对原函数的调用就不用再经过执行的分支了.本文将详细介绍惰性 ...

  4. JAVA入门[2]-安装Maven

    一.资料 1.官网: https://maven.apache.org/ 二.下载Maven 下载地址:https://maven.apache.org/download.cgi# 三.Windows ...

  5. 跨平台应用集成(在ASP.NET Core MVC 应用程序中集成 Microsoft Graph)

    作者:陈希章 发表于 2017年6月25日 谈一谈.NET 的跨平台 终于要写到这一篇了.跨平台的支持可以说是 Office 365 平台在设计伊始就考虑的目标.我在前面的文章已经提到过了,Micro ...

  6. redis缓存的安装和配置

    ubantu16.04环境下安装 下载安装,依次执行命令; # 从官方网站下载安装包,注意,当前在哪个目录下执行命令,下载的包将在哪个目录下 $ wget http://download.redis. ...

  7. springmvc返回json字符串中文乱码问题

    问题: 后台代码如下: @RequestMapping("menuTreeAjax") @ResponseBody /** * 根据parentMenuId获取菜单的树结构 * @ ...

  8. Elasticsearch布尔查询——bool

    布尔查询允许我们利用布尔逻辑将较小的查询组合成较大的查询. 1.查询返回包含"mill"和"lane"的所有的账户 curl -XPOST 'localhost ...

  9. IntelliJ Idea 2017 注册码 免费激活方法

    1. 到网站 http://idea.lanyus.com/ 获取注册码. 2.弹窗中选择最后一个页面license server,填入下面一种链接即可: http://idea.iteblog.co ...

  10. AsyncLocal的运作机制和陷阱

    这是今天帮柠檬分析一个AsyncLocal相关的问题时发现的. 试想这个代码输出的值是多少? using System; using System.Threading; using System.Th ...