首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

关系图点击节点展开次级节点效果尝试

最近有读者问,关系图如何通过点击节点展开、折叠,当时没有时间写例子(最近一直比较忙),就口述了下思路…… 昨晚终于抽出点时间做了一个极其简易的示例,补上。...通过监听鼠标事件触发 判断鼠标点击节点,通过一定规则确定要隐藏/显示的category(这里给当时问我的读者道个歉……当时我给说成series 了,实际上关系图的图例是通过series[i]-graph.categories...实现 一、首先准备些数据: 1、关系图的节点数据 data 2、节点间关系数据 links 3、用于图例的 categories 类目名称列表 categories 4、一个用于记录节点显示/隐藏状态的...categoryStatus 二、准备配置项 option option = { title: { text: '关系图点击节点展开次级节点效果尝试' },...,判断子节点的显/隐状态 如显示,则将所有子节点全部隐藏 如隐藏,则将 categoryStatus 中记录为显示的子节点显示

2.6K50
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    使用jsTree树形控件【4】

    标准JSON格式 使用JSON渲染jsTree的话,需要指定JSON的格式,jsTree可以使用两种JSON格式,在标准JSON格式中,没有必需的属性,而且还可以添加自定义的属性。...generated LI node a_attr : {} // attributes for the generated A node } 另外一种JSON格式 上面的标准格式中,子节点是嵌套在父节点中的...,如果是有多级节点,结构就会比较复杂,这时可以选用另一种JSON格式,在这种格式中,两个属性是必须有的id以及parent,而且也没有children属性。...jsTree会自动创建相应的树形结构,通过设置parent = "#"来设置节点为父节点。 这种结构适合于需要一次性渲染树形结构或者数据保存在数据库的情况。...使用函数 还可以给data属性赋值为一个函数,这个函数接收两个参数,一个是正在加载的节点对象,一个是回调函数,回调函数返回子节点信息。

    2.2K10

    使用jsTree树形控件【2】配置

    实例配置 上一节入门篇中的例子使用了jsTree控件的默认配置,其实我们也可以自定义配置。...例如,下面的代码修改控件的主题: $.jstree.defaults.core.themes.variant = "large"; $('#jstree').jstree(); 上面的代码虽然修改了控件的主题...,但是后面再创建jsTree的实例,将会使用同一各配置,有没有办法实现使用不同的配置来创建jsTree实例了,答案就时直接给实例对 象传递一个配置对象。...$('#jstree').jstree({ "plugins" : [ "wholerow", "checkbox" ] }); 从上面的代码可以看出,配置对象中包含一个plugins键,而对应的键值为字符串所组成的数组...例如: $('#jstree').jstree({ "core" : { "themes" : { "variant" : "large" } }, "checkbox

    1.4K30

    最好用的 7 个 Vue Tree select 树形组件 - 卡拉云

    接下来介绍 7 款我自己常用的 Vue tree select第三方组件,它们各有特色,希望能帮你找到合适你的选择器 Vue JSTree - 全功能,树状单选多选,可拖拽,过滤搜索 Vue Draggable...Vue JSTree - 全功能,树状单选多选,可拖拽,过滤搜索 Vue JSTree 放在第一个推荐,因为它涵盖了大多数你需要的功能,单选多选,可更换 icon 简单的搜索过滤,可任意拖拽子集到新集合里...[vue-jstree] Vue JSTree 更多功能: 没有依赖 单选、多选 自定义子集 icon 过滤及搜索 2.Vue draggable nested Tree - 纯树形选择,轻盈趁手 [...直接新建文件夹或子节点,重命名节点名,删除节点。拖拽节点到任意子集中,拖拽 UI 细节做的非常棒,有辅助虚线,方便用户在拖拽操作时,定位拖拽位置。 4....没有任何其他多余的功能,他就只有多层树状结构,简单的开合以及点击选择。针对仅需要树状选择组件的使用场景。 5.

    13.6K11

    基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用

    JStree控件选中节点的内容,然后进行相关的处理操作,那么它的处理代码如下所示。...EditTag(); }); 双击事件,其实是连续的单击事件处理,一般情况下,或先选中当前节点,我们也可以在双击的时候,获取对应的节点ID,如下代码所示。...ID,获取选择节点的名称则可以通过代码获取: var eventNodeName = e.target.nodeName; JSTree一般我们会通过JSON数据进行动态绑定,这个JSON的数据格式定义如下所示...('check_node', item);//将节点选中 }); }); } } 数据保存的时候...,我们获得JSTree节点选中列表就可以进行数据的保存了,具体代码如下所示。

    2.4K50

    JS插件Fancytree使用分享及源码分析

    blog.csdn.net/j_bleach/article/details/72582026 fancytree fancytree是一款基于jq和jq-ui的树形插件,相比普通的jsTree...,fancytree扩展的功能非常的多,除了checkbox选中,拖拽排序等基础的功能,还有节点过滤,即时编辑,tabletree(在列表中展示jstree),各种键盘事件,以及各种皮肤样式。...其中1为单选,2为多选(但是不会自动勾选上级),3为多选(会自动根据选中节点勾选状态来判断父节点的状态),如果是多选的话,推荐换成3。...}) 3.获取选中节点数据 let selectTree = $("#treetable").fancytree("getTree").rootNode.children; 在选中fancytree的某一个节点后...如果看源码的话,fancytree写的还是挺庞大的(毕竟差不多涵盖了jstree所能拥有的所有功能),fancytree.js总共大概5000+行(还有一个fancytree.all.js,包含了table

    3K20

    jquery 元素节点操作 - 创建节点、插入节点、删除节点

    jquery的节点操作说明 前面的篇章对于jquery的元素操作大部分是使用html()的方式来操作,这种直接使用字符串创建的方式也是性能最高的。...使用html()操作节点 首先编写一个div包含一个a标签,如下: ? 下面来给这个a的后面加上一个span标签看看,如下: ?...另外还有其他创建节点、插入节点、删除节点的方法,如下: var $div2 = $('这是一个div元素'); # 创建节点 append() appendTo() #在现存元素的内部...在现存元素的内部,从前面插入元素 after() insertAfter() #在现存元素的外部,从后面插入元素 before() insertBefore() #在现存元素的外部,从前面插入元素 创建节点...// 删除节点 $('a').remove();

    8.9K40

    Easyui 实现点击不同树节点打开不同tab页展示不同datagrid表数据设计

    如上图, 1、点击左侧树,叶子节点,打开不同的tab页,加载与节点对应的表数据 2、在上述打开页面中,进行新增,编辑,复制等操作,确保新增、复制等操作生成的数据只在该页面可见。...涉及思路与关键代码 1、单击左侧树时,叶子节点时,新增、激活一个tab页,打开、激活之前,设置tab页id属性值为树节点的ID,设置title属性为节点名称 // 请求用例树 $('#tree').tree...,返回节点对象 if (node.id !...// 如果为叶节点,即无子节点,则为该节点添加对应的tab页,tab标题命名为节点名称,tabID则设置为 项目ID-节点ID if ($(this).tree('isLeaf...} }, 300); } } }); // 点击用例树

    1.2K10
    领券