AJAX ControlToolkit学习日志-PagingBulletedListExtender(19)

         PagingBulletedListExtender控件用于对BulletedList服务端控件进行扩展，使其具有排序的功能。

下面看一个示例：

1)在VS2005中新建一个ASP.NET AJAX-Enabled Web Project工程项目，命名为PagingBulletedListExtender1。

2)在页面上添加一个BulletedList控件，并对其添加一些ListItem。

3)然后在页面上拖放一个PagingBulletedListExtender控件，提供BulletedList排序的功能。

代码如下：

1        <cc1:PagingBulletedListExtender ID="PagingBulletedListExtender1" BehaviorID="PagingBulletedListBehavior1" TargetControlID="BulletedList1" ClientSort="true" IndexSize="1" MaxItemPerPage="20" runat="server">
2        </cc1:PagingBulletedListExtender>
3

属性说明：

      BehaviorID：该控件在客户端的标识号。
      TargetControlID：该控件要关联的BulletedList控件。
      ClientSort：该控件是否允许BulletedList在客户端进行排序。
      IndexSize：在BulletedList中索引项的字符个数。
      MaxItemPerPage：BulletedList中显示的每页的最大项数。
      
4)然后再添加一些Radio和CheckBox，对控件进行不同的控制。

代码如下：

 1        <input id="radioOption1" name="radioOption" type="radio" 
 2            value="1" onclick="onChangeSelectOption()" />
 3        <label for="radioOption1">Index size 1</label>
 4        <input id="radioOption3" name="radioOption" type="radio" 
 5            value="3" onclick="onChangeSelectOption()" />
 6        <label for="radioOption3">10 Items per page</label><br />
 7        <input id="radioOption2" name="radioOption" type="radio" 
 8            value="2" onclick="onChangeSelectOption()" />
 9        <label for="radioOption2">Index size 2</label>
10        <input id="radioOption4" name="radioOption" type="radio" 
11            value="4" onclick="onChangeSelectOption()" />
12        <label for="radioOption4">20 Items per page</label> <br />
13        <input type="checkbox" id="clientSort" 
14            onclick="onChangeClientSort()" />
15        <label for="clientSort">Sort</label>

5)最后在页面中添加客户端的脚本代码，用于相应客户端的操作。

代码如下：

 1        var b1;
 2        
 3        function pageLoad()
 4        {
 5            b1=$find('PagingBulletedListBehavior1');
 6            if(b1.get_IndexSize()==1)   $get('radioOption1').checked=true;
 7            if(b1.get_IndexSize()==2)   $get('radioOption2').checked=true;
 8            if(b1.get_MaxItemPerPage()==10)   $get('radioOption3').checked=true;
 9            if(b1.get_MaxItemPerPage()==20)   $get('radioOption4').checked=true;
10            $get('clientSort').checked=b1.get_ClientSort();
11        }
12        
13        function onChangeSelectOption()
14        {
15            if($get('radioOption1').checked)
16            {
17                b1.set_IndexSize(1);
18                b1.set_MaxItemPerPage(null);
19            }
20            if($get('radioOption2').checked)
21            {
22                b1.set_IndexSize(2);
23                b1.set_MaxItemPerPage(null);
24            }
25            if($get('radioOption3').checked)
26            {
27                b1.set_MaxItemPerPage(10);
28            }
29            if($get('radioOption4').checked)
30            {
31                b1.set_MaxItemPerPage(20);
32            }
33        }
34        
35        function onChangeClientSort()
36        {
37            b1.set_ClientSort($get('clientSort').checked);
38        }

6)按下CTRL+F5,在浏览器中查看效果。

效果图如下：