您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > 利用jquery 實現(xiàn)動態(tài)多表頭Grid
利用jquery 實現(xiàn)動態(tài)多表頭Grid
文章來源：365jz.com 點擊數(shù)：874 更新時間：2009-09-17 10:19 參與評論
由于在GridView控件里面實現(xiàn)過一次,所以用js來做也是比較容易的.基本的原來就是分析表頭根據(jù)字符串進行拆分 比如我這里用的特殊符號是"_"
我在GridView里面實現(xiàn)的是可以無限層的,js的實現(xiàn)我直接寫死了層數(shù),不過很容易修改,寫個遞歸就ok啦.
數(shù)據(jù)源為:
"[{\"用電單位\":\"郭樓三陳\",\"2009-06-01_度數(shù)\":\"\",\"2009-06-01_單價\":\"\",\"2009-06-01_金額\":
\"\",\"2009-07-01_度數(shù)\":\"242.00\",\"2009-07-01_單價\":\"12.00\",\"2009-07-01_金額\":\"2904.0000\"},
{\"用電單位\":\"狼坡\",\"2009-06-01_度數(shù)\":\"190.00\",\"2009-06-01_單價\":\"12.00\",
\"2009-06-01_金額\":\"2280.0000\",\"2009-07-01_度數(shù)\":\"23.00\",\"2009-07-01_單價\":\"21.00\",
\"2009-07-01_金額\":\"483.0000\"}];"
可以看到我的表頭類似是"2009-06-01_度數(shù)"這樣的結(jié)構(gòu),然后通過js進行處理.
1: <script>
2: $(window).ready(function() {$.getJSON("/Power/PowerStatList/",{ id: "0", sid: "1;2;3", rid: Math.round(Math.random() * 10) },
3: function(json) {
4: jsonval = eval(json);
5: for (var j = 0; j < jsonval.length; j++) {
6: $("#GridView1 tr:last").after("<tr id='" + j + "'></tr>");
7: var m = 0;
8: for (var i in jsonval[j]) {
9: if (j == 0) {
10: $("#tableHeader").append("<td id='h" + m + "'>" + i + "</td>");
11: }
12: $("#GridView1 tr:last").append("<td>" + jsonval[j][i] + "</td>");
13: m++;
14: }
15: }
16: $("#GridView1 tr:first").before("<tr id='newHeader'></tr>");
17: var temp = "";
18: var col = 1;
19: var trs = {}
20: $.each($("#tableHeader td"), function(i, td) {
21:
22: if ($(td).text().indexOf('_') > 0) {
23: if (temp != "") {
24: if (temp != $(td).text().split('_')[0]) {
25: $("#GridView1 tr:first").append("<td colspan=" + col + ">" + temp + "</td>");
26: col = 1;
27: }
28: else {
29: col++;
30: }
31: }
32: temp = $(td).text().split('_')[0];
33: }
34: else {
35: $("#GridView1 tr:first").append("<td rowspan=2>" + $("#h" + i).text() + "</td>");
36: $("#h" + i).remove();
37: }
38: $(td).text($(td).text().split('_')[0]);
39: });
40: $("#GridView1 tr:first").append("<td colspan=" + col + ">" + temp + "</td>");
41:
42: });
43: });
44:
45: </script>
46:
47: <table border=1 id="GridView1">
48: <tr id="tableHeader">
49:
50: </tr>
51:
52: </table>
效果:
加上樣式就好看了 O(∩_∩)O哈哈~
如對本文有疑問，請?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會為你解答??！ 點擊進入論壇
您可能感興趣的文章:
------分隔線----------------------------
- 上一篇：獲取調(diào)用事件處理函數(shù)的Dom對象
- 下一篇：MySQL索引
