雷林鹏分享:jQuery EasyUI 树形菜单 - 树形网格惰性加载节点

  jQuery EasyUI 树形菜单 - 树形网格惰性加载节点

  有时我们已经得到充分的分层树形网格(TreeGrid)的数据。 我们还想让树形网格(TreeGrid)按层次惰性加载节点。 首先,只加载顶层节点。 然后点击节点的展开图标来加载它的子节点。 本教程展示如何创建带有惰性加载特性的树形网格(TreeGrid)。

  创建树形网格(TreeGrid)

  

  data-options="

 

  url: 'data/treegrid_data.json',

  method: 'get',

  rownumbers: true,

  idField: 'id',

  treeField: 'name',

  loadFilter: myLoadFilter

  ">

  

 

  

 

  

 

  

 

  

 

  

 

  

 

  

  为了放置加载子节点,我们需要为每个节点重命名 'children' 属性。 正如下面的代码所示,'children' 属性重命名为 'children1'。 当展开一个节点时,我们调用 'append' 方法来加载它的子节点数据。

  'loadFilter' 代码

  function myLoadFilter(data,parentId){

  function setData(){

  var todo = [];

  for(var i=0; i<data.length; p="" i++){<="">

  todo.push(data[i]);

  }

  while(todo.length){

  var node = todo.shift();

  if (node.children){

  node.state = 'closed';

  node.children1 = node.children;

  node.children = undefined;

  todo = todo.concat(node.children1);

  }

  }

  }

  setData(data);

  var tg = $(this);

  var opts = tg.treegrid('options');

  opts.onBeforeExpand = function(row){

  if (row.children1){

  tg.treegrid('append',{

  parent: row[opts.idField],

  data: row.children1

  });

  row.children1 = undefined;

  tg.treegrid('expand', row[opts.idField]);

  }

  return row.children1 == undefined;

  };

  return data;

  }

  下载 jQuery EasyUI 实例

  jeasyui-tree-treegrid5.zip

  本文转载自:w3cschool(编辑:雷林鹏 来源:网络 侵删)

转载于:https://www.cnblogs.com/pengpeng1208/p/10648443.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值