随笔-313  评论-12177  文章-1 

使用ASP.NET Atlas SortBehavior实现客户端排序

English Version: http://dflying.dflying.net/1/archive/128_sorting_your_list_using_aspnet_atlas_sortbehavior.html

 

在这个系列中,我将介绍一些Atlas Sys.UI.Data中较高级的控件,包括:

    1. Sys.UI.Data.ListView使用ASP.NET Atlas ListView控件显示列表数据
    2. Sys.UI.Data.ItemView使用ASP.NET Atlas ItemView控件显示集合中的单个数据
    3. Sys.UI.Data.DataNavigator使用 ASP.NET Atlas PageNavigator控件实现客户端分页导航 
    4. Sys.UI.Data.SortBehavior使用ASP.NET Atlas SortBehavior实现客户端排序
    5. Sys.UI.Data.XSLTView使用ASP.NET Atlas XSLTView控件用XSLT修饰并显示XML数据
    这篇是其中的第四篇:使用ASP.NET Atlas SortBehavior实现客户端排序

     

    为您的列表添加排序功能将是非常酷的。一些ASP.NET服务器控件,例如DataGrid,GridView等已经拥有了内建的排序功能。Atlas同样提供了Sys.UI.Data.SortBehavior Behavior(有关Atlas Behavior,请参考:在ASP.NET Atlas中创建自定义的Behavior),让您在客户端即可实现排序功能。

    SortBehavior将与DataView控件(请参考:Atlas命名空间Sys.Data下控件介绍——DataView和DataFilter)配合工作,它将通过设定DataView控件的sortDirection属性来实现排序功能。SortBehavior对象有如下属性:

    1. dataView:对某个DataView对象的引用,这个SortBehavior将把页面的排序操作应用到其上。您应该总是指定这个属性。
    2. sortColumn:DataView中某一列的列名,SortBehavior将根据这个列中的内容来进行排序。您应该总是指定这个属性。
    3. sortAscendingCssClass:触发排序的控件的CSS Class(升序时)。
    4. sortDescendingCssClass:触发排序的控件的CSS Class(降序时)。

    介绍到此为止,我们来看如下的示例程序。

    首先我们需要暴露一个Web Service以便Atlas页面使用。该Web Service将返回5个名人(除了我)的简介。下面为代码:

    Data Service

    然后,在ASPX页面中,我们需要考虑并定义如下三部分的内容:

    1. 一个ScriptManager控件,用来包含页面必须的Atlas Framework相关脚本文件。通常情况下,这也是每个Atlas页面必须包含的。
    2. 一个占位(place holder)的div(id为dataContents,见代码)。Atlas将会把渲染后的ListView放置于此。
    3. 一个隐藏的div,用来放置ListView的模版。

    下面是以上三部分内容的代码,关于ListView控件的模版,请参考我的这篇文章:使用ASP.NET Atlas ListView控件显示列表数据

    <!-- ScriptManager -->
    <atlas:ScriptManager runat="server" ID="scriptManager" />

    <!-- Element for ListView (container) -->
    <div id="dataContents">
    </div>

    <!-- Templates -->
    <div style="visibility: hidden; display: none">
        
    <div id="masterTemplate">
            
    <table border="1" cellpadding="3" style="width:30em;">
                
    <thead>
                    
    <tr>
                        
    <td><href="#" id="sortId">ID</a></td>
                        
    <td><href="#" id="sortName">Name</a></td>
                        
    <td><href="#" id="sortTitle">Title</a></td>
                    
    </tr>
                
    </thead>
                
    <tbody id="masterItemTemplateParent">
                    
    <tr id="masterItemTemplate">
                        
    <td><span id="masterId"></span></td>
                        
    <td><span id="masterName"></span></td>
                        
    <td><span id="masterTitle"></span></td>
                    
    </tr>
                
    </tbody>
            
    </table>
        
    </div>
    </div>

    最后该书写Atlas的XML脚本定义了,有如下四个部分:

    第一部分:Atlas客户端控件DataSource,用来从我们上面定义的Web Service中取得数据。

    <dataSource id="dataSource" autoLoad="true" serviceURL="SampleDataService.asmx" />

    第二部分:一个DataView控件(请参考:Atlas命名空间Sys.Data下控件介绍——DataView和DataFilter ),用来将第一部分中取得的数据排序。

    <dataView id="view">
        
    <bindings>
            
    <binding dataContext="dataSource" dataPath="data" property="data"/>
        
    </bindings>
    </dataView>

    第三部分:一个ListView控件(请参考: 使用ASP.NET Atlas ListView控件显示列表数据 ) , 用于显示排序后的数据。

    <listView id="dataContents" itemTemplateParentElementId="masterItemTemplateParent" >
        
    <bindings>
            
    <binding dataContext="view" dataPath="filteredData" property="data"/>
        
    </bindings>
        
    <layoutTemplate>
            
    <template layoutElement="masterTemplate"/>
        
    </layoutTemplate>
        
    <itemTemplate>
            
    <template layoutElement="masterItemTemplate">
                
    <label id="masterId">
                    
    <bindings>
                        
    <binding dataPath="Id" property="text"/>
                    
    </bindings>
                
    </label>
                
    <label id="masterName">
                    
    <bindings>
                        
    <binding dataPath="Name" property="text"/>
                    
    </bindings>
                
    </label>
                
    <label id="masterTitle">
                    
    <bindings>
                        
    <binding dataPath="Title" property="text"/>
                    
    </bindings>
                
    </label>
            
    </template>
        
    </itemTemplate>
    </listView>

    第四部分:三个包含SortBehavior behavior的Atlas控件,用来触发排序的操作。

    <control id="sortId">
        
    <behaviors>
            
    <sortBehavior dataView="view" sortColumn="Id"/>
        
    </behaviors>
    </control>
    <control id="sortName">
        
    <behaviors>
            
    <sortBehavior dataView="view" sortColumn="Name"/>
        
    </behaviors>
    </control>
    <control id="sortTitle">
        
    <behaviors>
            
    <sortBehavior dataView="view" sortColumn="Title"/>
        
    </behaviors>
    </control>

    大功告成,打开浏览器测试一下吧:

    初始的顺序:


    点击Name,按照Name排序——升序:


    再次点击Name, 按照Name排序——降序:


    这个DEMO的源文件可以在此下载:http://files.cnblogs.com/dflying/SortBehaviorDemo.zip

    posted on 2006-04-19 16:40 Dflying Chen 阅读(...) 评论(...) 编辑 收藏