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

 

前后台依据 田野前面包车型大巴音信来协作,比如前台田野:
“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);
        }

在利用时是内需添加引用的,可是大家看到自个儿上面并没增长,因为自个儿把它定义成了全局引用。看下图

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>
EasyUI,<body>
@RenderBody()
</body>
</html>