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 的经常使用时间操作，取得当前时间等
我们先导入必须用到的一个module>>> import time设置一个时间的格式,以下会用到>>>ISOTIMEFORMAT=’%Y-%m-%d %X’看一下当 ...
- Centos6.4下tar包安装最新版Mysql5.6
1.下载 mysql:http://www.mysql.com/downloads/ (须要注冊ORACLE账号) 版本号:mysql-advanced-5.6.21-linux-glibc2.5-x ...
- c++设置输出精度
float类型的精度6-7位,double类型的变量15-16位,但是float占四个字节,double占八个字节, 但能用float类型不要用double因为double占的字节数多,而且运算速度要 ...
- Sprintf()的思考和引出的相关问题
Sprintf()为什么不安全? 功能 把格式化的数据写入某个 字符串 缓冲区. 头文件 stdio.h 原型 int sprintf( char *buffer, const char *forma ...
- 【转】介绍几个图论和复杂网络的程序库 —— BGL，QuickGraph，igraph和NetworkX
原文来自:http://blog.sciencenet.cn/blog-404069-297233.html 作复杂网络研究离不开对各种实际或模拟网络的统计.计算.绘图等工作.对于一般性的工作,我们可 ...
- Hdu 1404 Digital Deletions
Problem地址:http://acm.hdu.edu.cn/showproblem.php?pid=1404 刚开始想采取找规律的方法解题,可以没有发现规律.无奈,只好采用求PN点的方法. 我们假 ...
- UVA 10020 Minimal coverage(贪心 + 区间覆盖问题）
Minimal coverage The Problem Given several segments of line (int the X axis) with coordinates [Li, ...
- Android创建与读取Excel
主流的操作Excel的有两种方法,一种是通过poi包,另一种是通过jxl包.这里我主要讲解通过jxl包来读写Excel. 首先需要导入一个jxl.jar包. 下载地址:http://www.andyk ...
- NET Core 构成体系
NET Core 构成体系 简析 .NET Core 构成体系 Roslyn 编译器 RyuJIT 编译器 CoreCLR & CoreRT CoreFX(.NET Core Librarie ...
- Jquery学习笔记：通过层次关系获取jquery对象
前面一篇文章,我们介绍了如何通过web标签的id , css样式值来获取jquery对象. 但这只是基本方法,不能满足所有场景的需求. 本文介绍通过dom元素之间的层次关系获取元素.具体是将各种标识符 ...