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提供了行内编辑,但是不够灵活,但是我们稍微修改一下来达到批量编辑,批量删除,批量添 ...
随机推荐
- 复习知识点：TabBarViewController（微信框架）
TabBarViewController:标签视图控制器 在application设置 创建四个视图控制器 引入视图控制器头文件 #import "AppDelegate.h" # ...
- Unix/Linux环境C编程新手教程(5) Red Hat Enterprise Linux(RHEL)环境搭建
Unix/Linux版本号众多,我们推荐Unix/Linux刚開始学习的人选用几款典型的Unix/Linux操作系统进行学习. 通过./a.out ./Y.out运行出结果,证明C++程序编译成功.也 ...
- 常用的shell命令整理
工作快一年了,shell命令也玩了一年了.还是有点积累的,下面是本人常用的. 1.pwd | xargs -i basename {} 获取当前所在目录的名称 2.ps -ef|grep -w ...
- Linux 多线程通信
摘自资料(linux 与Windows不同) 线程间无需特别的手段进行通信,由于线程间能够共享数据结构,也就是一个全局变量能够被两个线程同一时候使用.只是要注意的是线程间须要做好同步,一般用mutex ...
- apache2.4.x三种MPM介绍
三种MPM介绍 Apache 2.X 支持 ...
- pkg_zhgl
CREATE OR REPLACE PACKAGE BODY PKG_ZHGL AS --账户管理包 code szn 20110829 --账户管理服务包 --定义本包中需要引用到的常量 --定义说 ...
- javascript时间函数
//时间函数 var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完 ...
- 处理IIS报“由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置，无法提供您请求的页面”
“由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置,无法提供您请求的页面” 详细错误:HTTP 错误 404.2 - Not Found. 由于 Web 服务器上的“ISAPI 和 C ...
- Socket编程模式
Socket编程模式 本文主要分析了几种Socket编程的模式.主要包括基本的阻塞Socket.非阻塞Socket.I/O多路复用.其中,阻塞和非阻塞是相对于套接字来说的,而其他的模式本质上来说是基于 ...
- VC++在对话框中加入属性页
当一个基于对话框的程序中有相当多的控件时,你一定会想到使用属性页来将这些控件分类放置.本文针对这种方法来讨论几种可能实现的方案. 方案一本方案的例子请见源代码打包文件中的Property1部分 在对话 ...