分享：Hierarchy Datagrid 解决方案（转）

最新推荐文章于 2020-03-08 09:53:47 发布

AllenTing

最新推荐文章于 2020-03-08 09:53:47 发布

阅读量1.2k

点赞数

分类专栏： ASP.NET 文章标签： datagrid hierarchy javascript table microsoft postback

ASP.NET 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

DataGrid是非常好用的.net web控件，TreeView也是，但是，尚无一个成熟的控件可以综合两者的优点以表达结构更复杂的数据。

　　Denis Bauer提供了一个他称为“Hierarchy Datagrid”的解决方案（http://www.denisbauer.com/ASPNETControls/HierarGrid.aspx），这个方案很好，但需要说明的是

　　　　１、这里实现的“Hierarchy Datagrid”与我们在vb 6中常用的MSHFlexGrid（即Microsoft Hierarchy Flexgrid）的结构并不是一样的。在MSHFlexGrid中，父层的项纵向并排，而子层跟在父层的右边（各层的各列称为一个Band）。而这个实现，子层是在父层的下面像TreeView一样展开，我觉得也许“TreeGrid”这样的名字更合适一些。

　　　　２、这里实现的“Hierarchy Datagrid”基本的思路是，每一层都做成一个User Control，而Denis Bauer的类，则提供了从Page到User Control的一个通用的调用方法。

　　　　３、这个实现一个不好的地方是，比较难以实现Edit的功能。因为父层只向子层传递DataSource，并不纪录子层中的状态，或者说子Datagrid的EditItemIndex。

　　SVG兄实现了一个TreeView，它基本像一个DataGrid，但最左一列像TreeView，可以动态的展开。他的思路是用javascript+xmlhttp读取数据，然后用javascript写左边的列。写左边的列的过程，类似于Treeview的htc文件生成列的方法。这个方法的缺点是自己要写的代码比较多，而且修改子层数据的时候，不能利用DataGrid已经实现的功能。

　　最近我的一个项目也提出了类似的要求，起初我是用Nested DataGrid做的，但是嵌套的各子层的DataGrid并不属于同一个DataGrid，他们各列之间无法对齐。后来突发奇想，实验了一个方法，成功了。

　　其实说穿了一点也不复杂。在msdn的文章“How to Build Tables Dynamically”（http://msdn.microsoft.com/workshop/author/tables/buildtables.asp）中已经介绍，相对于DOM(Document Object Model)，以<table>, <tr>, <td>这些来控制Table，还可以利用Table Object Model，直接找到row, cell等，进行增删修改。

　　于是，假如我绑定生成这样的表格：
　　　　　　李　强　　天津　天津　数学　８０
　　　　　　李　强　　天津　天津　语文　９０
　　　　　　李　强　　天津　天津　音乐　７０
　　　　　　李　强　　天津　天津　体育　６０
　　　　　　王大明　　河北　保定　数学　９０
　　　　　　王大明　　河北　保定　语文　８０
　　　　　　陈晓刚　　湖南　长沙　数学　９０

利用Table Object Model删去重复项，并适当设定重复项中保留下来的那一项的rowspan得值的话，Table中相同的Cell就Merge了。

我的解决方案如下：

１、在.aspx中引用fcnAthosColumnMerge函数

２、在.aspx的<body> tag中声明οnlοad="fcnAthosTableMerge('strMyTableName');"

３、然后声明javascript函数fcnAthosTableMerge(strTableName)，其中利用fcnAthosColumnMerge按列对表格进行合并就可以了。

例如上面的表格，可以写作：

function fcnAthosTableMerge(strTableName)
{
fcnAthosHtvgColumnMerge(strTableName, [0], [0, 1, 2], true, true, false);
}

其中[0]表示以第0列（下标从0开始）的值为依据进行合并，[0,1,2]表示若某几行第0列的值相同，则合并其第0，1，和2列。

参数中的三个true/false参数是表示表格是否有Header, Footer和Paging行。

这样上面表格合并后就是
　　　　———————————————————————
　　　　｜　　　　　　　　　　　　｜数学　｜　８０　｜
　　　　｜　李　强　　天津　天津　｜语文　｜　９０　｜
　　　　｜　　　　　　　　　　　　｜音乐　｜　７０　｜
　　　　｜　　　　　　　　　　　　｜体育　｜　６０　｜
　　　　———————————————————————
　　　　｜　王大明　　河北　保定　｜数学　｜　９０　｜
　　　　｜　　　　　　　　　　　　｜语文　｜　８０　｜
　　　　———————————————————————
　　　　｜　陈晓刚　　湖南　长沙　｜数学　｜　９０　｜
　　　　———————————————————————

这样做的好处是，别的部分，完全可以使用datagrid控件。Datagrid产生的table，在浏览器端被merge之后，postback的时候不受任何影响，于是利用datagrid来edit, update, insert数据就很方便了。

另外说明的是，fcnAthosTableMerge函数可以调用fcnAthosColumnMerge多次，但是merge的时候要从右往左的来。

附fcnAthosColumnMerge代码如下：

  function fcnAthosColumnMerge(strGridId, arrIndexCol, arrMergeCol, blHasHeader, blHasFooter, blHasPageLine)
  {
     var tbl = document.all[strGridId];
     var iH = 0;
     var iF = 0;
     
     if(blHasHeader == true) iH++;
     if(blHasFooter == true) iF++;
     if(blHasPageLine == true) iF++;

   tRows = tbl.children[0].children;
   i0 = iH;
   strKey = new Array(arrIndexCol.length);
   strPrevKey = new Array(arrIndexCol.length);
   
   for(ii=0; ii<arrIndexCol.length;ii++)
   {
    strKey[ii] = tRows[iH].children[arrIndexCol[ii]].innerText;
    strPrevKey[ii] = strKey[ii];
   }

   for(i=iH+1;i<tRows.length-iF;i++)
   {
    blEqual = true;
    for(ii=0; ii<arrIndexCol.length;ii++)
    {
     strKey[ii] = tRows[i].children[arrIndexCol[ii]].innerText;
     if(strKey[ii] != strPrevKey[ii]) 
      blEqual = false;
    }

    if(blEqual == false)
    {
     for(ii=0;ii<arrMergeCol.length;ii++)
      tRows[i0].children[arrMergeCol[ii]].rowSpan = i-i0;
     for( j=i0+1; j<i; j++)
      for(ii=arrMergeCol.length-1;ii>=0;ii--)
       tRows[j].children[arrMergeCol[ii]].removeNode(true);
     i0 = i;
     
     for(ii=0;ii<strKey.length;ii++)
      strPrevKey[ii] = strKey[ii];
    }
   }

   for(ii=0;ii<arrMergeCol.length;ii++)   
    tRows[i0].children[arrMergeCol[ii]].rowSpan = i-i0;

   for( j=i0+1; j<i; j++)
    for(ii=arrMergeCol.length-1;ii>=0;ii--)
     tRows[j].children[arrMergeCol[ii]].removeNode(true);

   return;        

  }