zoukankan      html  css  js  c++  java
  • 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: "用户列表",
    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>

      

  • 相关阅读:
    JQ优化性能
    CSS3 Filter的十种特效
    立即执行函数: (function ( ){...})( ) 与 (function ( ){...}( )) 有什么区别?
    EasyUI DateBox
    Java8接口的默认方法
    MySQL -- insert ignore语句
    建数据库表经验总结
    IntelliJ IDEA 实用快捷键
    从 Java 代码到 CPU 指令
    使用ImmutableMap简化语句
  • 原文地址:https://www.cnblogs.com/shuai7boy/p/5483768.html
Copyright © 2011-2022 走看看