使用zTree和json构建简单树节点

【使用zTree和json构建简单树节点】的更多相关文章

使用zTree和json构建简单树节点

我们经常碰到须要构建树结构展示的情况,我推荐使用zTree和JSON. 比如: <? php /** * * 使用zTree和json构建树节点 * */ $arr = array( 0=>array( 'id' => 1, 'pid' => 0, 'name' => 'china', 'son' => array( array( 'id' => 3, 'pid' => 1, 'name' => 'Beijing', ), array( 'id' =&…

【zTree】zTree展开树节点

今天在做zTree树的时候想着将第一级tree展开,于是利用下面方法: /** * 展开树节点的第一层 */ function openFirstTreenode(){ // 获取树对象 var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); /* 获取所有树节点 */ var nodes = treeObj.transformToArray(treeObj.getNodes()); //当再次点击节点时条件不符合,直接跳出方法 // 遍历树…

zTree根据json选中节点，并且设置其他节点不可选

首先,在适配目录树时,使用checkbox形式,配置代码如下: var settingCatalog = { check:{ enable: true }, data:{ simpleData:{ enable: true } } } 看下效果: 这时的每个节点都处于一个可选的状态(但都未选中),但在实际项目中我们可能还会遇到另外两种情况: 1.根据后台返回的json,选中指定节点(此时所有的节点仍处于可编辑的状态): 代码如下: var treeObj = $.fn.zTree.getZtre…

如何自定义修改ztree树节点的图标

1.此种情况是针对后对数据没有不好判断谁是父节点和子节点的问题 ztree默认的树节点,父子节点的图标不大好看,修改图片只需要在数据的地方添加icon的键,值就是图片的相对位置,但是问题就是需要区分是不是子节点的问题,因为后台也不好判断,所以自己想了一个办法,就是遍历一次后台的数据,创建一个对象,对象的键就是pid,值为true,在循环的时候,如果rowData[i]里面的id在这个对象里面没有的话,就说明是子节点,否则为父节点,代码如下 var obj={}; for(var i=0,len=…

【ztree】zTree取消树节点选中的背景色

点击树节点的时候是ztree给树加了个class: curSelectedNode 所以最简单的清除树节点的背景色的方法是移除其有背景色的class: $(".curSelectedNode").removeClass("curSelectedNode");…

zTree实现删除树节点

zTree实现删除树节点 1.实现源码 <!DOCTYPE html> <html> <head> <title>zTree实现基本树</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css…

zTree变异篇：如何让同级树节点平铺而非垂直显示

昨天有一个zTree的使用者在实际的项目中有着这样一个特殊的需求,要求同级树节点能够水平显示,根据设定的宽度自动换行,效果图如下所示: 通过在浏览器调试模式下观察其同级节点的css为: 这个display属性就注定了其节点都会像item一样垂直显示的.我们知道了这一点所以问题解决方案就出来了. 解决思路: 1.彻底修改zTree树所配备的zTreeStyle.css文件: 2.打开文件主要修改前第二.三行: 1).需要给zTree设定一个固定宽度且能够支持超出宽度值自动换行,于是我们修改后的…

转：zTree树控件扩展篇：巧用zTree控件实现文本框输入关键词自动模糊查找zTree树节点实现模糊匹配下拉选择效果

是否可以借助于zTree实现文本框输入关键词自动模糊匹配zTree下拉树,然后选择下拉树内节点显示在文本框内且隐藏下拉树. 看到这个需求脑子里头大致已经想到了要如何实现这样一个需求,当时是限于时间问题所以没有动手处理.今天闲来无事琢磨了一下这个需求.我的解决思路如下所示: 1.监听文本框的onkeyup事件:实时传递其值到某个函数: 2.编写某个函数接收文本框的值通过zTree的模糊查找方法getNodesByParamFuzzy(key,value)获得: 3.将匹配到的节点列表结合重新赋值给…

转：zTree树控件key配置之title：zTree树节点名称过长如何省略显示且鼠标移入节点上能够显示全称

当树节点的名称有些很长时,全部显示出来显得很拥挤的情况下,我们会想到用省略节点名称来代替,当鼠标移入节点时能够显示该节点的全称.这样我们应该如何做呢? 首先,我们要在树的节点内多增加一个属性用于设置该节点的全称,这里我们以title名称为例吧,示例代码如下所示: 1.{ id:233, pId:23, name:"叶子节点233...",title:"叶子节点23333434343434"}, 2.{ id:234, pId:23, name:"叶子节点.…

Ztree树节点应用

树节点增删改查: 前台jsp页面: <% String root=request.getContextPath();//获取项目目录 %> <SCRIPT type="text/javascript"> var setting = { async: { enable: true, url:"<%=root%>/book/cat/list.do", autoParam:["id", "name=n&qu…

【Lua】Lua + LWT + ExtJS构建目录树

Lua处理后台逻辑,Lua lwt搭建后台程序,ExtJS根据后台传来的json数据构建目录树. 前台html和ExtJS代码不用多讲,直接上代码: treePanel.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ExtJS TreePanel</title>…

从Chrome源码看浏览器如何构建DOM树

.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto } p { font-size: 15px; text-indent: 2em } #colorbox.crayon-colorbox,#cboxOverlay.crayon-colorbox,.crayon-colorbox #cboxWrapper { position: absolute; top: 0; left: 0; z-…

ztree实现表格风格的树状结构

zTree官方api: http://www.treejs.cn/v3/api.php 原理很简单:利用zTree的addDiyDom方法,自定义每个DOM节点,在原来的节点后面加一些div,再利用css样式使它看起来像个表格. 实现代码如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Demo by d…

Extjs整体加载树节点

Ext.onReady(function () { Ext.define('company', { extend: 'Ext.data.Model', fields: ['text'] }); var treeStore1 = Ext.create('Ext.data.TreeStore', { mode…

ExtJs 4.2 treePanel 点击树节点传送参数到后台（多个参数）

//***********************************************左边树开始*********************************************** //分组树Store var treeStore = Ext.create('Ext.data.TreeStore', { proxy: { type: 'ajax', url: "/Handler/StorePositionLayoutHandler.ashx?func=getbystores…

Extjs 树节点操作常用属性

tree: 树 node:节点 1.全部展开 tree.expandAll(); 2.全部收缩 tree.collapseAll(); 3.得到父节点 node.parentNode 4.判断是否有父节点 node.parentNode==null 5.判断是否有子节点 node.hasChildNodes() 6.获取下一级的所有子节点 node.eachChild(function(child){}) 7.获取选择的节点 tree.getSelectionModel().getS…

FP-growth算法发现频繁项集（一）——构建FP树

常见的挖掘频繁项集算法有两类,一类是Apriori算法,另一类是FP-growth.Apriori通过不断的构造候选集.筛选候选集挖掘出频繁项集,需要多次扫描原始数据,当原始数据较大时,磁盘I/O次数太多,效率比较低下.FPGrowth不同于Apriori的“试探”策略,算法只需扫描原始数据两遍,通过FP-tree数据结构对原始数据进行压缩,效率较高. FP代表频繁模式(Frequent Pattern) ,算法主要分为两个步骤:FP-tree构建.挖掘频繁项集. FP树表示法 FP树通过逐个读…

Qt实现表格树控件-自绘树节点虚线

目录一.开心一刻二.自绘树节点? 三.效果展示四.实现思路 1.可扩展接口 2.函数重写 3.同步左侧表头五.相关文章原文链接:Qt实现表格树控件-自绘树节点虚线一.开心一刻一程序员第一次上女朋友家她妈板着脸问 :你想娶我女儿,有多少存款? 程序员低了下头:五百! 她妈更鄙视了:才五百块,买个厕所都不够! 程序员忙说:不是人民币! 她妈:就算是美元,还是不够买厕所! 程序员:其实是比特币! 她妈:哇,贤婿,我给你买只大龙虾去二.自绘树节点? 自绘树节点?听起来都挺复杂的,可是为什…

Winform递归绑定树节点

/// <summary> /// 绑定树节点 /// </summary> /// <param name="pid"></param> /// <param name="treeNode"></param> public void Band_TreeView(int pid,TreeNode treeNode) { string json = tree_helper.Get("Ge…

Winfom递归绑定树节点

/// <summary> /// 绑定树节点 /// </summary> /// <param name="pid"></param> /// <param name="treeNode"></param> public void Band_TreeView(int pid,TreeNode treeNode) { string json = tree_helper.Get("Ge…

C#动态构建表达式树（三）——表达式的组合

C#动态构建表达式树(三)--表达式的组合前言在筛选数据的过程中,可能会有这样的情况:有一些查询条件是公共的,但是根据具体的传入参数可能需要再额外增加一个条件.对于这种问题一般有两种方法: a. 在 Where 后再组合一个 Where,如: List<SOME_CLASS> dataList = dataList.Where(FILTER_1).Where(FILTER_2).ToList(); b. 将类型相同两个表达式组合起来(就是本文的主题了) 由于项目中既有框架的封装,查询时只能…

C# 动态构建表达式树（一）—— 构建 Where 的 Lambda 表达式

C# 动态构建表达式树(一)-- 构建 Where 的 Lambda 表达式前言记得之前同事在做筛选功能的时候提出过一个问题:如果用户传入的条件数量不确定,条件的内容也不确定(大于.小于和等于),能否能够动态拼接成 Linq 后在数据库筛选,当时也没有好的思路.最近看的教程上提到了"动态构建表达式树",刚好可以解决此类问题. 准备工作环境:.NET Framework 4.5,SQLServer 2017 建表脚本如下(由 SSMS 导出): USE [default] GO /…

webpack工具学习构建简单vue项目（不依赖vue-cli） webpack4.0

目的用webpack构建简单前端项目 1.npm init (npm init -y) 形成package.json 2.npm install --save-dev webpack 形成 node_modules 3.项目路径dist--index.html src---index.js----test.less webpack.config.js 4.webpack.config.js配置 const path = require('path'); module.expor…

【C#表达式树五】工厂模式创建表达式树节点

常量 1.值常量 (p)=>100+88+p ParameterExpression par = Expression.Parameter(typeof(int), "p"); BinaryExpression binaryexp = Expression.Add(Expression.Constant(100), Expression.Constant(88));//值类型常数 BinaryExpression parAndi = Expression.Add(binarye…

使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert

使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这篇文章进行安装和破解http://www.cnblogs.com/chengxs/p/6245281.html 2.然后需要你的电脑安装了node.js. 可以参考这篇文章http://www.cnblogs.com/chengxs/p/6221393.html 2.第一种方法:使用命令行窗口.可以在你要创建…

js 查找树节点数组去重

//查找树节点function findData(curOrg, id) { var array = []; if ((typeof curOrg == 'object') && (curOrg.constructor == Object.prototype.constructor)) { array.push(curOrg); } else array = curOrg; for (var i = 0; i < array.length; i++) { var jn = array…

展开easyui 树节点到某个点

$(function () { $('#tt').tree({ url: '/IS/Department/JsonTree?companyID=@(Request.QueryString["companyID"])', lines: true, dnd: true, onSelect: function (node) { add(node.id, null); $(this).tree('expand', node.target); //点击树节点,展开子级节点 }, onLoadSu…

Lind.DDD.ExpressionExtensions动态构建表达式树，实现对数据集的权限控制

回到目录 Lind.DDD框架里提出了对数据集的控制,某些权限的用户为某些表添加某些数据集的权限,具体实现是在一张表中存储用户ID,表名,检索字段,检索值和检索操作符,然后用户登陆后,通过自己权限来构建对应表的查询语句,即动态构建表达式树,这种操作一些被写在业务层上,我们可以在业务层需要进行数据集权限控制的地方,添加这种策略,下面具体分析说明一下．看一下数据集权限表结果 public class User_DataSet_Policies { /// <summary> /// 用户ID /…

ztree获取当前选中节点子节点id集合的方法(转载)

本文实例讲述了ztree获取当前选中节点子节点id集合的方法.分享给大家供大家参考.具体分析如下: 要求:获取当前选中节点的子节点id集合. 步骤: 1.获取当前节点 2.用ztree的方法transformToArray()获取当前选中节点(含选中节点)的子节点对象集合. 3.遍历集合,取出需要的值. treeNode:当前选中节点对象 function getChildNodes(treeNode) { var naviTree = $.fn.zTree.getZTreeObj(zTreeI…

构建简单的Maven工程，使用测试驱动的方式开发项目

构建简单的Maven工程很简单,这里写这篇随笔的原因是希望自己能记住几个小点. 一.安装Maven 1.下载maven:https://maven.apache.org/download.cgi 2.解压压缩包到指定路径,如E:/Java/maven.得到文件夹apache-maven-3.3.9. 3.以第二步得到的目录E:/Java/maven/apache-maven-3.3.9作为Maven的根目录,配置Maven的环境变量.注意因为maven是Java语言开发的所以需要依赖JDK,所以…