为了回顾，简单记录下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>

　　

Jquery-EasyUI学习~的更多相关文章

  1. jQuery EasyUI学习资源汇总

    jQuery EasyUI学习资源汇总 EasyUi – 1.入门 EasyUi – 2.布局Layout + 3.登录界面 EasyUi – 4.datwagrid 学习Jquery EasyUI的 ...

  2. JQuery EasyUI学习框架

    前言 前端技术,新项目的开发拟使用EasyUI框架(基于EasyUI丰富UI组件库),项目负责人的提示EasyUI分配给我这个任务.发展前,我需要这对于一个新手EasyUI框架学习一些基本的入门.记录 ...

  3. jQuery EasyUI学习二

    1.   课程介绍 1.  Datagrid组件(掌握) 2.  Dialog.form组件(掌握) 3. Layout.Tabs;(掌握) Datagrid组件 2.1.  部署运行pss启动无错 ...

  4. JQuery EasyUI学习笔记

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6690888.html  简介与准备 jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用 ...

  5. JQuery EasyUI学习记录（三）

    1.jQuery EasyUI messager使用方式 1.1 alert方法 $(function(){ //1.alert方法---提示框 $.messager.alert("标题&q ...

  6. JQuery EasyUI学习记录（二）

    1.jquery easyUI动态添加选项卡(查看jquery easyUI手册) 1.1 用于动态添加一个选项卡 1.1.1 选中指定的选项卡和判断某个选项卡是否存在 测试代码: <a id= ...

  7. JQuery EasyUI学习记录（一）

    1.主页设计(JQuery EasyUI插件) 下载easyUI开发包: 将easyUI资源文件导入页面中: <link rel="stylesheet" type=&quo ...

  8. jQuery EasyUI学习一

    1.   jQuery EasyUI介绍 1.  创建组件的方式和原理(掌握) 2.  组件三要素(掌握) 3.  Panel.LinkButton.上下文菜单;(掌握) 简介 2.1.  jQuer ...

  9. JQuery EasyUI学习记录（五）

    1.datagrid使用方法(重要) 1.1将静态html渲染为datagrid样式 <!--方式一: 将静态html渲染为datagrid样式 --> <table class=& ...

  10. JQuery EasyUI学习记录（四）

    1.EasyUI中的validatebox使用 提供的校验规则: 1.非空校验required="required" 2.使用validType指定 email: 正则表达式匹配电 ...

随机推荐

  1. VS2010 调试窗口一闪而过解决方法

    若此时进行的操作是编译(F5),可先运行程序(Ctrl+F5),若仍然一闪而过,用下面方法解决. 方法一: 1.要有头文件cstdlib,在程序最后写一句(return之前)添加:system(&qu ...

  2. iTOP-4412开发板低功耗高性能的开源硬件平台——上手评测

    iTOP-4412开发板现在比较热门的开发板,笔者近期入了一套.也推荐给初学ARM的朋友学习,4412开发板搭载三星Exynos四核处理器,配备1GB内存,4GB固态硬盘EMMC存储,兼具快速读取与超 ...

  3. 纯js和纯css+html制作的手风琴的效果

    一:纯css+html的手风琴效果 这种用css写的手风琴比较简单,主要是应用到css中的,transition属性. 代码如下: <!DOCTYPE HTML> <html> ...

  4. Eclipse 分屏显示同一个文件

    场景 : 某个类很大,可能有数千行.当你想要将类开头部分与中间或者靠后的部分进行对比时,请follow如下步骤: Window -> Editor -> Toggle Split Edit ...

  5. Linux下CGroup使用说明梳理

    CGroup 介绍CGroup 是 Control Groups 的缩写,是 Linux 内核提供的一种可以限制.记录.隔离进程组 (process groups) 所使用的物力资源 (如 cpu m ...

  6. center

    center标签对其包围的文本进行水平居中处理

  7. 课程3——程序结构关键字

    声明:本系列随笔主要用于记录c语言的常备知识点,不能保证所有知识正确性,欢迎大家阅读.学习.批评.指正!!你们的鼓励是我前进的动力.严禁用于私人目的.转载请注明出处:http://www.cnblog ...

  8. WPF数据绑定Binding(二)

    WPF数据绑定Binding(二) 1.UI控件直接的数据绑定 UI对象间的绑定,也是最基本的形式,通常是将源对象Source的某个属性值绑定 (拷贝) 到目标对象Destination的某个属性上. ...

  9. C语言 百炼成钢6

    //题目16:输入两个正整数m和n,求其最大公约数和最小公倍数. #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include< ...

  10. Spring中Bean的命名问题（id和name区别）及ref和idref之间的区别

    Spring中Bean的命名 1.每个Bean可以有一个id属性,并可以根据该id在IoC容器中查找该Bean,该id属性值必须在IoC容器中唯一: 2.可以不指定id属性,只指定全限定类名,如: & ...