AJAX ControlToolkit学习日志-PagingBulletedListExtender(19)
PagingBulletedListExtender控件用于对BulletedList服务端控件进行扩展,使其具有排序的功能。
下面看一个示例:
1)在VS2005中新建一个ASP.NET AJAX-Enabled Web Project工程项目,命名为PagingBulletedListExtender1。
2)在页面上添加一个BulletedList控件,并对其添加一些ListItem。
3)然后在页面上拖放一个PagingBulletedListExtender控件,提供BulletedList排序的功能。
代码如下:
属性说明:
BehaviorID:该控件在客户端的标识号。
TargetControlID:该控件要关联的BulletedList控件。
ClientSort:该控件是否允许BulletedList在客户端进行排序。
IndexSize:在BulletedList中索引项的字符个数。
MaxItemPerPage:BulletedList中显示的每页的最大项数。
4)然后再添加一些Radio和CheckBox,对控件进行不同的控制。
代码如下:
5)最后在页面中添加客户端的脚本代码,用于相应客户端的操作。
代码如下:
6)按下CTRL+F5,在浏览器中查看效果。
效果图如下:
![](https://www.cnblogs.com/images/cnblogs_com/qc1984326/PagingBulletedListExtender-1.GIF)
下面看一个示例:
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![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
属性说明:
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>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
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
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
19
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
20
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
21
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
22
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
23
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
24
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
25
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
26
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
27
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
28
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
29
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
30
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
31
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
32
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
33
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
34
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
35
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
36
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
37
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
38
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
6)按下CTRL+F5,在浏览器中查看效果。
效果图如下: