分享
 
 
 

分享:Hierarchy Datagrid 解决方案

王朝asp·作者佚名  2006-01-09
窄屏简体版  字體: |||超大  

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>, <tr>, <td>这些来控制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的<body> 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<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;

}

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有