EASYUI TREEGRID异步加载数据实现方法

官方提供的treegrid的ex 我给大家贴出来看看吧:


代码如下:

$(function(){
$('#tt').treegrid({
url:'treegrid_data3.json',
onAfterEdit:function(row,changes){
alert(row.name);
}
});
})

这个是页面初始化的。
看看他的JSON:


代码如下:

{"total":117,"rows":[
<SPAN style="COLOR: #ff0000">{"id":1,"code":"code1","name":"name1","addr":"address1","state":"closed"},</SPAN>
{"id":11,"code":"code11","name":"name11","addr":"address11","<SPAN style="COLOR: #ff0000">_parentId":1</SPAN>},
{"id":12,"code":"code12","name":"name12","addr":"address12","<SPAN style="COLOR: #ff0000">_parentId":1</SPAN>},
{"id":21,"code":"code21","name":"name21","addr":"address21","_parentId":1},
{"id":22,"code":"code22","name":"name22","addr":"address22","_parentId":1},
{"id":31,"code":"code31","name":"name31","addr":"address31","_parentId":1},
{"id":32,"code":"code32","name":"name32","addr":"address32","_parentId":1},
{"id":41,"code":"code41","name":"name41","addr":"address41","_parentId":1},
{"id":42,"code":"code42","name":"name42","addr":"address42","_parentId":1},
{"id":51,"code":"code51","name":"name51","addr":"address51","_parentId":1},
{"id":52,"code":"code52","name":"name52","addr":"address52","_parentId":1},
{"id":61,"code":"code61","name":"name61","addr":"address61","_parentId":1},
{"id":62,"code":"code62","name":"name62","addr":"address62","_parentId":1},
{"id":71,"code":"code71","name":"name71","addr":"address71","_parentId":1},
{"id":72,"code":"code72","name":"name72","addr":"address72","_parentId":1},
{"id":81,"code":"code81","name":"name81","addr":"address81","_parentId":1},
{"id":82,"code":"code82","name":"name82","addr":"address82","_parentId":1},
{"id":91,"code":"code91","name":"name91","addr":"address91","_parentId":1},
{"id":92,"code":"code92","name":"name92","addr":"address92","_parentId":1},
{"id":110,"code":"code110","name":"name110","addr":"address110","_parentId":1},
{"id":120,"code":"code120","name":"name120","addr":"address120","_parentId":1}
]}

标红的地方是特别有用的,我按照他的这个做法,自己做了一个,始终是没有数据的,后来发现了一个问题,


代码如下:

{"total":29,"rows":[
{"Id":25,"Ids":25,"name":"直辖市","state":"closed",<SPAN style="COLOR: #ff0000">"_parentId":2</SPAN>,"orderId":2},
{"Id":44,"Ids":44,"name":"黑龙江","state":"closed","_parentId":2,"orderId":110},
{"Id":45,"Ids":45,"name":"吉林","state":"closed","_parentId":2,"orderId":1},
{"Id":46,"Ids":46,"name":"辽宁","state":"closed","_parentId":2,"orderId":3},
{"Id":47,"Ids":47,"name":"河北","state":"closed","_parentId":2,"orderId":4},
{"Id":48,"Ids":48,"name":"内蒙古","state":"closed","_parentId":2,"orderId":111},
{"Id":49,"Ids":49,"name":"山西","state":"closed","_parentId":2,"orderId":6},
{"Id":50,"Ids":50,"name":"江西","state":"closed","_parentId":2,"orderId":11},
{"Id":51,"Ids":51,"name":"山东","state":"closed","_parentId":2,"orderId":12},
{"Id":52,"Ids":52,"name":"台湾","state":"closed","_parentId":2,"orderId":13},
{"Id":53,"Ids":53,"name":"甘肃","state":"closed","_parentId":2,"orderId":15},
{"Id":54,"Ids":54,"name":"宁夏","state":"closed","_parentId":2,"orderId":16},
{"Id":55,"Ids":55,"name":"青海","state":"closed","_parentId":2,"orderId":17},
{"Id":56,"Ids":56,"name":"新疆","state":"closed","_parentId":2,"orderId":18},
{"Id":57,"Ids":57,"name":"云南","state":"closed","_parentId":2,"orderId":19}]}

上面这个数据 没有一个根节点,所以页面出来什么都没有。。。。。我的数据只有parentId这个玩意,所以页面一片空白。
这个问题修正了,但是又出现新的问题了。开始我的处理方式是直接把所有数据load进来,点击节点展开是没有问题的。但是所有数据一起装载,不光耗性能不说,还特别慢。
所以想到异步加载。又到官方上去看了半天,官方提供了一大堆事件,什么展开触发哦之类的,没有一个说到点上的。
我用火狐监听每次数据都加载了的,而且有返回正确的JSON


代码如下:

{"total":29,"rows":[
{"Id":25,"Ids":25,"name":"直辖市","state":"closed",<SPAN style="COLOR: #ff0000">"_parentId":2</SPAN>,"orderId":2},
{"Id":44,"Ids":44,"name":"黑龙江","state":"closed","_parentId":2,"orderId":110},

。。。。<BR>经过我反复的对比tree和这个treegrid。最后发现treegrid 在请求过来的数据上有个total和rows ,而tree没有。

难道是这个total和rows在作怪,我赶紧把这个删掉了,果然数据出来了

大家可以百度一下,各种说法都有。

最后一个小结: easyui treegrid使用时需注意:

  1、必须要有根节点;

2、父节点装载的数据格式和子节点装载的数据格式 是不一样的。
父节点需要total和rows 而子节点装载的时候和tree的数据格式相同。 目前只弄了个两级的,多级的还没有去试。留篇文章,以备后用。

也热烈欢迎大家指正。

(0)

相关推荐

  • jquery easyui中treegrid用法的简单实例

    项目需求如下图,在服务端返回的json数据中,要经过JS处理,添加复选框,并且复选框需响应JS操作.在easyui 的treegrid中,没有找到现成的插件,自己需要修改整理,代码如下 复制代码 代码如下: <table class="easyui-treegrid" style="width:700px;height:250px"  url='control_node_json?group_id=$info[id]&access_node=$_REQ

  • EasyUI的treegrid组件动态加载数据问题的解决办法

    搜遍了treegrid源码和文档发现treegrid是扩展自datagrid和tree的,不过以往利用datagrid的reload方法加参数的方式加载查询结果数据,可是treegrid却只执行reload不能加载带参数的查询结果,可能是做了限制,如下代码不能加载查询结果: 复制代码 代码如下: <table id='treegrid' class='easyui-treegrid' url='/User/List'></table>$('#treegrid').treegrid(

  • Easyui Treegrid改变默认图标的方法

    普通情况下,treegrid的图标是默认的文件夹与文件的形式,如下图: ​​​我们可以在json文本中加入iconCls来改变默认图标,例如样例中: ​{"total":7,"rows":[ {"id":1,"name":"All Tasks","begin":"3/4/2010","end":"3/20/2010","

  • 浅谈EasyUI中Treegrid节点的删除

    EasyUI中的删除很简单,一般直接复制粘贴就行. 下面是对树节点的删除. 复制代码 代码如下: // 删除 function removes() {     var rows = ruletreegrid.treegrid('getSelections');     if (rows && rows.length == 1) {         var showmsg = "";         if (rows[0].pid == 0) {            

  • jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍

    扩展自 $.fn.datagrid.defaults,用 $.fn.treegrid.defaults 重写了 defaults. 依赖 datagrid 用法 复制代码 代码如下: <table id="tt"></table> 复制代码 代码如下: $('#tt').treegrid({ url:'treegrid_data.json', treeField:'name', columns:[[ {title:'Task Name',field:'name'

  • 浅谈EasyUI中编辑treegrid的方法

    主从表,从表是一个treegrid,加载完数据后,点击节点进入编辑状态. 复制代码 代码如下: columns : [ [ {             title : "ID",             field : "id",             hidden : true         }, {             field : "pid",             hidden : true         },  {    

  • Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法

    先放个最终的效果图: 然后是代码: html文件: <body> <h1>TreeGrid</h1> <div> <a id="consle" href="#">consle</a> </div> <table id="test" title="Folder Browser" style="width:400px;height:

  • jQuery EasyUI的TreeGrid查询功能实现方法

    最近需要实现对treeGrid的查询功能,具体查询界面如下: 可以查询根节点和具体子节点的信息,开始使用EasyUI的TreeGrid的loadData 加载url的方式不能实现查询功能,于是利用异步AJAX查询了一下数据返回后,赋值给变量,然后利用 TreeGrid的loadData加载这个json格式的返回结果实现了对TreeGrid的查询功能,代码如下: function searchROM() { var product = $('#Product').combobox('getValu

  • EASYUI TREEGRID异步加载数据实现方法

    官方提供的treegrid的ex 我给大家贴出来看看吧: 复制代码 代码如下: $(function(){ $('#tt').treegrid({ url:'treegrid_data3.json', onAfterEdit:function(row,changes){ alert(row.name); } }); }) 这个是页面初始化的. 看看他的JSON: 复制代码 代码如下: {"total":117,"rows":[ <SPAN style=&quo

  • Android开发实现ListView异步加载数据的方法详解

    本文实例讲述了Android开发实现ListView异步加载数据的方法.分享给大家供大家参考,具体如下: 1.主Activity public class MainActivity extends Activity { private ListView listView; private ArrayList<Person> persons; private ListAdapter adapter; private Handler handler=null; //xml文件的网络地址 final

  • 微信小程序中使用ECharts 异步加载数据的方法

    官网例子都是同步的,怎么引入及同步demo请移步官网 <view class="container"> <ec-canvas id="mychart-dom-multi-bar" canvas-id="mychart-multi-bar" ec="{{ ecBar }}"></ec-canvas> <ec-canvas id="mychart-dom-multi-scatte

  • vue+echarts实现动态绘制图表及异步加载数据的方法

    前言 背景:vue写的后台管理,需要将表格数据绘制成图表(折线图,柱状图),图表数据都是通过接口请求回来的. 安装 cnpm install echarts --s   (我这里用了淘宝镜像,不知道同学自行百度) 实例化   在已有的项目中下载好了echarts 之后,可以打开官方文档,但是我觉得官方文档对于实例化介绍的不够清晰,这也是我为什么在这么多的文章中还要写的原因,前辈写的太模糊了,我决定好好给后来人,需要在项目中引用图表的人,一些实用,快捷的东西. 官方文档:http://echart

  • 关于layui的下拉搜索框异步加载数据的解决方法

    思路分析:当我使用layui默认的下拉搜索框的时候,layui会默认渲染出一个HTML结构,所以我把渲染出来的这个结果直接给复制出来,这样css的样式就不用从头到尾写一遍了, 前端代码(我用的是jsp): <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC &quo

  • Android实现ListView异步加载图片的方法

    本文实例讲述了Android实现ListView异步加载图片的方法.分享给大家供大家参考.具体如下: ListView异步加载图片是非常实用的方法,凡是是要通过网络获取图片资源一般使用这种方法比较好,用户体验好,不用让用户等待下去,下面就说实现方法,先贴上主方法的代码: package cn.wangmeng.test; import java.io.IOException; import java.io.InputStream; import java.lang.ref.SoftReferen

  • Android异步加载数据和图片的保存思路详解

    把从网络获取的图片数据保存在SD卡上, 先把权限都加上 网络权限 android.permission.INTERNET SD卡读写权限 android.permission.MOUNT_UNMOUNT_FILESYSTEMS android.permission.WRITE_EXTERNAL_STORAGE 总体布局 写界面,使用ListView,创建条目的布局文件,水平摆放的ImageView TextView 在activity中获取到ListView对象,调用setAdapter()方法

  • JQuery异步加载PartialView的方法

    本文实例讲述了JQuery异步加载PartialView的方法.分享给大家供大家参考,具体如下: 需求:页面上有dropdown之类的控件,当选择里面不同值的时候,下面关联的内容跟着改变. 思路:把与 dropdown关联的会改变的内容放到PartialView(ascx)里,用JQuery绑定dropdown的change事件,当选择值改变时,用JQuery ajax请求与PartialView相关的Action,得到数据后讲取到的内容覆盖原来的内容. 实现: Model 类: public

  • 使用DataTable插件实现异步加载数据

    table部分代码 <table class="table table-bordered table-striped" id="table-main"> <thead> <tr> <th>用户名</th> <th>渠道名</th> <th>游戏名</th> <th>结果</th> <th>耗时</th> <

  • jsp实现局部刷新页面、异步加载页面的方法

    局部刷新页面.异步加载页面方案: 1.在jsp页面需要刷新的地方增加一个控件 <div id=courseList></div> 2.新建一个jsp页面:aaa.jsp(用来放置需要刷新的内容) 3.将id为courseList的dom标签重新赋值为需要的页面,就能达到局部刷新的目的 $('#courseList').html(msg); 例如: $.ajax({ dataType:"text", url:basePath+'/courseList', data

随机推荐