表格创建流程
1、创建工具栏
2、创建表头
3、通过AJAX取得数据并渲染表格
4、绑定各种事件
加载数据的方式有两种
1、直接加载全部
2、当点击要看的数据时再加载
"越秀区":{ "data": { "arry":[50,100,100], "hasData": "yes", "id": 123 }, "x街":{ "data": { "arry":[50,100,100], "id": 123 } } }
举例,如上JSON数据所示,其中越秀区的数据为data, data里的arry为需要展示的数据, id在创建表格时赋在table上,作为唯一标示符,当点击越秀区需要加载数据时将ID传到后台,取得相对应的数据再渲染表格,这个视情况而定,可自己修改。
hasData代表有需要要加载的数据 在页面表现为+号 点击+号加载数据
扫描二维码关注公众号,回复:
3202704 查看本文章
如果没有hasData就代表没有要加载的数据了 在页面表现为-号
具体可以看两个DEMO的展示
$('.table-tree').tableTree({ url: 'json/demo.json', tableHead: ['地区(降雨量)','1月','2月','3月'], width: 600, ajax: function() { var data; $.ajax({ async: false, url: opt.url, success: function(obj) { data = obj; }, error: function() { } }) return data; } })
url为后台URL,必填
tableHead为表头数据,必填
width 宽 选填
height 高 选填
ajax函数 最好自己写一个覆盖组件里的 因为组件里的只是一个DEMO 真正跟后台对接需要传什么参数由自己决定。
如果不会布服务器环境,可以下载Hbuilder编辑器将代码文件放进去直接打开html文件观看DEMO。