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提供了行内编辑,但是不够灵活,但是我们稍微修改一下来达到批量编辑,批量删除,批量添 ...
随机推荐
- Poj 2255 Tree Recovery(二叉搜索树)
题目链接:http://poj.org/problem?id=2255 思路分析:根据先序遍历(如DBACEGF)可以找出根结点(D),其后为左右子树:根据中序遍历(如ABCDEFG),已知根结点(D ...
- HDU 4569Special equations2012长沙邀请赛E题（数学知识）
Special equations Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...
- JavaScript+XML+VBA导出报表初步构想
最近在做人事档案管理系统遇到的一个问题就是种类多.数量大的报表打印问题.这个系统的一个特点就是信函打印,各种介绍信.各种证明信.对于这样的重复性的功能,最好的方法就是所有的报表实现格式套用. 经过分析 ...
- HTML高级选项卡（1）————表标签
利用上述表格属性,能够简单的创建一个表格.并随意的分割行和列. <html> <head> <title>表格的应用</title> </head ...
- Jquery - checked 全选与取消全选
html: <!DOCTYPE html> <html> <head> <title>节点列表</title> <link rel=& ...
- ActionBar开启Overlay Mode（覆盖模式）
以下内容参考自Android官网http://developer.android.com/training/basics/actionbar/overlaying.html#EnableOverlay ...
- gmake使用注意
今天使用gmake把sgml变成html的时候出现了无法找到gmake的困惑(本人linux为ubuntu15.04),上网搜索发现: gmake是GNU Make的缩写.Linux系统环境下的mak ...
- C语言深度剖析---const关键字（转载）
const是constant的缩写,是恒定不变的意思.被const修饰的值,是只读变量. 1.const修饰只读变量,具有不变性 #include <stdio.h> int m ...
- 关于VerilogHDL生成的锁存器
总是会遇到有写文档中提到,不要生成锁存器.问题是 一: 什么叫锁存器 二 : 为什么不要生成锁存器 三 : 如何避免生成锁存器 好,现在就这三个问题,一一做出解答 一 什么叫锁存器 锁存器(Latc ...
- Ajax辅助方法
目前为止,我们已经考察了如何编写客户端JavaScript代码,以发送并接受服务器的数据.然而,在使用ASP.NET MVC时,还有另一种方法可用来执行Ajax调用,这就是Ajax辅助方法. Ajax ...