Username: Password:

分享:Hierarchy Datagrid 解决方案
来源:Blog作者:Blog 发布时间:2008-04-15 02:50:21

  DataGrid是很好用的.net web控件,TreeView也是,但是,尚无一个成熟的控件能够综合两者的长处以表达结构更复杂的数据。

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

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

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

    3、这个实现一个不好的地方是,比较难以实现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,还能够利用Table Object Model,直接找到row, cell等,进行增删修改。

  于是,假如我绑定生成这样的表格:
      李 强  天津 天津 数学 80
      李 强  天津 天津 语文 90
      李 强  天津 天津 音乐 70
      李 强  天津 天津 体育 60
      王大明  河北 保定 数学 90
      王大明  河北 保定 语文 80
      陈晓刚  湖南 长沙 数学 90

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

我的解决方案如下:

1、在.aspx中引用fcnAthosColumnMerge函数

2、在.aspx的 tag中声明onload="fcnAthosTableMerge(’strMyTableName’);"

3、然后声明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行。

这样上面表格合并后就是
    ———————————————————————
    |            |数学 | 80 |
    | 李 强  天津 天津 |语文 | 90 |
    |            |音乐 | 70 |
    |            |体育 | 60 |
    ———————————————————————
    | 王大明  河北 保定 |数学 | 90 |
    |            |语文 | 80 |
    ———————————————————————
    | 陈晓刚  湖南 长沙 |数学 | 90 |
    ———————————————————————

这样做的好处是,别的部分,完万能够使用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=0;ii--)
       tRows[j].children[arrMergeCol[ii]].removeNode(true);
     i0 = i;
     
     for(ii=0;ii=0;ii--)
     tRows[j].children[arrMergeCol[ii]].removeNode(true);
   return;        
  }

喜欢本文,那就收藏到:

    Del.icio.us Google书签 Digg Live Bookmark Technorati Furl Yahoo书签 Facebook 百度搜藏 新浪ViVi 365Key网摘 天极网摘 和讯网摘 博拉网 POCO网摘 添加到饭否 QQ书签 Digbuzz我挖网
相关评论  我也要评论
还没有关于此文章的相关评论!
  • 昵称: (为空则显示guest)
  • 评论分数: ★ ★ ★★★ ★★★★ ★★★★★
  • 评论内容:(不能超过250字,需审核后才会公布,请自觉遵守互联网相关政策法规。