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

你可能感兴趣的:(checkbox)