| 修改 Ztree 节点的图标 ( icon 与 iconSkin) | 您所在的位置：网站首页 › ztree复选框部分显示 › 修改 Ztree 节点的图标 ( icon 与 iconSkin) |
修改 Ztree 节点的图标 ( icon 与 iconSkin)
|
1.使用 icon
. 首先 进入 Ztree 官网 查看 Api ： http://www.treejs.cn/v3/api.php
你可以下载官网上的ztree压缩包，在里面有 自定义图标的实例代码： 或进入这个地址下载：https://download.csdn.net/download/qq_25221835/10628278
首先使用静态数据来更改节点图标： var zNodes =[ { id:1, pid:0, name:"展开、折叠 自定义图标不同",open:true}, { id:11, pid:1, name:"叶子节点1", icon:"${ctxStatic}/jquery- ztree/3.5.12/css/zTreeStyle/img/diy/2.png"}, { id:12, pid:1, name:"叶子节点2", icon:"${ctxStatic}/jquery-ztree/3.5.12/css/zTreeStyle/img/diy/9.png"}, { id:13, pid:1, name:"叶子节点3", icon:"${ctxStatic}/images/hospital.png"}, { id:2, pid:0, name:"展开、折叠 自定义图标相同", open:true}, { id:21, pid:2, name:"叶子节点1"}, { id:22, pid:2, name:"叶子节点2"}, { id:23, pid:2, name:"叶子节点3"} ];叶子节点3使用的是自己项目中的图片，你不可以将图片放入ztree的文件中，否则无法加载出来 核心就是 icon；" " 效果图：
使用动态数据更改图标： 要注意在对应的实体类中 ：添加 icon 的字段，并设置 get /set 方法 实体类： private boolean isParent; private String id; private String pid; private String icon; public boolean getIsParent() { return isParent; } public void setIsParent(boolean isParent) { this.isParent = isParent; } public String getIcon() { return icon; } public void setIcon(String icon) { this.icon = icon; }controller： for(int i=0;i .ztree li span.button.pIcon01_ico_open{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/1_open.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle} .ztree li span.button.pIcon01_ico_close{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/1_close.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle} .ztree li span.button.icon01_ico_docu{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/3.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle} Custom Icon - iconSkin [ File Path: core/custom_iconSkin.html ]看实例代码就知道，iconSkin 的值 xxxxx 就对应着 button.xxxxx._____ ，所以我们只要给某节点 设置 iconSkin，然后在对应的button设置那个 iconSkin的值就行 下面看我的代码： 实体类： private boolean isParent; private String id; private String pid; private String iconSkin; public String getIconSkin() { return iconSkin; } public void setIconSkin(String iconSkin) { this.iconSkin = iconSkin; }mybatis文件 SELECT ORG_NAME as "orgName", ORG_CODE as "orgCode", AREA_CODE as "pid", ORG_NAME as "name", 'hospital' as "iconSkin" FROM TB_ORGANIZATION where AREA_CODE = #{id} order by AREA_CODE'hospital' as "iconSkin" ， 我在查询时，顺便将 iconSkin 的值设为 hospital
jsp页面 地区机构绑定 var setting = { data : { simpleData : { enable : true, idKey : "id", pIdKey : "pid", } }, callback : { onClick : zTreeOnclick } }; $(document).ready(function() { initZTree(); }); function initZTree() { $.ajax({ url : "${ctx}/datavalid/dataSource/areaOrgData", type : "post", dataType : "json", success : function(data) { $.fn.zTree.init($("#ztree"), setting, data); }, error : function() { } }); } function zTreeOnclick(event, treeId, treeNode) { if (treeNode.orgName != null) { window.parent.document.getElementById("orgName").value = "" + treeNode.orgName; window.parent.document.getElementById("orgCode").value = "" + treeNode.orgCode; //关闭此页面 var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); } }; .ztree li span.button.hospital_ico_docu{margin-right:2px; background: url(${ctxStatic}/images/hospital.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}和icon的方法只是 加了个 .ztree li span.button.hospital_ico_docu{margin-right:2px; background: url(${ctxStatic}/images/hospital.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle} 效果和icon 完全一样：
icon 与 iconSkin的比较： 我说说我的理解，不知道是否正确。 我认为用 iconSkin 开发起来更加容易进行维护，耦合性更低 从我上述的代码也知道，我在使用icon的时候，使用绝对路径去设置Icon的值， 而使用iconSkin，仅仅只设置 了一个名称，获取图片的任务交给了Jsp， 这样在维护的时候，可以不用去寻找、修改的后台代码，只需找到对应的jsp页面修改 我个人推荐使用iconSkin
|
【本文地址】