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对数据库操作,也就是来操作实体对象的! 项目目录: 一.第一步要做的就 ...
随机推荐
- Jquery揭秘系列：Validation实现
之前讲了一部分揭秘系列的东西,由于年初的时候在改项目,也没有写下去.现在开始闲下来了,会继续写没写完的东西,各种原生js实现Jquery的功能. 转入正题,说一下今天要讲的东西. 相信很多tx在项目里 ...
- Jsoup 使用教程：数据抽取
1.使用DOM方法来遍历一个文档 问题 你有一个HTML文档要从中提取数据,并了解这个HTML文档的结构. 方法 将HTML解析成一个Document之后,就可以使用类似于DOM的方法进行操作.示例代 ...
- Java Web的web.xml文件作用及基本配置（转）
其实web.xml就是asp.net的web.config一个道理. 说明: 一个web中完全可以没有web.xml文件,也就是说,web.xml文件并不是web工程必须的. web.xml文件是用来 ...
- iOS - 在工程中试玩状态模式
做了一个项目,项目中一个藏品详情界面针对不同用户,和用户所处于的状态的不同,展示的效果和操作的权限都会不同.想到了状态模式,从来没有用过,赶紧学一下然后用一用.期待兴奋 看了这么多的博客,终于找到一个 ...
- Linux系统下压缩文件时过滤指定的文件 |Linux系统压缩指定文件代码
进入要压缩的目录: [root@iZ25c748tjqZ wechat]# cd /alidata1/htdocs/wechat/ 查看目录: [root@iZ25c748tjqZ wechat]# ...
- Tp-link TL-WR841N无线路由器端口映射到外网如何设置
针对TP-LINK的无线路由器进行演示如何设置端口映射和访问控制,演示使用的具体型号是TP-LINK TL-WR841N 3G无线路由器如何设置端口映射. 什么是端口映射? 端口映射又称端口转发,有的 ...
- MYSQL存储过程、游标、触发器
MySQL5 中添加了存储过程的支持. 大多数SQL语句都是针对一个或多个表的单条语句.并非所有的操作都怎么简单.经常会有一个完整的操作需要多条才能完成 存储过程简单来说,就是为以后的使用而保存的一 ...
- 创建一个点状注记（MarkerElement）
1.根据XY创建一个点 /// <summary> /// 根据x y创建新点 /// </summary> /// <param name="dX" ...
- light
Unity5中lightmap的坑 http://blog.csdn.net/langresser_king/article/details/48914901 Unity中光照贴图一二坑及解决办法 h ...
- centos 下测试网速
wget https://raw.githubusercontent.com/sivel/speedtest-cli/master/speedtest.py chmod a+rx speedtest. ...