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: "用户列表",
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学习~的更多相关文章
- jQuery EasyUI学习资源汇总
jQuery EasyUI学习资源汇总 EasyUi – 1.入门 EasyUi – 2.布局Layout + 3.登录界面 EasyUi – 4.datwagrid 学习Jquery EasyUI的 ...
- JQuery EasyUI学习框架
前言 前端技术,新项目的开发拟使用EasyUI框架(基于EasyUI丰富UI组件库),项目负责人的提示EasyUI分配给我这个任务.发展前,我需要这对于一个新手EasyUI框架学习一些基本的入门.记录 ...
- jQuery EasyUI学习二
1. 课程介绍 1. Datagrid组件(掌握) 2. Dialog.form组件(掌握) 3. Layout.Tabs;(掌握) Datagrid组件 2.1. 部署运行pss启动无错 ...
- JQuery EasyUI学习笔记
转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6690888.html 简介与准备 jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用 ...
- JQuery EasyUI学习记录(三)
1.jQuery EasyUI messager使用方式 1.1 alert方法 $(function(){ //1.alert方法---提示框 $.messager.alert("标题&q ...
- JQuery EasyUI学习记录(二)
1.jquery easyUI动态添加选项卡(查看jquery easyUI手册) 1.1 用于动态添加一个选项卡 1.1.1 选中指定的选项卡和判断某个选项卡是否存在 测试代码: <a id= ...
- JQuery EasyUI学习记录(一)
1.主页设计(JQuery EasyUI插件) 下载easyUI开发包: 将easyUI资源文件导入页面中: <link rel="stylesheet" type=&quo ...
- jQuery EasyUI学习一
1. jQuery EasyUI介绍 1. 创建组件的方式和原理(掌握) 2. 组件三要素(掌握) 3. Panel.LinkButton.上下文菜单;(掌握) 简介 2.1. jQuer ...
- JQuery EasyUI学习记录(五)
1.datagrid使用方法(重要) 1.1将静态html渲染为datagrid样式 <!--方式一: 将静态html渲染为datagrid样式 --> <table class=& ...
- JQuery EasyUI学习记录(四)
1.EasyUI中的validatebox使用 提供的校验规则: 1.非空校验required="required" 2.使用validType指定 email: 正则表达式匹配电 ...
随机推荐
- java charset detector
https://code.google.com/p/juniversalchardet/downloads/list java移植mozilla的编码自动检测库(源码为c++),准确率高. 通过svn ...
- 自动化测试selenium+java 第一章
selenium元素的定位以及操作 1. 元素的定位 Selenium 自动化,我们需要做的最基本的事情就是在页面找到元素并通过脚本程 序去操作这个元素,实现模拟人工操作.我们有多种定位元素的方式可以 ...
- java 20 -3 递归之删除特定目录下的特定文件
/* 需求:删除H:\demo目录下的带内容的文件 分析: A:封装该目录 B:获取该目录下所有的文件或文件夹的File数组 C:遍历该File数组,获取每一个File对象 D:判断所遍历的FIle对 ...
- 准备写一些读书笔记,最近在填坑 SQL学习指南 Spring in Action effective Java
把一些读书的理解通过白板图的形式展示出来,加深自己的认识, 因为目前没有工程项目练手,暂时在学习中把这些知识深化认识一下
- 【MFC】WM_GETMINMAXINFO 设置无边框窗口最大花不遮挡任务栏
LRESULT OnGetMinMaxInfo( UINT /*uMsg*/, WPARAM /*wParam*/, LPARAM lParam, BOOL& /*bHandled*/ ) { ...
- VSFTPD配置TLS/SSL
今天在OSX上配置Coda2 + Xampp的时候,发现FTP老是不连接到服务器上面,导致每次更改了文件都需要使用scp命令上传到服务器.如果一个文件还好,文件和文件夹一多就得使用rp参数全部提交,再 ...
- 微软职位内部推荐-Principal Development Lead
微软近期Open的职位: Job Title: Principal Development Lead Work Location: Suzhou, China This is a once in a ...
- Windows和Linux上用C与Lua交互
Windos2010编译lua的方法: http://blog.csdn.net/appletreesujie/article/details/12065369 Linux编译lua的方法: make ...
- python中class 的一行式构造器
好处:避免类初始化时大量重复的赋值语句 用到了魔法__dict__ # 一行式构造器 class Test(): # 初始化 def __init__(self, a, b, c=2, d=3, e= ...
- 在opencv3中实现机器学习之:利用逻辑斯谛回归(logistic regression)分类
logistic regression,注意这个单词logistic ,并不是逻辑(logic)的意思,音译过来应该是逻辑斯谛回归,或者直接叫logistic回归,并不是什么逻辑回归.大部分人都叫成逻 ...