jquery 树形数据表格组件

组件项目仓库地址

表格创建流程

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代表有需要要加载的数据 在页面表现为+号 点击+号加载数据

如果没有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。