当我们在使用ztree树组件的节点编辑功能时,只要我们引入了ztree相关节点编辑的js脚本文件:
<script type="text/javascript" src=”/js/jquery.ztree.exedit-3.5.js"></script>
接着配置setting内的edit节点:
var setting = {
edit: {
enable: true,
showRenameBtn: true,
showRemoveBtn: true
},
当我们ztree树加载完成后,我们将鼠标移动至每一个树节点上,节点后面均会显示两个图标,一个“删除节点”图标,一个是“编辑节点”图标。点击后可以进行节点的编辑和删除操作。
这样虽然很完美,但是还不够完美,如果我们针对某些节点不需要不需要进行节点的编辑或者删除操作,换言之就是某些节点不让其显示操作的图标。怎么办呢?
很显然,ztree树控件对于这一点上做得还不是很够,但是它已经给我们留了很大的扩展空间。
解决方案如下:
1、给节点扩展两个属性:noRemoveBtn和noEditBtn,分别设置为true表示均不显示操作图标。当然这里配置是第一步,还有第二步的哦。
示例代码如下:
var zNodes = [
{ id: 1, pId: 0, name: "父节点 1", open: true, noRemoveBtn: true, noEditBtn: true },
{ id: 11, pId: 1, name: "叶子节点 1-1",noRemoveBtn: false,noEditBtn:true },
{ id: 12, pId: 1, name: "叶子节点 1-2" },
{ id: 13, pId: 1, name: "叶子节点 1-3" }
];
2、我们将setting内的edit节点下的showRenameBtn、showRemoveBtn两个属性就行修改,变成一个方法来返回是否显示图标,形如:
edit: {
enable: true,
showRenameBtn: showRenameBtn
},
3、编写showRenameBtn(treeId,treeNode)方法,这里以是否显示节点编辑图标为例:
//是否显示编辑按钮
function showRenameBtn(treeId, treeNode) {
//获取节点所配置的noEditBtn属性值
if (treeNode.noEditBtn != undefined && treeNode.noEditBtn) {
return false;
} else
return true;
}
刷新我们的页面,然后就可以看到第一二个节点当我们鼠标移动上去的时候后面图标的显示情况。
补充:
1、showRenameBtn(treeId,treeNode)方法的执行或者触发是当我们鼠标移动至某个节点上时触发或者执行的,所以我们能够很清楚地知道节点的对象,接着判断其属性值情况。
作者: 王春天· 关于作者: 大连天翼信息科技有限公司 技术总监。 SNF快速开发平台 创始人。应用平台架构师、IT规划咨询专家、业务流程设计专家。 专注于快速开发平台的开发、代码生成器。同时专注于微软平台项目架构、管理和企业解决方案,多年项目开发与管理经验,精通DotNet系列技术Vue、.NetCore、MVC、Webapi、C#、WinForm等,DB(SqlServer、Oracle等)技术,移动端开发。熟悉Java、VB及PB开发语言。在面向对象、面向服务以及数据库领域有一定的造诣。现从事项目实施、开发、架构等工作。并从事用友软件产品U8、U9、PLM 客开工作。 如有问题或建议,请多多赐教! 本文版权归作者·,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,如有问题,可以通过邮箱或QQ 联系我,非常感谢。

















