Jquery-EasyUI学习~
为了回顾，简单记录下EasyUI如何使用：
先来张效果图:
这张图是从后台获取数据，然后进行展示的。
我这里利用的是EF-MVC.
先说下View视图里面的HTML代码是如何写的:
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript">
$(function () {
var editRow = undefined;
$("#tb1").datagrid({
title: "用户列表",
width: 700,
height: 300,
loadMsg: '正在加载用户信息...',
singleSelect: false,
fitColumns: true,
striped: true,
url: "/RYJ/Index1",
singleSelect: true,
pagination: true,
rownumbers: true,
pageSize: 5,
pageList: [5, 10, 15],
columns: [
[
{ title: "编号", field: "id", allgn: "center", width: 80 },
{ title: "姓名", field: "stuName", allgn: "center", width: 80 },
{ title: "年龄", field: "stuAge", allgn: "center", width: 80 },
{ title: "性别", field: "stuSex", allgn: "center", width: 80 },
]
],
//在数据加载成功的时候触发。
})
})
</script>
@Html.ActionLink("添加","Create","RYJ")
<table id="tb1"></table>
前后台根据 field后面的信息来匹配,比如前台field: "id"，后台传值的要定义id属性。public int id{get;set;} 然后赋值id=1 然后弄成json格式传递给前台。
再说下Controller控制器是如何传值的:
public ActionResult Index1()
{
return View();
}
[HttpPost]
public ActionResult Index1(Stu s)
{
int pageIndex=string.IsNullOrEmpty(Request["page"])?1:int.Parse(Request["page"]);
int pageSize=Request["rows"]==null?5:int.Parse(Request["rows"]);
int total = context.Set<Stu>().Count();
var rows = context.Set<Stu>()
.OrderBy(c => c.id)
.Skip((pageIndex - 1) * pageSize)
.Take(pageSize);
//这里必须返回的是total和rows
return Json(new { total,rows},JsonRequestBehavior.AllowGet);
}
在使用时是需要添加引用的，但是我们看到我上面并没添加，因为我把它定义成了全局引用。看下图
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<link href="~/Content/easyUI/themes/bootstrap/easyui.css" rel="stylesheet" />
<link href="~/Content/easyUI/icon.css" rel="stylesheet" />
<script src="~/Scripts/jquery.min.js"></script>
<script src="~/Content/easyUI/jquery.easyui.min.js"></script>
</head>
<body>
@RenderBody()
</body>
</html>
