- 看见人家项目中用到了Kendo Grid组件，感觉不错，于是就没有压制住自己内心的好奇心！嘿嘿，咱们开始吧，步骤很简单，理解起来也很容易。
- 首先我们创建一个空的ASP.NET MVC 4 Web 应用程序，如下图 1所示：
图 1 新建MVC项目
2. 接下来通过NuGet包管理工具来安装下面两个包：
3. 然后开始我们的编码工作：
-》首先是HomeController.cs文件：
public class HomeController : Controller
{
//
// GET: /Home/ public ActionResult Index()
{
return View();
}
public JsonResult Grid(KendoGridRequest request, string keywd)
{
var result = SimMemberInfo.SimuDataStore.Where(o => o.UserName.Contains(keywd));
return Json(new KendoGrid<SimMemberInfo>(request, result));
}
}-》然后在Models文件下面新建一个SimMemberInfo类，具体代码如下：
public class SimMemberInfo
{
public string UserNo; //会员编号
public string UserName; //会员名称
public DateTime RegDate; //注册日期
public int Points; //累积点数
//模拟数据源
public static List<SimMemberInfo> SimuDataStore = null; static SimMemberInfo()
{
Random rnd = new Random();
//借用具名颜色名称来产生随机数据
string[] colorNames = typeof(Color)
.GetProperties(BindingFlags.Static | BindingFlags.Public)
.Select(o => o.Name).ToArray();
SimuDataStore =
colorNames
.Select(cn => new SimMemberInfo()
{
UserNo = string.Format("C{0:00000}", rnd.Next()),
UserName = cn,
RegDate = DateTime.Today.AddDays(-rnd.Next()),
Points = rnd.Next()
}).ToList();
}
}-》Home控制器下面的Index action对应的视图：Index.cshtml文件：
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section Scripts
{
<style>
body {
font-size: 9pt;
} #dvGrid {
width: 1024px;
} span.hi-lite {
color: red;
} #dvGrid th.k-header {
text-align: center;
}
</style>
<script> $(function () {
//建立数据源对象
var dataSrc = new kendo.data.DataSource({
transport: {
read: {
//以下其实就是$.ajax的参数
type: "POST",
url: "/Home/Grid",
dataType: "json",
data: {
//额外传至后方的参数
keywd: function () {
return $("#tKeyword").val();
}
}
}
},
schema: {
//取出数据数组
data: function (d) { return d.data; },
//取出数据总笔数(计算页数用)
total: function (d) { return d.total; }
},
pageSize: 10,
serverPaging: true,
serverSorting: true
});
//JSON日期转换
var dateRegExp = /^\/Date\((.*?)\)\/$/;
window.toDate = function (value) {
var date = dateRegExp.exec(value);
return new Date(parseInt(date[1]));
}
$("#dvGrid").kendoGrid({
dataSource: dataSrc,
columns: [
{ field: "UserNo", title: "会员编号" },
{
field: "UserName", title: "会员名称",
template: '#= "<span class=\\"u-name\\">" + UserName + "</span>" #'
},
{
field: "RegDate", title: "加入日期",
template: '#= kendo.toString(toDate(RegDate), "yyyy/MM/dd")#'
},
{ field: "Points", title: "累积点数" },
],
sortable: true,
pageable: true,
dataBound: function () {
//AJAX数据Bind完成后触发
var kw = $("#tKeyword").val();
//若有设关键词，做Highlight处理
if (kw.length > 0) {
var re = new RegExp(kw, "g");
$(".u-name").each(function () {
var $td = $(this);
$td.html($td.text()
.replace(re, "<span class='hi-lite'>$&</span>"));
});
}
}
});
//按下查询钮
$("#bQuery").click(function () {
//要求数据源重新读取(并指定切至第一页)
dataSrc.read({ page: 1, skip: 0 });
//Grid重新显示数据
$("#dvGrid").data("kendoGrid").refresh();
});
});
</script>
}
<div style="padding: 10px;">
关键词:
<input id="tKeyword" /><input type="button" value="查询" id="bQuery" />
</div>
<div id="dvGrid">
</div>-》Views - Shared文件夹下面的_Layout.cshtml:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<link href="~/Content/kendo/2014.1.318/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2014.1.318/kendo.default.min.css" rel="stylesheet" />
</head>
<body>
@RenderBody() <script src="~/Scripts/kendo/2014.1.318/jquery.min.js"></script>
<script src="~/Scripts/kendo/2014.1.318/kendo.web.min.js"></script>
@RenderSection("scripts", required: false)
</body>
</html>这样我们的小练习就出来！我的项目文件结构图如下：
:: 代码下载：http://pan.baidu.com/s/1eRNd4Ts
参考文档：http://www.cnblogs.com/shanyou/archive/2012/06/22/2558609.html