当前的平等篇稿子被,我们讨论了怎样补充加同老大堆的超赞的效用到一个正规的HTML表,并把她换成一个“grid”表格。今天自想使做的事务是于而显得什么以这些成效改变到服务器。

通过应用服务器做大量底“苦力活”,我们得向我们的最终用户提供越来越得心应手的用户体验。什么苦力活要交给服务器也?假而你生一百万实践之数据集,这些多少要发送到客户端,然后再次拓展排序/分页/过滤,那会是相当可观的同样积聚流量。但是若我们渴求服务器在发送数据到客户端之前实施排序/分页/过滤,我们得以快捷的回落客户端的开。

 

服务器

关于数据,我使用Chinook数据库。它快快,容易设置,同时可为自家的例证提供特别好之多少。我于例子中使到了ASP.NET
MVC3,并且我们惟有兑现排序和过滤。

public JsonResult GetAlbumList()

{

int pageSize = Request.Params["paging[pageSize]"] != null ? Convert.ToInt32(Request.Params["paging[pageSize]"]) : 0;

int pageIndex = Request.Params["paging[pageIndex]"] != null ? Convert.ToInt32(Request.Params["paging[pageIndex]"]) : 0;

string sortColumn = Request.Params["sorting[0][dataKey]"];

string sortDirection = Request.Params["sorting[0][sortDirection]"];

if (string.IsNullOrEmpty(sortColumn)) sortColumn = String.Empty;

if (string.IsNullOrEmpty(sortDirection)) sortDirection = String.Empty;

using (var entity = new ChinookEntities())

{

var allAlbums = from al in entity.Albums

join ar in entity.Artists on al.ArtistId equals ar.ArtistId

select new AlbumResult()

{

AlbumName = al.Title,

ArtistName = ar.Name

};

var totalRowCount = allAlbums.Count();

if (pageSize == 0)

pageSize = totalRowCount;

if (sortColumn.ToLower() != "album")

allAlbums = sortDirection.ToLower() == "descending"

? allAlbums.OrderByDescending(p => p.ArtistName).Skip(pageSize*pageIndex).Take(pageSize)

: allAlbums.OrderBy(p => p.ArtistName).Skip(pageSize*pageIndex).Take(pageSize);

else

allAlbums = sortDirection.ToLower() == "descending"

? allAlbums.OrderByDescending(p => p.AlbumName).Skip(pageSize*pageIndex).Take(pageSize)

: allAlbums.OrderBy(p => p.AlbumName).Skip(pageSize*pageIndex).Take(pageSize);

var result = new WijmoGridResult { Items = allAlbums.ToList(), TotalRowCount = totalRowCount };

return Json(result, JsonRequestBehavior.AllowGet);

}

}

 

 

让咱们一行一行的羁押同样收押这些代码都犯了把什么,因为他当真做了森政工!最初的六履抽取了Wijmo需要发送的Request参数。因为大有或这些值为空,一点点底参数检查逻辑是必的。

打using表达式开始,我们运用Entity
Framework打开一个交我们数据库的链接。我们用延缓加载的想法对创建结构化查询,因此与SQL服务器的竞相只生同等糟。第一赖询问创建对数据库中所有相册的查询。获取所有行的个数是必的。Wijmo会使用是结果判断分页需求。

至于排序,你可能就被大量复杂的IF..ELSE表达式折磨得疲惫不堪。所有这些逻辑仅仅是以判定我们要基于哪一样排列进行排序和随何种措施(升序或者降序)进行排列,同时利用LINQ过滤。这些调用同时为以了Skip()以及Take()技术拓展分页。

末尾,你或注意到了我还无让出AlbumReult以及WijmoGridResult的定义。以下是这些看似的代码:

public class AlbumResult

{

public string AlbumName { get; set; }

public string ArtistName { get; set; }

}

public class WijmoGridResult

{

public List Items { get; set; }

public int TotalRowCount { get; set; }

}

 

 

客户端

而今劳动器端已经布置好了,我们要转移一些Wijmo的配置为以便使这些新装置。

$(document).ready(function () {

var dataReader = new wijarrayreader([

{ name: "Artist", mapping: "ArtistName" },

{ name: "Album", mapping: "AlbumName" }

]);

var dataSource = new wijdatasource({

proxy: new wijhttpproxy({

url: "@Url.Action("GetAlbumList")",

dataType: "json"

}),

dynamic: true,

reader: {

read: function (datasource) {

var count = datasource.data.TotalRowCount;

datasource.data = datasource.data.Items;

datasource.data.totalRows = count;

dataReader.read(datasource);

}

}

});

$("#remoteTable").wijgrid({

pageSize: 15,

data: dataSource,

allowPaging: true,

allowSorting: true

});

});

 

 

于极度初步,我们打算声明一个新的datareader,用来读取来自服务器的JSON数据。它用喻Wijmo如何以JSON属性映射到表格的排。

连下去是数据源。这是一个URL的代理。Wijmo会在斯URL上举行一个GETjQuery操作为获取信息。这里dynamic一言九鼎字告诉Wijmo,服务器会接受排序,过滤与分页请求。如果她于装置也false或者根本还尚未安装过,Wijmo不会发送我们事先提到的请参数。Reader告诉Wijmo如何解释多少,并且得到行数,之后是采取darareader。

 

最后一个调用是真正的创立WijGrid。这同您前面就看罢之远非呀不同。唯一让服务器收集数据的安就是datasource。

相关文章

网站地图xml地图