EasyUI第一章Application之Basic CRUD(增删改查)
先看效果图：
增加：
修改：
删除：
具体实现：
html与js代码：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/color.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<table id="dg" title="用户列表" class="easyui-datagrid" style="width:700px;height:250px"
url="/Home/GetUserInfo"
toolbar="#toolbar" pagination="true"
rownumbers="true" fitcolumns="true" singleselect="true">
<thead>
<tr>
<th field="FirstName" width="50">First Name</th>
<th field="LastName" width="50">Last Name</th>
<th field="Phone" width="50">Phone</th>
<th field="Email" width="50">Email</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="newUser()">新建</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="editUser()">修改</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="destroyUser()">删除</a>
</div>
<div id="dlg" class="easyui-dialog" style="width:400px"
closed="true" buttons="#dlg-buttons">
<form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
<div style="margin-bottom:20px;font-size:14px;border-bottom:1px solid #ccc">用户信息</div>
<div style="margin-bottom:10px">
<input name="FirstName" class="easyui-textbox" required="true" label="First Name:" style="width:100%">
</div>
<div style="margin-bottom:10px">
<input name="LastName" class="easyui-textbox" required="true" label="Last Name:" style="width:100%">
</div>
<div style="margin-bottom:10px">
<input name="Phone" class="easyui-textbox" required="true" label="Phone:" style="width:100%">
</div>
<div style="margin-bottom:10px">
<input name="Email" class="easyui-textbox" required="true" validtype="email" label="Email:" style="width:100%">
</div>
</form>
</div>
<div id="dlg-buttons">
<a href="javascript:void(0)" class="easyui-linkbutton c6" iconcls="icon-ok" onclick="saveUser()" style="width:90px">保存</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">取消</a>
</div>
<script type="text/javascript">
var url;
//新建
function newUser() {
$('#dlg').dialog('open').dialog('center').dialog('setTitle', '新建用户'); //打开、居中、设置标题
$('#fm').form('clear'); //清除表单数据
url = '/Home/SaveUsers';
}
//编辑
function editUser() {
var row = $('#dg').datagrid('getSelected'); //获取选中的行
if (row) {
$('#dlg').dialog('open').dialog('center').dialog('setTitle', 'Edit User');
$('#fm').form('load', row);
url = '/Home/SaveUsers';
} else {
$.messager.alert({
title: '系统提示',
msg: '请选择需要修改的行'
});
}
}
//保存
function saveUser() {
$('#fm').form('submit', {
url: url,
onSubmit: function () {
return $(this).form('validate');
},
success: function (result) {
var result = eval('(' + result + ')');
if (result.IsSuccess) {
$.messager.show({
title: '系统提示',
msg: result.Message
});
$('#dg').datagrid('reload'); // 刷新
} else {
$.messager.show({
title: '系统提示',
msg: "保存失败"
});
}
}
});
}
//删除
function destroyUser() {
var row = $('#dg').datagrid('getSelected');
if (row) {
//提示用户是否真的删除
$.messager.confirm('提示', '你真的要删除吗?', function (r) {
if (r) {
$.post('/Home/DeleteUsers', { id: row.Id }, function (result) {
if (result.IsSuccess) {
$.messager.show({ //错误提示
title: '系统提示',
msg: result.Message
});
$('#dg').datagrid('reload'); // 刷新已经删除的记录
} else {
$.messager.show({ //错误提示
title: '系统提示',
msg: "删除失败"
});
}
}, 'json');
}
});
} else {
$.messager.alert({
title: '系统提示',
msg: '请选择要删除的数据'
});
}
}
</script>
</body>
</html>
后台CS代码：
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
} public ActionResult ApplicationBasicCRUD()
{
return View();
} [HttpPost]
public JsonResult GetUserInfo()
{
EasyUiPages easyUiPages = new EasyUiPages();
List<UserInfo> userInfo = new List<UserInfo>();
userInfo.Add(new UserInfo() { Id = , FirstName = "Tom", LastName = "Jim", Phone = "", Email = "AA@qq.com" });
userInfo.Add(new UserInfo() { Id = , FirstName = "AAA", LastName = "TTT", Phone = "", Email = "BB@qq.com" });
userInfo.Add(new UserInfo() { Id = , FirstName = "BBB", LastName = "VVV", Phone = "", Email = "CC@qq.com" });
easyUiPages.total = userInfo.Count();
easyUiPages.rows = userInfo;
return Json(easyUiPages);
} public ActionResult SaveUsers()
{
ResultState resultState = new ResultState();
resultState.IsSuccess = true;
resultState.Message = "保存成功";
return Json(resultState);
} public ActionResult DeleteUsers()
{
ResultState resultState = new ResultState();
resultState.IsSuccess = true;
resultState.Message = "删除成功";
return Json(resultState);
} } public class ResultState
{
public bool IsSuccess { get;set;}
public string Message { get; set; }
}
UserInfo类:
public class UserInfo
{
public int Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string Phone { get; set; }
public string Email { get; set; }
} public class EasyUiPages
{
/// <summary>
/// 所有数据
/// </summary>
public object rows { get; set; }
/// <summary>
/// 总行数
/// </summary>
public object total { get; set; }
}
EasyUI第一章Application之Basic CRUD(增删改查)的更多相关文章
- 使用ASP.NET Core MVC 和 Entity Framework Core 开发一个CRUD(增删改查)的应用程序
使用ASP.NET Core MVC 和 Entity Framework Core 开发一个CRUD(增删改查)的应用程序 不定时更新翻译系列,此系列更新毫无时间规律,文笔菜翻译菜求各位看官老爷们轻 ...
- 前端的CRUD增删改查的小例子
前端的CRUD增删改查的小例子 1.效果演示 2.相关代码: <!DOCTYPE html> <html lang="en"> <head> & ...
- 【EF6学习笔记】（二）操练 CRUD 增删改查
本篇原文链接: Implementing Basic CRUD Functionality 说明:学习笔记参考原文中的流程,为了增加实际操作性,并能够深入理解,部分地方根据实际情况做了一些调整:并且根 ...
- EF6 学习笔记（二）：操练 CRUD 增删改查
EF6学习笔记总目录 ASP.NET MVC5 及 EF6 学习笔记 - (目录整理) 接上篇: EF6 学习笔记(一):Code First 方式生成数据库及初始化数据库实际操作 本篇原文链接: I ...
- abp(net core)+easyui+efcore仓储系统——展现层实现增删改查之控制器（六）
abp(net core)+easyui+efcore仓储系统目录 abp(net core)+easyui+efcore仓储系统——ABP总体介绍(一) abp(net core)+easyui+e ...
- yii2-basic后台管理功能开发之二：创建CRUD增删改查
昨天实现了后台模板的嵌套,今天我们可以试着创建CRUD模型啦 刚开始的应该都是“套用”,不再打算细说,只把关键的地方指出来. CRUD即数据库增删改查操作.可以理解为yii2为我们做了一个组件,来实现 ...
- 创建支持CRUD(增删改查)操作的Web API(二)
一:准备工作 你可以直接下载源码查看 Download the completed project. 下载完整的项目 CRUD是指“创建(C).读取(R).更新(U)和删除(D)”,它们是四个 ...
- python全栈开发中级班全程笔记（第二模块、第三章）（员工信息增删改查作业讲解）
python全栈开发中级班全程笔记 第三章:员工信息增删改查作业代码 作业要求: 员工增删改查表用代码实现一个简单的员工信息增删改查表需求: 1.支持模糊查询,(1.find name ,age fo ...
- Hibernate第一个程序(最基础的增删改查) --Hibernate
本例实现Hibernate的第一个程序,Hibernate的优点我想大家都很清楚,在这里不做过多赘述.总之,使用Hibernate对数据库操作,也就是来操作实体对象的! 项目目录: 一.第一步要做的就 ...
随机推荐
- EO.Pdf 去水印版本，需要的自取
链接:http://pan.baidu.com/s/1o8apLpC 密码:9axl
- asp.net mvc HandleErrorAttribute 异常错误处理 无效！
系统未知bug,代码没有深究. 现象:filters.Add(new HandleErrorAttribute()); 使用了全局的异常处理过滤. HandleErrorAttribute 核心代码: ...
- MySQL架构优化实战系列1：数据类型与索引调优全解析
一.数据类型优化 数据类型 整数 数字类型:整数和实数 tinyint(8).smallint(16).mediuint(24).int(32).bigint(64) 数字表示对应最大存储位数,如 ...
- CentOS 6.5安装在VMWare中Bridge模式下网卡eth0不能自动激活的问题
VMWare 12.5.2 CentOS 6.5 basic VMWare网卡配置选择Bridge方式 问题: 默认情况下ifconfig命令只能看到网络设备lo,看不到eth0,也没有分配合理的IP ...
- js中let和var定义变量的区别
let变量之前没见过,刚遇到,探探究竟. 以下转自:http://blog.csdn.net/nfer_zhuang/article/details/48781671 声明后未赋值,表现相同 (fun ...
- git 代码更新
第一:先说首次使用 意思就是这个文件夹中的代码你还没有向GITHUB提交过代码 cd /home/test(假如 test就是你的用户名)/githubtest(这是个文件夹,你可以提前先建立好,这个 ...
- Yii rules常用规则
public function rules() { return array( //必须填写 array('email, username, password, ...
- SDL简介（网络汇总）
摄像头视频播放采用sdl,下面简单介绍下.不保证正确及网址永远有效.后面文章采用tao框架http://sourceforge.net/projects/taoframework/ SDL. ...
- zabbix添加监控主机(三)
zabbix添加监控服务器. zabbix添加监控服务器(以添加10.10.100.137为例) (1)创建要监控的主机.点击配置(configuration)–>主机(host) –>创 ...
- (转）PostgreSQL 兼容Oracle - orafce
转自:http://blog.163.com/digoal@126/blog/static/1638770402015112144250486/ PostgreSQL是和Oracle最接近的企业数据库 ...