为了回顾,简单记录下EasyUI如何使用:
先来张效果图:
这张图是从后台获取数据,然后进行展示的。
我这里利用的是EF-MVC.
先说下View视图里面的HTML代码是如何写的:
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript">
$(function () {
var editRow = undefined;
$("#tb1").datagrid({
title: "用户列表",
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", 80 },
{ title: "姓名", field: "stuName", allgn: "center", 80 },
{ title: "年龄", field: "stuAge", allgn: "center", 80 },
{ title: "性别", field: "stuSex", allgn: "center", 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>