【zTree】将zTree节点前的展开收起图标（加减号）改为三角形图标 |
您所在的位置：网站首页 › 前箭头后图片 › 【zTree】将zTree节点前的展开收起图标（加减号）改为三角形图标 |
【zTree】将zTree节点前的展开收起图标（加减号）改为三角形图标
|
zTree是jQuery 树插件，官网地址。
新需求：把树节点前的加减号图标，改为三角形图标；去掉图标；去掉连接线；
修改前与修改后对比 参考地址：http://www.treejs.cn/v3/demo.php#_103 按照官网文档在setting里配置就行，代码如下： var setting = { view: { selectedMulti: false, addDiyDom: addDiyDom, // 自定义显示节点 showIcon:false, // 不显示图标,文件夹图标等 showLine:false // 不显示连接线 }, simpleData: { enable: true }, async: { enable: true, url:url, autoParam:["id", "name=n", "level=lv"], otherParam:{"otherParam":"zTreeAsyncTest"}, dataFilter: filter // 数据处理 }, callback: { onClick: nodeClick, // 节点点击事件（可对不同级别的节点做不同的点击处理） onAsyncSuccess: zTreeOnAsyncSuccess // 获取接口数据后的回调函数，在此函数里设置全部展开 } }; // 以下代码是方便以后查资料 zTree = $.fn.zTree.init($("#treeDemo"), setting); function zTreeOnAsyncSuccess() { var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); treeObj.expandAll(true); } // 树节点自定义 function addDiyDom(treeId, treeNode) { var spanObj = $("#" + treeNode.tId + "_span"); //每个li结点下添加div if (treeNode.NODE_ISACC === 1) { var descStr = treeNode.desc ? '（'+treeNode.desc+'）' : ''; if(treeNode.desc == '未上传'){ spanObj.append(''+ descStr +''); }else{ spanObj.append(''+ descStr +''); } } } // 树节点点击事件 function nodeClick(event, treeId, treeNode, clickFlag) { console.log('nodeClick',treeNode) if (treeNode.level == 3) { // 最后一级的点击事件 $('#treeDemo').css('display', 'none'); sessionStorage.setItem("projectId", treeNode.id) } else { addSubNode(treeNode); } } function addSubNode(treeNode) { // console.log('addSubNode',treeNode.id); var s = treeNode.children; if (s != undefined) return; if(treeNode.level == 2){ // 获取最后一级 $.ajax({ cache: true, type: "POST", url: url, data: {projectId: treeNode.id}, async: true, success: function (data) { var childNodes = []; data = JSON.parse(data) $.each(data.obj, function (index, item) { childNodes.push({"id": item.id, "pId": index + index, "name": item.name,"NODE_ISACC":1,"desc":item.desc}) }) zTree.addNodes(treeNode, childNodes); }, error: function (data) { alert("error"); } }); } } 将展开收起图标（加减号）改为三角形有个博客是用伪元素显示三角形图标的，大家也可以试试。 在查看加减号图标代码时发现，加减号图标实际上是取图片的特定位置显示，如下图所示： 
/* 树--三角形 start 2019-12-16 */
.ztree li span.button.noline_open {
background-image: url("img/tree_open.png");
background-position: center;
}
.ztree li span.button.noline_close {
background-image: url("img/tree_close.png");
background-position: center;
}
/* 显示叶子节点的收起三角形图标 */
.ztree span.button.level2.noline_docu {
background-image: url("img/tree_close.png");
background-position: center;
background-repeat: no-repeat;
}
/* 树--三角形 end */
若有filter函数的话，需要将icon置空
function filter(treeId, parentNode, childNodes) {
if (!childNodes) return null;
childNodes.obj.forEach(function (item) {
item.parentId?item.level = 2:item.level = 1;
item.icon = '';
item.iconClose = '';
item.iconOpen = '';
})
return childNodes.obj;
}
对收起三角形图标绑定点击事件
项目里用到的树是：（1）异步加载数据，并且完全展开到倒数第二级；（2）在点击倒数第二级时再异步加载对应数据。 也就是说，对于树控件来说，第一次异步加载的数据中倒数第二级就是树的叶子节点，而叶子节点是没有展开收起图标的。虽然用样式给了叶子节点一个收起三角形图标，但却是假的，点击后没有任何效果。只有点击叶子节点名称，在点击事件nodeClick里异步加载好数据后，用zTree.addNodes(treeNode, childNodes);添加到叶子节点上。 所以，在这里需要对叶子节点前的收起三角形图标绑定点击事件。 // 树图标点击 $("body").on("click", ".button.level2.switch.noline_docu", function (el) { // console.log(el,$(el.currentTarget).next().click()); $(el.currentTarget).next().click() return false });这样就能过测试那关啦 |
那么我们只需要覆盖样式，放上自己的图片就行了。【本文地址】
今日新闻 |
推荐新闻 |