接下去是数据源。那是一个URL的代办。Wijmo会在这些URL上做一个GET操作以获取新闻。那里dynamic根本字告诉Wijmo,服务器会接受排序,过滤以及分页请求。要是它被装置为false或者根本都没有安装过,Wijmo不会发送我们以前提到的伏乞参数。Reader告诉Wijmo怎么着诠释多少,并且赢得行数,之后是使用darareader。

至于排序,你可能已经被巨复杂的IF..ELSE表明式折磨得筋疲力竭。所有这一个逻辑仅仅是为了认清大家要依照哪一列举办排序以及按照何种措施(升序或者降序)举办排列,同时接纳LINQ过滤。那一个调用同时也使用了Skip()以及Take()技术拓展分页。

最后一个调用是真的的创始WijGrid。那和您此前已经看过的尚未怎么两样。唯一使得服务器收集数据的设置就是datasource。

 

 

 

至于数据,我使用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的布置以以便利用那几个新装置。

$(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

});

});

 

 

让大家一行一行的看一看那几个代码都作了些什么,因为她的确做了无数事务!最初的六行抽取了Wijmo需求发送的Request参数。因为很有可能那个值为空,一点点的参数检查逻辑是必须的。

从using表明式伊始,大家使用Entity
Framework打开一个到我们数据库的链接。大家应用延缓加载的想法对创立结构化查询,因而和SQL服务器的相互唯有一回。第三次询问创造对数据库中装有相册的查询。获取所有行的个数是必须的。Wijmo会使用那个结果判断分页须求。

最终,你或许注意到了本人还不曾给出AlbumReult以及WijmoGridResult的概念。以下是这一个类的代码:

在此前的一篇小说中,我们谈论了怎么添加一大堆的超赞的效用到一个正经的HTML表,并把它转换成一个“grid”表格。前几天自家想要做的事情是向您出示怎么样将这几个职能转到服务器。

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; }

}

客户端

服务器

经过利用服务器做多量的“苦力活儿”,大家得以向大家的最后用户提供更为百发百中的用户体验。什么苦力活要交给服务器呢?假若你有一百万行的数据集,那几个数量即便发送到客户端,然后再拓展排序/分页/过滤,那会是十分可观的一堆流量。不过只要大家需要服务器在发送数据到客户端以前实施排序/分页/过滤,我们得以长足的滑坡客户端的费用。

在最初叶,大家打算声多美滋(Dumex)个新的datareader,用来读取来自服务器的JSON数据。它将告诉Wijmo如何将JSON属性映射到表格的列。

 

相关文章

网站地图xml地图