您现在的位置： 365建站网 > 365文章 > 利用jquery 实现动态多表头Grid

利用jquery 实现动态多表头Grid

文章来源：365jz.com 点击数：872 更新时间：2009-09-17 10:19 参与评论

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

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

数据源为:

</>code
"[{\"用电单位\":\"郭楼三陈\",\"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进行处理.

</>code
   1:  <script>

</>code
   2:  $(window).ready(function() {$.getJSON("/Power/PowerStatList/",{ id: "0", sid: "1;2;3", rid: Math.round(Math.random() * 10) },

</>code
   3:  function(json) {

</>code
   4:      jsonval = eval(json);

</>code
   5:      for (var j = 0; j < jsonval.length; j++) {

</>code
   6:          $("#GridView1 tr:last").after("<tr id='" + j + "'></tr>");

</>code
   7:          var m = 0;

</>code
   8:          for (var i in jsonval[j]) {

</>code
   9:              if (j == 0) {

</>code
  10:                  $("#tableHeader").append("<td id='h" + m + "'>" + i + "</td>");

</>code
  11:              }

</>code
  12:              $("#GridView1 tr:last").append("<td>" + jsonval[j][i] + "</td>");

</>code
  13:              m++;

</>code
  14:          }

</>code
  15:      }

</>code
  16:      $("#GridView1 tr:first").before("<tr id='newHeader'></tr>");

</>code
  17:      var temp = "";

</>code
  18:      var col = 1;

</>code
  19:      var trs = {}

</>code
  20:      $.each($("#tableHeader td"), function(i, td) {

</>code
  21:

</>code
  22:          if ($(td).text().indexOf('_') > 0) {

</>code
  23:              if (temp != "") {

</>code
  24:                  if (temp != $(td).text().split('_')[0]) {

</>code
  25:                      $("#GridView1 tr:first").append("<td colspan=" + col + ">" + temp + "</td>");

</>code
  26:                      col = 1;

</>code
  27:                  }

</>code
  28:                  else {

</>code
  29:                      col++;

</>code
  30:                  }

</>code
  31:              }

</>code
  32:              temp = $(td).text().split('_')[0];

</>code
  33:          }

</>code
  34:          else {

</>code
  35:              $("#GridView1 tr:first").append("<td rowspan=2>" + $("#h" + i).text() + "</td>");

</>code
  36:              $("#h" + i).remove();

</>code
  37:          }

</>code
  38:          $(td).text($(td).text().split('_')[0]);

</>code
  39:      });

</>code
  40:      $("#GridView1 tr:first").append("<td colspan=" + col + ">" + temp + "</td>");

</>code
  41:

</>code
  42:  });

</>code
  43:  });

</>code
  44:

</>code
  45:      </script>

</>code
  46:

</>code
  47:      <table border=1 id="GridView1">

</>code
  48:          <tr id="tableHeader">

</>code
  49:

</>code
  50:          </tr>

</>code
  51:

</>code
  52:      </table>

效果:

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

jquery

如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！点击进入论坛

您可能感兴趣的文章:

发表评论 (872人查看，0条评论): 请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。

昵称：

最新评论

------分隔线----------------------------

大家感兴趣的内容

利用jquery 实现动态多表头Grid

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

您可能感兴趣的文章:

公司信息

快速入口

其它栏目

业务咨询