Atlas SortBehavior实现客户端排序-技术开发专区

Atlas SortBehavior实现客户端排序

作者：佚名编辑：晓徐 2006-07-18 20:21

【IT168 技术文档】

    为您的列表添加排序功能将是非常酷的。一些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 
using System;
using System.Collections;
using System.Collections.Generic;
using System.ComponentModel;
using System.IO;
using System.Web;
using System.Web.Caching;
using System.Web.Services;
using System.Web.Services.Protocols;
using Microsoft.Web.Services;

//
// For simplicity this example demonstraes storing and manipulating
// the data objects in memory. A database can also be used.
// 

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class SampleDataService : DataService
...{
static List<Entry> _data;
static int _nextId;
static object _dataLock = new object();

private static List<Entry> Data
...{
get
...{
if (_data == null)
...{
lock (_dataLock)
...{
if (_data == null)
...{
_data = new List<Entry>();
_data.Add(new Entry(0, "Dflying Chen", "A small piece of cake"));
_data.Add(new Entry(1, "Bill Gates", "Chairman & Chief Software Architect"));
_data.Add(new Entry(2, "Scott Guthrie", "General Manager"));
_data.Add(new Entry(3, "Ray Ozzie", "CTO"));
_data.Add(new Entry(4, "Steve Ballmer", "CEO"));
_nextId = 3;
}
}
}
return _data;
}
}

[DataObjectMethod(DataObjectMethodType.Delete)]
public void DeleteRow(int id)
...{
foreach (Entry row in _data)
...{
if (row.Id == id)
...{
lock (_dataLock)
...{
_data.Remove(row);
}
break;
}
}
}

[DataObjectMethod(DataObjectMethodType.Select)]
public Entry[] SelectRows()
...{
return SampleDataService.Data.ToArray();
}

[DataObjectMethod(DataObjectMethodType.Insert)]
public Entry InsertRow(string name, string description)
...{
Entry newRow;
lock (_dataLock)
...{
newRow = new Entry(_nextId++, name, description);
_data.Add(newRow);
}
return newRow;
}

[DataObjectMethod(DataObjectMethodType.Update)]
public void UpdateRow(Entry updateRow)
...{
foreach (Entry row in _data)
...{
if (row.Id == updateRow.Id)
...{
row.Name = updateRow.Name;
row.Title = updateRow.Title;
break;
}
}
}
}

public class Entry
...{
private string _name;
private string _title;
private int _id;

[DataObjectField(true, true)]
public int Id
...{
get ...{ return _id; }
set ...{ _id = value; }
}

[DataObjectField(false)]
[DefaultValue("New row")]
public string Name
...{
get ...{ return _name; }
set ...{ _name = value; }
}

[DataObjectField(false)]
[DefaultValue("")]
public string Title
...{
get ...{ return _title; }
set ...{ _title = value; }
}

public Entry()
...{
_id = -1;
}

public Entry(int id, string name, string description)
...{
_id = id;
_name = name;
_title = description;
}
}

    然后，在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><a href="#" id="sortId">ID</a></td>
<td><a href="#" id="sortName">Name</a></td>
<td><a 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排序——降序：

关注我们