JQuery EasyUI treegrid展开与折叠，以及数据加载两次的问题

最新推荐文章于 2021-05-31 05:07:05 发布
最新推荐文章于 2021-05-31 05:07:05 发布
阅读量1k 收藏
点赞数
分类专栏： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35792159/article/details/101336132
版权
在项目中遇到JQuery EasyUI TreeGrid默认仅展开一级节点的问题，需要每次手动展开。参考官方API及网上的解决方案，尝试修改代码以实现自动展开到第二级。过程中发现数据加载了两次。问题可能源于HTML中多次初始化组件或URL的处理方式。尝试删除HTML中的class声明、将URL放入JS中等方式未果，最终通过延迟初始化解决，但原因不明。
摘要由CSDN通过智能技术生成

问题：做项目的时候遇到代码生成的页面，只默认展开了一级节点，每次操作之后刷新还要手动一级一级展开，太麻烦了

官方API：http://www.jeasyui.net/plugins/186.html

我的html代码：

<div class="easyui-layout" fit="true">
  <div region="center" style="padding:0px;border:0px">
  <t:datagrid name="jccmAreaManagerList" checkbox="false" pagination="true" treegrid="true" treeField="areaName" fitColumns="true" title="区域管理" sortName="createDate" actionUrl="jccmAreaManagerController.do?datagrid" idField="id" fit="true" queryMode="group">
   <t:dgCol title="主键"  field="id"  hidden="true"  queryMode="single"  width="120"&g
最低0.47元/天 解锁文章
是匆匆吖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery实现表格展开与折叠的方法
12-11
本文实例讲述了jQuery实现表格展开与折叠的方法。分享给大家供大家参考。具体分析如下： 这是很人性化的一款特效代码，实现点击其中一个父级，另一个之前打开的父级会自动关闭 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery表格展开折叠，默认折叠</title> <style> table{ border:0;border-collapse:collapse;} td{ font:normal 12px/17px Arial;padding:2px;width:100px;} th{ font:bold 12
关于EasyUI使用tree方法生成树形结构加载两次的问题
weixin_34270865的博客
04-21 240
2019独角兽企业重金招聘Python工程师标准>>> ...
记录 EasyUI treegrid 表格加载慢问题
wa123579的博客
02-01 761
发现问题 一个查询，数据不是很多，结构比较复杂，但是页面加载要 20s 左右 打印时间发现查询和处理数据耗时很短 这个操作 $(’#list’).treegrid(‘loadData’, data) 耗时很长 解决方式 所有涉及表头的字段都需要加 width，下面列举部分代码 修改前 var col = [ { title: 'xx', field: 'deptname' }, { title: 'xx', field: 'costs', align: 'center' } 修改后 var
jQuery EasyUI使用教程之在树网格中延迟加载节点
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
08-10 1667
有时我们已经得到充分的分层树形网格的数据，我们还想让树形网格按层次延迟加载节点。首先，只加载顶层节点；然后点击节点的展开图标来加载它的子节点。本教程展示如何创建带有延迟加载特性的树形网格。 jQuery EasyUI最新试用版下载请猛戳>> 点击查看示例 创建树网格 1 2 3 4 5 6 7 8
用Jquery简单实现表格的展开与折叠
a304096740的博客
09-21 822
　　　　作为程序员，天天都在编程与学习。好的东西简洁的代码与大家一同分享......大家多多指教......共同进步! 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2...
jquery easyui treegrid demo 详解
10-03
TreeGrid 结构上是一个表格，但每一行都可以展开或折叠，显示子级数据，形成树状结构。它不仅能够展示层次分明的数据，还支持常见的表格操作，如排序、分页、筛选等。 **一、创建 TreeGrid** 在 HTML 页面中，我们...
数据结构之easyui-treegrid
04-15
TreeGrid控件允许用户以表格的形式展示数据，并且每一行都可以展开或折叠，展现出其子级节点，这样既保留了表格的行列布局，又提供了树形结构的层级展现，非常适合用于管理具有层次结构的业务数据，如组织架构、目录...
SSH+Easyui之TreeGrid树形展现数据
08-24
EasyUI的TreeGrid需要的数据格式通常包含两部分：父节点和子节点。每个节点都有一个唯一的id，以及一个父id来表示其层级关系。在初始化TreeGrid时，你需要指定数据的URL，EasyUI会自动发送Ajax请求获取这些数据。 ...
Java easyui树形表格TreeGrid的实现代码
08-31
TreeGrid 组件的每个行可以展开或折叠，以显示或隐藏子节点。 TreeGrid 组件的实现代码 在上面的代码中，我们可以看到 TreeGrid 组件的实现代码。首先，我们需要在 JSP 页面中添加 TreeGrid 组件的标签 `;height:...
jQuery EasyUI 1.4.5 版 API 中文版.rar
08-17
3. **数据展示组件**：`datagrid`（数据网格）和`treegrid`（树形数据网格）是两个关键的组件，它们能以表格或树状形式展示数据，并支持分页、排序、筛选等功能。 4. **选择器与菜单**：`combobox`（组合框）、`...
关于EasyUI中的treegrid数据在页面加载慢的问题
jixusandunfan的专栏
02-22 5982
在做周进度统计的时候遇到了这个问题：页面后台返回的数据也就200多k，但是页面得卡5秒左右才能显示出来，而且折叠树的时候页面也反应很慢，经过仔细查阅终于找到了问题的所在： 有问题的代码： $('#tg1').treegrid({ striped : true, rownumbers: false, autoRowHeight: true, idFie...
jquery 表格(展开和折叠列表项)
weixin_30787531的博客
12-05 147
HTML： View Code <ul> <li class="address">中国 <ul> <li>北京</li> <li>杭州</li&gt...
JQuery TreeGrid实现异步加载
程序员命运共同体
05-14 1326
1.工作中遇到的问题 使用Bootstrap-able和JQuery TreeGrid插件实现树形表格。但是一次性加载大量数据（测试数据为2000条），绘制表格的时候会卡死。所以，迫切需要异步加载数据，构建树形表格。 然后就在网上各种搜索，找不到特别合适的。但是一位大佬maskainv给我提供了思路。站位大佬的肩膀上自己编写了一个jquery.treegrid.async.js插件，用于扩展。 初始化treegrid出现的问题 实现异步加载思路 1.一次只加载一级节点，默认加载根节点pa.
easyui tree 展开节点时不重新加载数据
周文超的专栏
06-11 7408
$('#tree').tree({ url: 'getMiddleTree.cncc', onSelect : function(node){ } } }, });
jQuery datatable 折叠与展开
wellcome 2 天明's 博客
05-18 1964
/** * 初始化表格 * @returns */ function initHistoryAlarmInfoTable() { $('#historyAlarmInfoTable').DataTable({ language: { "lengthMenu": "每页 _MENU_ 行", "zeroRecords": "没有找到记录", "info": "当前 _START_ 到 _END_， 总共 _TOTAL_ 记录", "infoEmpty"..
easyui datagrid 子网格的折叠问题(在展开一个子网格时折叠上一个展开的子网格)
angela_77的博客
11-28 6454
有时候需要在一个datagrid里加入子网格，显示其他信息。如果在同时展开多个子网格且对其展开的子网格进行操作，可能会引起一些操作歧义，特别是datagrid可以多选时。为了避免这种歧义，就需要在展开一个子网格时先折叠上一个子网格。       onExpandRow:function(index,row){ var rows = $('#users_community_list
html列表展开与收缩,一款通过jQuery实现的表格列表展开及收缩折叠特效代码
weixin_39568781的博客
05-31 546
脚本代码(For Alixixi.com)如下:jQuery表格展开折叠，默认折叠table{ border:0;border-collapse:collapse;}td{ font:normal 12px/17px Arial;padding:2px;width:100px;}th{ font:bold 12px/17px Arial;text-align:left;padding:4px;bo...
jquery表格展开折叠代码
chengmodelong的专栏
05-15 1915
jquery表格展开折叠代码 table{ border:0;border-collapse:collapse;} td{ font:normal 12px/17px Arial;padding:2px;width:100px;} th{ font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px sol
easyui treegrid 怎么使用树节点延迟加载
最新发布
06-03
easyui treegrid 提供了树节点延迟加载的功能，可以将树节点的数据分批加载，只有当用户展开该节点时，才会加载该节点的子节点。下面是使用树节点延迟加载的示例代码： 1. 首先，在 easyui treegrid 的 data 属性中，需要为每个节点添加一个 "state" 属性，该属性的值为 "closed"，表示该节点的子节点未加载。例如： ``` var data = [ { "id": 1, "text": "Node 1", "state": "closed" }, { "id": 2, "text": "Node 2", "state": "closed" } ]; ``` 2. 然后，在 easyui treegrid 的 onBeforeExpand 事件中，判断该节点是否已经加载子节点，如果未加载，则通过 AJAX 请求获取该节点的子节点数据，并将数据添加到该节点下。例如： ``` $('#treegrid').treegrid({ url: 'get_data.php', idField: 'id', treeField: 'text', onBeforeExpand: function(row) { if (row.children == undefined) { $.ajax({ url: 'get_children.php?id=' + row.id, dataType: 'json', success: function(data) { $('#treegrid').treegrid('append', { parent: row.id, data: data }); row.children = data; } }); } }, columns: [...] }); ``` 在这个示例代码中，通过 AJAX 请求获取该节点的子节点数据，并通过 treegrid 的 "append" 方法将数据添加到该节点下。同时，为了避免多次请求同一个节点的子节点数据，需要将已经加载的子节点数据保存在该节点的 "children" 属性中。 通过以上代码，你就可以实现 easyui treegrid 的树节点延迟加载功能。当用户展开某个节点时，会自动请求该节点的子节点数据，并将数据添加到该节点下，从而实现了分批加载数据的效果，提高了 easyui treegrid 的性能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值