参考:jQuery & jEasyUI Extensions
参考:基于MVC4+EasyUI的Web开发框架形成之旅--界面控件的使用
Index视图
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>DataGrid的使用示例</title>
<link href="~/Easyui/jquery-easyui/themes/default/easyui.css" rel="stylesheet" />
<link href="~/Easyui/jquery-easyui/themes/icon.css" rel="stylesheet" />
<link href="~/Easyui/jquery-easyui/demo/demo.css" rel="stylesheet" />
<script src="~/Easyui/jquery-easyui/jquery.min.js"></script>
<script src="~/Easyui/jquery-easyui/jquery.easyui.min.js"></script>
<script src="~/Easyui/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<style type="text/css">
.main {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #bebcbc;
border-bottom-color: #bebcbc;
border-bottom-style: solid;
border-bottom-width:1px;
}
.description {
width: 110Px;
height: 36px;
background-color: #F1F6FF;
border: 1px solid #bebcbc;
border-bottom-width: 0px;
border-right-width: 0px;
line-height: 36px;
padding-left: 12px;
font-family: 微软雅黑;
float: left;
}
.description.content {
background-color: #FAFCFF;
width: 160px;
}
.clearFix:after {
clear: both; /*添加清除浮动属性*/
display: block; /*将它设为块状元素*/
content: "."; /*这个块状元素的内容为一个 . 其实也可以不设,因为下面要隐藏掉它*/
visibility: hidden; /*将它隐藏掉*/
height: 0; /*将它高度设为0px*/
line-height: 0; /*将它行高设为0px;*/
}
</style>
</head>
<body>
<table id="dg"></table>
<div id="menu" class="easyui-menu">
<div οnclick="doAdd()">新增</div>
<div οnclick="doEdit()">编辑</div>
<div οnclick="doRemove()">删除</div>
</div>
@*closed="true" 的意思就是将这个元素隐藏起来。需要的时候用$("#DivAdd").dialog('open').dialog('setTitle', '添加信息');打开*@
<div id="DivAdd" class="easyui-dialog" style="width:650px;height:250px;padding:10px 20px"
closed="true" resizable="true" modal="true" data-options="iconCls: 'icon-add',buttons: '#dlg-buttons'">
<form id="formAdd" method="post" novalidate="novalidate">
<div class="main">
<div class="clearFix">
<div class="description">用户姓名:</div><div class="description content"><input type="text" name="Name" style="height:20px"></div>
<div class="description">年龄:</div><div class="description content"><input type="text" name="Age" style="height:21px"></div>
</div>
<div class="clearFix">
<div class="description">电话:</div><div class="description content"><input type="text" name="Phone" style="height:21px"></div>
<div class="description">邮箱:</div><div class="description content"><input type="text" name="Email" style="height:21px"></div>
</div>
<div class="clearFix">
<div class="description">更新时间:</div>
<div class="description content">
<input class="easyui-datebox" type="text" id="txtLastUpdated" name="txtLastUpdated" />
</div>
<div class="description">父节点:</div>
<div class="description content">
<select id="box" class="easyui-combobox" name="box"
style="width:150px;">
<option value="aaaa">电子商务</option>
<option value="bbbb">经济管理</option>
<option value="cccc">软件技术</option>
</select>
</div>
</div>
<div class="clearFix">
<div>
<div class="description">性别:</div>
<div class="description content">
<span>男</span> @Html.RadioButton("radio1", '男', true, new { @id = "male" })
<span> 女</span>@Html.RadioButton("radio1", '女', new { @id = "Female" })
</div>
</div>
<div class="description">爱好:</div>
<div class="description content">
<span>篮球</span> @Html.CheckBox("a")
<span>足球</span> @Html.CheckBox("a")
</div>
</div>
</div>
<div class="clearFix">
<div style="text-align:right; padding-top:10px">
<a href="javascript:void(0)" class="easyui-linkbutton" id="btnAddOK" iconcls="icon-ok" οnclick="btnAddOK()">确定</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" οnclick="javascript:$('#DivAdd').dialog('close')">关闭</a>
</div>
</div>
</form>
</div>
</body>
</html>
<script type="text/javascript">
var mySelectRow = undefined; //定义一个变量,将它的值设为undefined
$(function () {
$("#dg").datagrid({
title: "MyUsers",
width: 800,
height: 320,
iconCls: 'icon-search', //在标题前面加一个搜索图标
pagination: true,
pageList: [2, 5, 8, 10],
pageNumber: 1,
url: "/Home/GetData",
sortName: 'Age',
sortOrder: 'ASC',
toolbar: "#toolbar",
fitColumns: true, //设置每列的宽度自适应DataGrid设定的宽度。默认为false
columns: [[
{
title: '编号',
field: 'Id',
width: 100,
},
{
title: '姓名',
field: 'Name',
width: 100,
sortable: true,
},
{
title: '年龄',
field: 'Age',
width: 100,
},
{
title: '电话',
field: 'Phone',
width: 100,
},
{
title: '邮箱',
field: 'Email',
width: 100,
},
]],
//在鼠标右击一行记录的时候触发
onRowContextMenu: function (e, rowIndex, rowData) {
e.preventDefault();//当鼠标在DataGrid里面的时候,取消右键的默认行为(即:鼠标右键的时候不弹出默认的菜单)
if (mySelectRow != undefined) {
$("#dg").datagrid("unselectRow", mySelectRow); //取消这条选中行
mySelectRow = undefined;
}
if (mySelectRow == undefined) {
$("#dg").datagrid("selectRow", rowIndex); //将右键的这一行设为选中行
mySelectRow = rowIndex;
}
$("#menu").menu('show', { //显示菜单
left: e.pageX,
top: e.pageY,
});
},
})
})
function doAdd() {
$("#DivAdd").dialog('open').dialog('setTitle', '添加信息');
}
function btnAddOK() {
var jsonData = $("#formAdd").serialize(); //序列化formAdd表单。
$.ajax({
url: "/Home/AddOrEditData", //将表单数据通过异步提交到此/Home/AddOrEditData中去处理(新增或编辑...等等)
type: 'post',
data: jsonData,
success: function (data) {
alert("数据提交成功!");
},
error: function () {
alert("数据提交失败!");
}
})
}
</script>
Home控制器
using MVC.Easyui.Common;
using MVC.Easyui.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Linq.Expressions;
using System.Net.Http.Formatting;
using System.Web;
using System.Web.Mvc;
using System.Web.Script.Serialization;
namespace MVC.Easyui.Controllers
{
public class HomeController : Controller
{
//进入视图-->HTML的写法
public ActionResult Index()
{
return View();
}
//视图页面的Easyui-DataGrid通过异步请求数据
public string GetData(FromData fd)
{
salesEntities1 db = new salesEntities1();
int count = db.T_UserInfo.Count();
//根据指定的字段来进行排序
//var list = db.T_UserInfo.AsEnumerable().OrderBy(p => GetPropertyValue(p, fd.sort)).Skip((fd.page - 1) * (fd.rows)).Take(fd.rows).ToList();
var list = db.T_UserInfo.AsEnumerable();
//如果用户设置了排序(即:传递了sort和order参数过来)sort表示要排序的字段,order表示升序还是降序排序
if (!string.IsNullOrEmpty(fd.sort) && !string.IsNullOrEmpty(fd.order))
{
//根据指定字段来排序并分页
if (fd.order == "DESC")
{
list = list.OrderByDescending(r => r.GetType().GetProperty(fd.sort).GetValue(r)).Skip((fd.page - 1) * fd.rows).Take(fd.rows).AsQueryable();
}
else
{
list = list.OrderBy(r => r.GetType().GetProperty(fd.sort).GetValue(r)).Skip((fd.page - 1) * fd.rows).Take(fd.rows).AsQueryable();
}
}
else
{
list = list.OrderBy(r => r.Id).Skip((fd.page - 1) * fd.rows).Take(fd.rows).AsQueryable();
}
//如果搜索框的内容不为空,就进行搜索查询
if (!string.IsNullOrEmpty(fd.searchName))
{
list = list.Where(r => r.Name.Contains(fd.searchName));//模糊查询
}
var x = new
{
total = count,
rows = list.Select(r => new //在这里来构建匿名类对象
{
Id = r.Id,
Name = r.Name,
Age = r.Age,
Phone = r.Mobile,
Email = r.Email
})
};
//使用Jil.JSON.Serialize()来对对象序列化需要通过安装插件 PM> Install-Package Jil -version 2.10.0
var strJson = Jil.JSON.Serialize(x);
return strJson;
}
//批量删除
public int RemoveDataById(string id)
{
salesEntities1 db = new salesEntities1();
string[] ids = id.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
List<T_UserInfo> list = new List<T_UserInfo>();
int userid = 0;
for (int i = 0; i < ids.Length; i++)
{
userid = int.Parse(ids[i]);
var user = db.Set<T_UserInfo>().FirstOrDefault(r => r.Id == userid);
list.Add(user);
}
list.ForEach(r => db.Set<T_UserInfo>().Remove(r));
return db.SaveChanges();
}
//新增或编辑数据(根据Id是否为空值来判断是新增还是修改)
public int AddOrEditData(FromData row)
{
salesEntities1 db = new salesEntities1();
//var rowData = Request.Form["row"];
if (row != null)
{
//新增
if (row.Id == 0)
{
T_UserInfo user = new T_UserInfo();
user.Name = row.Name;
user.Age = row.Age;
user.Mobile = row.Phone;
user.Email = row.Email;
user.Gender = 1;
user.LoginId = 1;
db.T_UserInfo.Add(user);
}
else
{
T_UserInfo model = new T_UserInfo();
model.Id = row.Id;
model.Name = row.Name;
model.Age = row.Age;
model.Mobile = row.Phone;
model.Email = row.Email;
model.Gender = 1;
model.LoginId = 1;
System.Data.Entity.Infrastructure.DbEntityEntry entity = db.Entry(model);
entity.State = System.Data.EntityState.Modified;
}
return db.SaveChanges();
}
return 0;
}
/*
/// <summary>
/// 根据传递进来的对象+对象的某个属性来返回指定对象的该属性值
/// </summary>
/// <param name="obj">传入类型对象</param>
/// <param name="property">对象的某个属性</param>
/// <returns>返回指定对象的该属性值</returns>
private object GetPropertyValue(object obj, string property)
{
System.Reflection.PropertyInfo propertyInfo = obj.GetType().GetProperty(property);
return propertyInfo.GetValue(obj, null);
}*/
}
//用于接收从视图传递过来的表单参数
public class FromData
{
//-----------------------以下用于分页
//当前页
public int page { get; set; }
//页大小
public int rows { get; set; }
//-----------------------以下用于搜索
//搜索的姓名
public string searchName { get; set; }
//----------------------以下用于排序
//按哪个字段进行排序
public string sort { get; set; }
//排序方式(DESC ,ASC)
public string order { get; set; }
//-----------以下是用于新增或编辑数据
public int Id { get; set; }
public string Name { get; set; }
public int Age { get; set; }
public string Phone { get; set; }
public string Email { get; set; }
}
}