AJAX ControlToolkit學習日誌-PagingBulletedListExtender(19)

來源:互聯網
上載者:User
         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,在瀏覽器中查看效果。

如下:

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.