EasyUI - 后台管理系统 - 增加，删除，修改
效果：
html代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="admin.aspx.cs" Inherits="EasyUI.Application.admin" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>管理界面</title>
<script src="../Quote/EasyUI/jquery.min.js"></script>
<script src="../Quote/EasyUI/jquery.easyui.min.js"></script>
<script src="../js/admin.js"></script>
<link href="../Quote/EasyUI/themes/default/easyui.css" rel="stylesheet" />
<link href="../Quote/EasyUI/themes/icon.css" rel="stylesheet" />
<link href="../css/admin.css" rel="stylesheet" />
</head>
<body class="easyui-layout">
<div data-options="region:'north',noheader:true" style="height: 80px;">
<a href="Logout.aspx" target="_self" style="float: right; line-height: 80px; padding-right: 100px;">退出系统</a>
</div>
<div data-options="region:'south'" style="height: 60px; text-align: center; line-height: 50px;">
版权信息
</div>
<div data-options="region:'west',title:'导航',iconCls:'icon-world',split:true" style="width: 200px;">
<div id="aa" style="width: 300px; height: 200px;">
<div title="部门分类" data-options="iconCls:'icon-save'" style="overflow: auto; padding: 10px;">
<ul id ="tree"></ul>
</div>
<div title="Title2" data-options="iconCls:'icon-reload' " style="padding: 10px;">
content2
</div>
<div title="Title3">
content3
</div>
</div>
</div>
<div data-options="region:'center'" style="padding: 5px; background: #eee;">
<div id="tabs">
<div title="起始页" data-options="iconCls:'icon-world'">
<p>欢迎来到后台！</p>
</div>
</div>
</div>
</body>
</html>
使用的html代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="manager.aspx.cs" Inherits="EasyUI.Application.according.manager" %> <script src="../../js/manager.js"></script> <table id="table"></table>
<div id="tb">
<!--工具-->
<div style="padding: 5px;">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add', plain:true," onclick="manager_tool.add();">添加</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit', plain:true," onclick="manager_tool.edit();">修改</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove', plain:true," onclick="manager_tool.remove();">删除</a>
</div>
<!--搜索-->
<div style="padding-left: 10px; padding-bottom: 10px;">
搜索姓名（可以模糊查询）：<input id="name" name="name" type="text" class="textbox" style="width: 130px;" />
查询时间 从：<input id="time_from" name="time_from" type="text" class="easyui-datebox" style="width: 130px;" />
到：<input id="time_to" name="time_to" type="text" class="easyui-datebox" style="width: 130px;" />
<a id="search" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'," style="margin-left: 20px; padding: 0 10px 0 10px;" onclick="obj.search();">搜索</a>
</div>
<!--新增-->
<div id ="form">
<p>姓名：<input id ="formname" type ="text"/></p>
<p>性别：<input id ="sex" type ="text"/></p>
</div> <!--修改-->
<div id ="edit">
<p>姓名：<input id ="formname_edit" type ="text"/></p>
<p>性别：<input id ="sex_edit" type ="text"/></p>
</div>
</div>
JS代码：
$(function () {
//列表
$('#table').datagrid({
url: '../Json/datagridjson.ashx',
fit: true,
striped: true,//是否开启斑马线
//显示分页控件栏
pagination: true,
pageNumber: ,//初始化的时候在第几页
pageSize: ,//，每页显示的条数
pageList: [, , ],//每页显示的条数
//通过POST传递到后台，然后进行排序。
sortName: 'createtime',
sortOrder: 'desc',
//按钮
toolbar: '#tb',
//要显示的列
columns: [[
{
field: 'id',
title: '编号',
checkbox: true,
},
{
field: 'name',
title: '姓名',
width: ,
halign: 'center',
},
{
field: 'sex',
title: '性别',
width: ,
},
{
field: 'createtime',
title: '创建时间',
width: ,
sortable: true,
}
]],
});
//工具栏上
manager_tool = {
//添加
add: function () {
//打开表单
$('#form').dialog('open');
},
//删除
remove: function () {
alert('删除');
},
//编辑
edit: function () {
//判断是否选择多条信息
var rows = $('#table').datagrid('getSelections');
if (rows.length != ) {
$.messager.alert("提示", "只能选择一行！");
} else {
var rowdata = $('#table').datagrid('getSelected');
var id = rowdata.id;
var name = rowdata.name;
var sex = rowdata.sex;
//编辑
$('#edit').dialog({
width: ,
title: '修改内容',
iconCls: 'icon-edit',
modal: true,
buttons: [{
text: '提交',
iconCls: 'icon-ok',
handler: function () {
var formname_edit = $('#formname_edit').val();
var sex_edit = $('#sex_edit').val();
if (formname_edit == "" || sex_edit == "") {
return;
} else {
console.log(formname_edit+','+sex_edit);
}
}
}, {
text: '取消',
iconCls: 'icon-cancel',
handler: function () {
$('#edit').dialog('close');
$('#formname_edit').val('');
$('#sex_edit').val('');
}
}]
});
//给修改的文本框赋值
$('#formname_edit').val(name);
$('#sex_edit').val(sex);
}
}
};
//提交表单
$('#form').dialog({
width: ,
title: '增加内容',
iconCls: 'icon-add',
//初始化时先关闭表单
closed: true,
modal: true,
buttons: [{
text: '提交',
iconCls: 'icon-ok',
handler: function () {
var formname = $('#formname').val();
var sex = $('#sex').val();
if (formname == "" || sex == "") {
return;
}
else {
console.log(formname + ',' + sex);
}
}
}, {
text: '取消',
iconCls: 'icon-cancel',
handler: function () {
$('#form').dialog('close');
$('#formname').val('');
$('#sex').val('');
}
}],
});
})$(function () {
//列表
$('#table').datagrid({
url: '../Json/datagridjson.ashx',
fit: true,
striped: true,//是否开启斑马线
//显示分页控件栏
pagination: true,
pageNumber: ,//初始化的时候在第几页
pageSize: ,//，每页显示的条数
pageList: [, , ],//每页显示的条数
//通过POST传递到后台，然后进行排序。
sortName: 'createtime',
sortOrder: 'desc',
//按钮
toolbar: '#tb',
//要显示的列
columns: [[
{
field: 'id',
title: '编号',
checkbox: true,
},
{
field: 'name',
title: '姓名',
width: ,
halign: 'center',
},
{
field: 'sex',
title: '性别',
width: ,
},
{
field: 'createtime',
title: '创建时间',
width: ,
sortable: true,
}
]],
});
//工具栏上
manager_tool = {
//添加
add: function () {
//打开表单
$('#form').dialog('open');
},
//删除
remove: function () {
alert('删除');
},
//编辑
edit: function () {
//判断是否选择多条信息
var rows = $('#table').datagrid('getSelections');
if (rows.length != ) {
$.messager.alert("提示", "只能选择一行！");
} else {
var rowdata = $('#table').datagrid('getSelected');
var id = rowdata.id;
var name = rowdata.name;
var sex = rowdata.sex;
//编辑
$('#edit').dialog({
width: ,
title: '修改内容',
iconCls: 'icon-edit',
modal: true,
buttons: [{
text: '提交',
iconCls: 'icon-ok',
handler: function () {
var formname_edit = $('#formname_edit').val();
var sex_edit = $('#sex_edit').val();
if (formname_edit == "" || sex_edit == "") {
return;
} else {
console.log(formname_edit+','+sex_edit);
}
}
}, {
text: '取消',
iconCls: 'icon-cancel',
handler: function () {
$('#edit').dialog('close');
$('#formname_edit').val('');
$('#sex_edit').val('');
}
}]
});
//给修改的文本框赋值
$('#formname_edit').val(name);
$('#sex_edit').val(sex);
}
}
};
//提交表单
$('#form').dialog({
width: ,
title: '增加内容',
iconCls: 'icon-add',
//初始化时先关闭表单
closed: true,
modal: true,
buttons: [{
text: '提交',
iconCls: 'icon-ok',
handler: function () {
var formname = $('#formname').val();
var sex = $('#sex').val();
if (formname == "" || sex == "") {
return;
}
else {
console.log(formname + ',' + sex);
}
}
}, {
text: '取消',
iconCls: 'icon-cancel',
handler: function () {
$('#form').dialog('close');
$('#formname').val('');
$('#sex').val('');
}
}],
});
})
EasyUI - 后台管理系统 - 增加，删除，修改的更多相关文章
- ASP.NET MVC5+EF6+EasyUI 后台管理系统-WebApi的用法与调试
1:ASP.NET MVC5+EF6+EasyUI 后台管理系统(1)-WebApi与Unity注入 使用Unity是为了使用我们后台的BLL和DAL层 2:ASP.NET MVC5+EF6+Easy ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（1）-前言与目录（转）
开发工具:VS2015(2012以上)+SQL2008R2以上数据库 您可以有偿获取一份最新源码联系QQ:729994997 价格 666RMB 升级后界面效果如下: 日程管理 http://ww ...
- [JavaWeb基础] 004.用JSP + SERVLET 进行简单的增加删除修改
上一次的文章,我们讲解了如何用JAVA访问MySql数据库,对数据进行增加删除修改查询.那么这次我们把具体的页面的数据库操作结合在一起,进行一次简单的学生信息操作案例. 首先我们创建一个专门用于学生管 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（1）-前言与目录（持续更新中...）
开发工具:VS2015(2012以上)+SQL2008R2以上数据库 您可以有偿获取一份最新源码联系QQ:729994997 价格 666RMB 升级后界面效果如下: 任务调度系统界面 http: ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（63）-Excel导入和导出-自定义表模导入
系列目录 前言 上一节使用了LinqToExcel和CloseXML对Excel表进行导入和导出的简单操作,大家可以跳转到上一节查看: ASP.NET MVC5+EF6+EasyUI 后台管理系统(6 ...
- Nodejs之MEAN栈开发（九）---- 用户评论的增加/删除/修改
由于工作中做实时通信的项目,需要用到Nodejs做通讯转接功能,刚开始接触,很多都不懂,于是我和同事就准备去学习nodejs,结合nodejs之MEAN栈实战书籍<Getting.MEAN.wi ...
- 在Javascript操作JSON对象，增加 删除 修改
在Javascript操作JSON对象,增加删除修改全有的,详情见代码 <script type="text/javascript"> var jsonObj2 = { ...
- AutoCad 二次开发 .net 之层表的增加 删除 修改图层颜色 遍历 设置当前层
AutoCad 二次开发 .net 之层表的增加 删除 修改图层颜色 遍历 设置当前层 AutoCad 二次开发 .net 之层表的增加 删除 修改图层颜色 遍历 设置当前层我理解的图层的作用大概是把 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（82）-Easyui Datagrid批量操作（编辑，删除，添加）
前言 有时候我们的后台系统表单比较复杂,做过进销存或者一些销售订单的都应该有过感觉 虽然Easyui Datagrid提供了行内编辑,但是不够灵活,但是我们稍微修改一下来达到批量编辑,批量删除,批量添 ...
随机推荐
- python:利用asyncio进行快速抓取
web数据抓取是一个经常在python的讨论中出现的主题.有很多方法可以用来进行web数据抓取,然而其中好像并没有一个最好的办法.有一些如scrapy这样十分成熟的框架,更多的则是像mechanize ...
- 有n个数（两两不同），对于这n个数的每个连续子序列，把其中最大的一个数标记一次，问最后每个数被标记次数
今天在qq群了看到了这个题目,觉得用单调栈的解法挺好,可以在o(n)内搞定,特意记录下来 首先明确单调栈的含义: 栈是FILO的,栈的所有操作都是在栈顶进行. 单调性指的是当前栈中存储的元素是严格的递 ...
- Dining（最大流）
Dining Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 11844 Accepted: 5444 Descripti ...
- 在优化SQL语句中使用虚拟索引
定义:虚拟索引(virtual index) 是指没有创建对应的物理段的索引. 虚拟索引的目的:是在不损耗主机CPU,IO,磁盘空间去实际创建索引的情况下,来判断一个索引是否能够对SQL优化起到作用. ...
- BZOJ 3240([Noi2013]矩阵游戏-费马小定理【矩阵推论】-%*s-快速读入)
3240: [Noi2013]矩阵游戏 Time Limit: 10 Sec Memory Limit: 256 MB Submit: 123 Solved: 73 [ Submit][ St ...
- 【Oracle】SQL*Loader-522: lfiopn failed for file
Linux下使用sqlldr进行批量操作,此操作会自动生成和删除临时文件. 因此,当前操作的用户必须具备对存放文件的文件夹有增删改的权限. 使用root登录,修改改文件夹权限为777即可. chmod ...
- 【QT相关】QT+opencv环境配置
在qt msvc2010版软件中使用opencv2.4.9进行库函数配置.仅适用于windows下. INCLUDEPATH += $$PWD/../../../opencv/build/includ ...
- BZOJ 2631: tree( LCT )
LCT...略麻烦... -------------------------------------------------------------------------------- #inclu ...
- Qt写一个截屏工具（窗口透明）
最近发现好多次打开QQ仅仅想用它来截屏 ⊙﹏⊙b汗 不如自己来写一个截屏工具,集成到自己的小工具箱里面 动手之前考虑一下要怎么实现,我考虑过的方案大概有下面两种 : 1. 监控全局鼠标事件 (真是“ ...
- Git 配置editor编辑器
Git 配置editor编辑器 在ubuntu系统下,Git默认的编辑器是命令行,学名叫V什么的,使用起来诸多不便 在编辑提交日志的时候,用的比较多. 可以选择unbuntu默认的文档编辑器作为git ...