Ext.net 显示CheckBox的TreeGrid

　在Ext.net Version 1.5（http://examples1.ext.net/）中，当需要展示具有层级关系而且具有多个属性的数据集合的时候，TreeGrid是一个不错的选择。但是这该版本中的TreeGrid并不像TreePanel一样提供了CheckBox在UI界面中，因此即使你在后台设置了TreeNode的Checked属性，仍然不会看到有CheckBox在树的节点中显示。但是我们需要这个功能，怎么办呢？查阅了很多资料，看到Ext.Net Forums上有一些人也遇到了相似的问题，但是在该版本中要实现该功能他们对TreeGrid进行了重构，修改了extjs中treegrid的js文件。。。这里不详细说明你，需要的自己去查阅。因为这里我要介绍另外一个方法来实现该功能。

　　如何实现呢，答案是使用Xtemplate。对就是它！我们知道ext.net提供了控件的Xtemplate模板来修改控件的内部实现，因此我们可以通过实现为每个TreeGrid的节点显示一个checkbox。下面给出代码样例： 

TreeGrid with XTemplate 
 1   <ext:TreeGrid ID="TG" runat="server" Title="TreeGrid" EnableDD="true" Region="Center"> 
 2                 <Columns>
 3                     <ext:TreeGridColumn Width="150" Header="选择" Align="Left">
 4                         <XTemplate ID="XTemplate" runat="server">
 5                             <Html>
 6                                 <tpl for="."> 
 7                                    <tpl if="ShowCheckBox=='True'"> 
 8                                        <input type="checkbox" id="{id}" onchange="TreeCheckedChanged(this)"  />  
 9                                    </tpl>  
10                                    <lable>{Name}</lable>
11                                 </tpl>
12                             </Html>
13                             <Functions>
14                                 <ext:JFunction Name="TreeCheckedChanged" />
15                             </Functions>
16                         </XTemplate>
17                     </ext:TreeGridColumn>
18                     <ext:TreeGridColumn Width="150" Header="年龄" DataIndex="Age" />
19                     <ext:TreeGridColumn Width="150" Header="性别" DataIndex="Sex" />
20                     <ext:TreeGridColumn Width="150" Header="备注" DataIndex="Remark" />
21                 </Columns>
22                 <Root>
23                     <ext:AsyncTreeNode NodeID="root" Text="root" Expandable="True">
24                     </ext:AsyncTreeNode>
25                 </Root>
26                 <Loader>
27                     <ext:TreeLoader DataUrl="/Home/LoadNodes/">
28                         <BaseParams>
29                             <ext:Parameter Name="id" Value="node.id" Mode="Raw" />
30                             <ext:Parameter Name="pId" Value="node.attributes.Name" Mode="Raw" />
31                         </BaseParams>
32                     </ext:TreeLoader>
33                 </Loader>
34                 <SelectionModel>
35                     <ext:DefaultSelectionModel runat="server">
36                     </ext:DefaultSelectionModel>
37                 </SelectionModel>
38             </ext:TreeGrid>

关于代码中的Loader的具体后台实现可以参见前面一篇关于TreeGrid加载后台数据的文章Ext.net TreeGrid。

posted @ 2012-11-21 23:23  rpoplar  阅读(724)  评论(0)  编辑  收藏  举报