table-tree jquery树形表格组件

img

项目代码地址https://github.com/woai3c/table-tree
表格创建流程
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。