分享到： QQ空间 新浪微博 腾讯微博 微信 人人网 更多
 

随笔分类 -  zTree

zTree树控件的使用
转：zTree树控件入门之checkbox：如何动态设置节点的checkbox选择框启用与禁用状态（chkDisabled)
摘要：当一棵树的部分节点根据登入用户角色不同而决定是否启用节点前的checkbox选择框的时候，我们应该如何做呢？也或者如何在页面加载的时候动态根据当前登入用户角色动态切换节点前的checkbox的禁用状态？ 针对上列一系列问题，今天这里将做一个统一的讲解： 关于节点前的checkbox选择框是否禁用，是通过属性chkDisabled来决定的，值为true则表示禁用；反之表示启用； 一、初始化设置节点禁用 示例代码如下所示： 阅读全文
posted @ 2014-11-21 15:01 王春天 阅读(7263) 评论(0) 推荐(0) 编辑
zTree变异篇：如何让同级树节点平铺而非垂直显示
摘要：昨天有一个zTree的使用者在实际的项目中有着这样一个特殊的需求，要求同级树节点能够水平显示，根据设定的宽度自动换行，效果图如下所示： 通过在浏览器调试模式下观察其同级节点的css为： li { display: list-item; text-align: -webkit-match-parent; } 这个display属性就注定了其节点都会像item一样垂直显示的。我们知道了这一点所以问题解决方案就出来了。 解决思路： 1、彻底修改zTree树所配备的zTreeStyle.css文件； 2、打开文件主要修改前第二、三行； 1）、需要给zTree设定一个固定宽度且能够支持超出宽度值自动换行，于是我们修改后的zTree类的样式为： .ztree { ... 阅读全文
posted @ 2014-11-21 14:49 王春天 阅读(3622) 评论(0) 推荐(0) 编辑
转：zTree树控件实战篇：针对多个下拉加载zTree树应该如何做出合理的配置
摘要：今天有一个zTree的朋友遇到一个非常棘手的问题，才研究zTree树控件两天就被上头催着看成果，很是苦恼。他面对的问题就是页面内多个地方需要下拉在其文本框下方加载zTree树，由于对zTree下拉加载树的一些关键配置以及原理的不太深入导致问题无从查起。今天就来一起聊聊这样一个下拉加载zTree的问题。 一、几个关键的配置需要注意 1、针对不同的下拉选择需要有自己独立控制zTree显示位置以及隐藏相应标签的方法； 2、需要根据所点击事件定位zTree的显示位置； 3、zTree树选择后需要加以判断是显示在哪一个对应的文本框内； 4、对于多个下拉需要加载不同zTree的情况我们需要创建多棵独立的zTree树且执行上面的1、2、3三个步骤。 二、针对对个下拉加载同一个zTree的情况 ... 阅读全文
posted @ 2014-11-21 14:46 王春天 阅读(2578) 评论(0) 推荐(0) 编辑
转：zTree高级入门：如何通过扩展节点的属性来达到是否显示节点的删除编辑等图标（按钮）
摘要：当我们在使用ztree树组件的节点编辑功能时，只要我们引入了ztree相关节点编辑的js脚本文件： 接着配置setting内的edit节点： var setting = { edit: { enable: true, showRenameBtn: true, showRemoveBtn: true }, 当我们ztree树加载完成后，我们将鼠标移动至每一个树节点上，节点... 阅读全文
posted @ 2014-11-21 14:43 王春天 阅读(3222) 评论(0) 推荐(0) 编辑
转：zTree树控件扩展篇：巧用zTree控件实现文本框输入关键词自动模糊查找zTree树节点实现模糊匹配下拉选择效果
摘要：是否可以借助于zTree实现文本框输入关键词自动模糊匹配zTree下拉树，然后选择下拉树内节点显示在文本框内且隐藏下拉树。 看到这个需求脑子里头大致已经想到了要如何实现这样一个需求，当时是限于时间问题所以没有动手处理。今天闲来无事琢磨了一下这个需求。我的解决思路如下所示： 1、监听文本框的onkeyup事件；实时传递其值到某个函数； 2、编写某个函数接收文本框的值通过zTree的模糊查找方法getNodesByParamFuzzy(key,value)获得； 3、将匹配到的节点列表结合重新赋值给zTree且显示在文本框下方； 4、通过zTree的onClick事件实现选中节点后将其节点名称显示在文本框内。 5、当关键词... 阅读全文
posted @ 2014-11-21 14:41 王春天 阅读(19025) 评论(1) 推荐(1) 编辑
转：zTree树控件key配置之title：zTree树节点名称过长如何省略显示且鼠标移入节点上能够显示全称
摘要：当树节点的名称有些很长时，全部显示出来显得很拥挤的情况下，我们会想到用省略节点名称来代替，当鼠标移入节点时能够显示该节点的全称。这样我们应该如何做呢？ 首先，我们要在树的节点内多增加一个属性用于设置该节点的全称，这里我们以title名称为例吧，示例代码如下所示： { id:233, pId:23, name:"叶子节点233...",title:"叶子节点23333434343434"}, { id:234, pId:23, name:"叶子节点...",title:"叶子节点打工撒干撒嘎斯"}, { id:3, pId:0, name:"父节点3 - 没有子节点",title:"卧槽", isParent:true} 其次需要设置setting内data旗下key的title关键属性对应的属性名称。 官方API内... 阅读全文
posted @ 2014-11-21 14:28 王春天 阅读(9634) 评论(0) 推荐(0) 编辑

云推荐
点击右上角即可分享
微信分享提示