EasyUIJquery-EasyUI学习~

为了追忆,简单记录下EasyUI如何使用:

先行来张效果图:

EasyUI 1

当时张图是自从后台获取数据,然后开展亮的。

我此以的是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格式传递给前台。

 

更何况下ControllerEasyUI控制器是安传值的:

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

每当采取时凡得丰富引用的,但是咱看到自身点并无增长,因为自拿它们定义成了全局引用。看下图

EasyUI 2

代码如下:

<!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>