利用jquery 实现动态多表头Grid

由于在GridView控件里面实现过一次,所以用js来做也是比较容易的.基本的原来就是分析表头根据字符串进行拆分 比如我这里用的特殊符号是"_"

我在GridView里面实现的是可以无限层的,js的实现我直接写死了层数,不过很容易修改,写个递归就ok啦.

数据源为:

"[{\"用电单位\":\"郭楼三陈\",\"2009-06-01_度数\":\"\",\"2009-06-01_单价\":\"\",\"2009-06-01_金额\":
\"\",\"2009-07-01_度数\":\"242.00\",\"2009-07-01_单价\":\"12.00\",\"2009-07-01_金额\":\"2904.0000\"},
{\"用电单位\":\"狼坡\",\"2009-06-01_度数\":\"190.00\",\"2009-06-01_单价\":\"12.00\",
\"2009-06-01_金额\":\"2280.0000\",\"2009-07-01_度数\":\"23.00\",\"2009-07-01_单价\":\"21.00\",
\"2009-07-01_金额\":\"483.0000\"}];"

可以看到我的表头类似是"2009-06-01_度数"这样的结构,然后通过js进行处理.

<script>
$(window).ready(function() {$.getJSON("/Power/PowerStatList/",{ id: "0", sid: "1;2;3", rid: Math.round(Math.random() * 10) },
function(json) {
    jsonval = eval(json);
    for (var j = 0; j < jsonval.length; j++) {
        $("#GridView1 tr:last").after("<tr id='" + j + "'></tr>");
        var m = 0;
        for (var i in jsonval[j]) {
            if (j == 0) {
                $("#tableHeader").append("<td id='h" + m + "'>" + i + "</td>");
            }
            $("#GridView1 tr:last").append("<td>" + jsonval[j][i] + "</td>");
            m++;
        }
    }
    $("#GridView1 tr:first").before("<tr id='newHeader'></tr>");
    var temp = "";
    var col = 1;
    var trs = {}
    $.each($("#tableHeader td"), function(i, td) {

        if ($(td).text().indexOf('_') > 0) {
            if (temp != "") {
                if (temp != $(td).text().split('_')[0]) {
                    $("#GridView1 tr:first").append("<td colspan=" + col + ">" + temp + "</td>");
                    col = 1;
                }
                else {
                    col++;
                }
            }
            temp = $(td).text().split('_')[0];
        }
        else {
            $("#GridView1 tr:first").append("<td rowspan=2>" + $("#h" + i).text() + "</td>");
            $("#h" + i).remove();
        }
        $(td).text($(td).text().split('_')[0]);
    });
    $("#GridView1 tr:first").append("<td colspan=" + col + ">" + temp + "</td>");

});
});

    </script>

    <table border=1 id="GridView1">
        <tr id="tableHeader">

        </tr>

    </table>

效果:

加上样式就好看了 O(∩_∩)O哈哈~