ligerUI 之 grid tree 收缩问题

最新推荐文章于 2021-01-25 09:32:29 发布
最新推荐文章于 2021-01-25 09:32:29 发布
阅读量322 收藏
点赞数
文章标签： python
原文链接：https://my.oschina.net/WWWW23223/blog/531147
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

       工作需要使用ligerui 开发，最近要实现grid tree的效果，据一位老鸟说这里有个坑，率根据他的指导进行开发：需要在tree中加入isParent,isExtend，childrenName,parnetIdField这么个属性，即

，而且数据返回List<Object>中必须是:父中包含子作为一个Object  add进list中，子也要作为一个Object 紧跟add 进list中。

      后来开发完成，但节点并不收缩，后来仔细观察，发现点击时，只有小图标的样式在close与open之间变化，理应下一个tr应该增加display:none才对的啊，难道js引入有问题？查看js,好像没有问题，于是放弃这个方向，百思不得解，于是找老鸟解决，查看代码，返回数据，他说没有问题啊，他做过这样的，行啊，但也解决不了这个问题。

        于是困了我几天。为什么不按官网demo的例子来一试，于是tree中只用colummId属性，终于行了，但发现数据出现double，明白，是List中不应该 add进子节点的，于是处理后台返回的数据，终于可以了。

转载于:https://my.oschina.net/WWWW23223/blog/531147

weixin_33998125
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript easyui treegrid点击行即可伸缩
zhq200902的博客
02-08 1650
treegrid点击小箭头才可伸缩，不方便； function drawtreegrid(data,id,filter,sort){ var col=[]; var arrdata=typeof data.rows!=='object' ? JSON.parse(data.rows):data.rows; for(var index i
LigerUI之Grid使用详解(一)——显示数据
11-09
LigerUI之Grid使用详解(一)——显示数据示例程序源码
LigerUI 树状列表折叠显示
haojuntu的专栏
03-01 3717
function InitGrid(arrButtons) { //加载 菜单管理数据 $.post("Ajax_Menu.aspx", { view: 'ManageMenu' }, function(data) { gridRight.set('data', { Rows: data.Data });
jquery file tree 收缩空行
jspine的专栏
04-24 127
今天在使用jquery file tree时，点击收缩文件夹后总是会出现空行，检查好久才发现是由于CSS 样式设置的问题（主要是在IE中才会出现）。 修改如下： 1、打开css文件“jqueryFileTree.css” 2、修改“UL.jqueryFileTree LI”css项，在其中添加宽度设置（如：“width:100px;”）。 3、修改完成后再预览应该就可以了。  ...
LigerUi折叠与展开
weixin_30871293的博客
01-09 219
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+reque...
asp.net+Ligerui实现grid导出Excel和Word的方法
10-22
主要介绍了asp.net+Ligerui实现grid导出Excel和Word的方法,实例分析了asp.net结合jQuery的Ligerui插件操作excel和word文件的技巧,需要的朋友可以参考下
ligerui+Json_使用LigerUI的Grid和Java的Json实现数据显示
04-02
在本教程中，我们将深入探讨如何结合LigerUI的Grid组件和Java的JSON数据来实现数据显示。Grid是LigerUI中的一个核心组件，用于展示表格数据，支持多种交互功能和自定义样式。 首先，我们需要理解LigerUI的Grid组件...
ligerui之gird
07-09
《深入解析LigerUI中的Grid控件》 在Web开发领域，前端框架的使用极大地提升了开发效率和用户体验。其中，LigerUI是一个优秀的JavaScript库，它提供了丰富的UI组件，包括我们今天要探讨的核心部分——Grid控件。...
Ligerui Grid合并单元格
02-03
Ligerui Grid合并单元格 ,指定列合并单元格，该合并是整列合并
LigerUI中生成GRID与TREE的【JSON数据】与Asp.Net的【变量数据】（方便测试）
【敦厚的曹操】的专栏
11-17 4133
一、下拉框GRID数据 [   {"id":40,"value":null,"text":"管理员      ","icon":null,"fatherid":null,"children":null},   {"id":1,"value":null,"text":"操作员      ","icon":null,"fatherid":null,"children":null} ] s
jQuery LigerUI ligerTree展开指定节点
石头
09-02 7401
概述 如果你的项目正在使用LigerUI框架恭喜中将了，ligerTree.js达不到我的期望，比如最近接手个项目，框架已经定型用的LigerUI，发现ligerTree.js不能展开指定节点，只有全展开、展开几级节点等，官方demo，如果要指定到某一个节点，那就需要修改源码了。 使用场景 那么问题来了，在什么情况下需要指定到节点呢？比如有这样一个需求，对树结构数据的维护，页面左则为树结...
Element ui el-tree 组件展开关闭所有节点方法
岁月清浅， 不落痕迹
01-25 6215
Element ui el-tree 组件展开关闭所有节点方法 Element ui el-tree 组件展开关闭所有节点方法 递归遍历每个节点改变 node的expanded 属性值 changeTreeNodeStatus(val, flag) { const node = val node.expanded = flag; for (let i = 0; i < node.childNodes.length; i++) {
关于elementui的table树折叠父节点将子节点全部折叠方法
weixin_42263738的博客
08-14 3254
在使用elementui的table数据的时候，会默认记录我们所有展开的节点 例如： 可以使用该方法进行将父节点之下的节点全部折叠（该方法只使用也最后的叶子节点为懒加载节点，当懒加载为父节点的时候，需要自己改造一下）： foldNode:function (row) { let treeData = this.$refs.treeTable.store.states.tree...
Spring中refresh分析之prepareRefresh方法详解
小小默：进无止境
05-24 8665
关联博文： AbstractApplicationContext中refresh方法详解 Spring中refresh分析之obtainFreshBeanFactory方法详解 Spring中refresh分析之prepareBeanFactory方法详解 Spring中refresh分析之postProcessBeanFactory方法详解 Spring中refresh分析之invokeBeanFactoryPostProcessors方法详解 Spring中refresh分析之registerBeanP
jQuery LigerUI 插件介绍及使用之ligerTree
kongjunlongaa的博客
06-27 697
一，简介  ligerTree的功能列表： 1,支持本地数据和服务器数据(配置data或者url) 2,支持原生html生成Tree 3,支持动态获取增加/修改/删除节点 4,支持大部分常见的事件 5,支持获取选中行等常见的接口方法   二，第一个例子 引入库文件 遵循LigerUI系列插件的设计原则(插件尽量单独)，ligerTree是一个单独的插件，也就是说只需要引入plu
ligerui中的tree的异步动态加载数据库例子
热门推荐
vazumi的专栏
12-12 1万+
在线测试: http://vazumi.net.s1.kingidc.net/example/tree.htm 截图: 源码:页面右键就在里面，这里我也贴出来 tree var manager = null; $(function () {
用vue实现ligerui的grid
最新发布
06-08
首先需要在Vue项目中引入LigerUI的相关文件，可以通过CDN或下载LigerUI的文件进行引入。然后在Vue组件中定义一个grid组件，并在该组件中引入LigerUI的相关代码。 在Vue组件中的template中，可以使用LigerUI提供的grid标签来创建grid组件，例如： ``` <liger-grid :columns="columns" :data="data"></liger-grid> ``` 其中，columns是定义grid的列信息，data是要展示的数据信息。 在Vue组件中的script中，需要定义columns和data两个变量，例如： ``` <script> export default { name: 'MyGrid', data () { return { columns: [ { display: 'ID', name: 'id', width: 80, align: 'center' }, { display: 'Name', name: 'name', width: 120, align: 'left' }, { display: 'Email', name: 'email', width: 200, align: 'left' }, { display: 'Address', name: 'address', width: 200, align: 'left' } ], data: [ { id: 1, name: 'John', email: 'john@example.com', address: 'New York' }, { id: 2, name: 'Jane', email: 'jane@example.com', address: 'London' }, { id: 3, name: 'Bob', email: 'bob@example.com', address: 'Paris' } ] } } } </script> ``` 以上是一个简单的示例，其中columns定义了grid的列信息，包括列名、列字段名、列宽度和对齐方式等，data定义了要展示的数据信息。 需要注意的是，LigerUI的grid组件需要在mounted生命周期中进行初始化，例如： ``` mounted () { this.$nextTick(() => { $(this.$el).ligerGrid({ columns: this.columns, data: this.data }) }) } ``` 以上代码中，使用jQuery选择当前组件的元素，然后调用ligerGrid方法进行初始化，传入columns和data参数。 最后，需要在组件销毁时销毁grid组件，例如： ``` beforeDestroy () { $(this.$el).ligerDestroy() } ``` 以上是用Vue实现LigerUI的grid组件的基本步骤，可以根据实际需求进行调整和扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值