ASP.NET MVC+BUI实现表格的操作
在Web中基于表格的操作，比如添加行、单元格内容编辑等等功能，是完全基于js实现的。但如果程序员完全使用js或者jquery去编写表格控件，则会导致样式不统一，代码量较大等问题，尤其对于不太熟悉js的后端程序员来说，可能会是一个挑战。因此，网络上出现了很多基于表格操作的js控件，帮助程序员尤其是后端程序员也能够编写出漂亮的基于表格的应用。本篇博客以ASP.NET MVC+BUI为例，看如何实现基于表格的分页查询、编辑、删除等功能。
首先介绍一下BUI。BUI是基于jQuery开发的轻量级的控件库，官网链接为：http://www.builive.com/demo/index.php。程序员只要参照示例中的js代码，提供后端数据源部分，就能实现数据操作。要使用bui首先要去官网下载bui控件包，将其文件放入到ASP.NET MVC项目中的Scripts目录下，然后在cshtml文件中引用css、js即可。
我们这篇博客要实现的功能大概如下。首先点击查询按钮，显示出当前的数据（支持分页）。
点击修改时出现的界面，会加载选中表格的行的数据。
点击删除，会出现对话框。点击确定按钮，会删除对应表格的行的信息，并自动刷新表格内容。
完整的cshtml部分代码：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>档案修改</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href=@Url.Content("~/Scripts/bui/css/dpl-min.css") rel="stylesheet" type="text/css" />
<link href=@Url.Content("~/Scripts/bui/css/bui-min.css") rel="stylesheet" type="text/css" />
<link href=@Url.Content("~/Scripts/bui/css/page-min.css") rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<form id="searchForm" class="form-horizontal">
<div class="row">
<div class="control-group span8">
<label class="control-label">
单位代码：
</label>
<div class="controls">
<input type="text" class="control-text" name="dwdm" id="dwdm" />
</div>
</div>
<div class="control-group span8">
<label class="control-label">
工作单位：
</label>
<div class="controls">
<input type="text" class="control-text" name="gzdw" id="gzdw" />
</div>
</div>
<div class="control-group span8">
<label class="control-label">
个人社保代码：
</label>
<div class="controls">
<input type="text" class="control-text" name="grsbdm" id="grsbdm" />
</div>
</div>
</div>
<div class="row">
<div class="control-group span8">
<label class="control-label">
姓名：
</label>
<div class="controls">
<input type="text" class="control-text" name="xm" id="xm" />
</div>
</div>
<div class="control-group span8">
<label class="control-label">
身份证号码：
</label>
<div class="controls">
<input type="text" class="control-text" name="sfzhm" id="sfzhm" />
</div>
</div>
<div class="control-group span8">
<label class="control-label">
档案号：
</label>
<div class="controls">
<input type="text" class="control-text" name="dah" id="dah" />
</div>
</div>
</div>
<div class="row">
<div class="control-group span8">
<label class="control-label">
工作年月：
</label>
<div class="controls">
<input type="text" name="gzny" id="gzny" />
</div>
</div>
<div class="control-group span8">
<label class="control-label">
退休年月：
</label>
<div class="controls">
<input type="text" name="txny" id="txny" />
</div>
</div>
<div class="span3 offset1">
<button type="button" id="btnSearch" class="button button-primary">
查询
</button>
</div>
</div>
</form>
<div id="content" class="hide">
<form class="form-horizontal">
<div class="row">
<div class="control-group span8">
<label class="control-label">
<s>*</s>单位代码</label>
<div class="controls">
<input name="DWDM" type="text" data-rules="{required:true}" class="input-normal control-text">
</div>
</div>
<div class="control-group span8">
<label class="control-label">
<s>*</s>工作单位</label>
<div class="controls">
<input name="GZDW" type="text" data-rules="{required:true}" class="input-normal control-text">
</div>
</div>
</div>
<div class="row">
<div class="control-group span8">
<label class="control-label">
<s>*</s>个人社保代码</label>
<div class="controls">
<input id="grsbdm_val" name="GRSBDM" type="text" data-rules="{required:true}" class="input-normal control-text">
<input id="grsbdm_old_val" name="GRSBDM" type="hidden" />
<input id="smr_old_val" name="SMR" type="hidden" />
</div>
</div>
<div class="control-group span8">
<label class="control-label">
<s>*</s>档案号</label>
<div class="controls">
<input id="dah_val" name="DAH" type="text" data-rules="{required:true,number : true}"
class="input-normal control-text">
<input id="dah_old_val" name="DAH" type="hidden" />
</div>
</div>
</div>
<div class="row">
<div class="control-group span8">
<label class="control-label">
<s>*</s>姓名</label>
<div class="controls">
<input name="XM" type="text" data-rules="{required:true}" class="input-normal control-text">
</div>
</div>
<div class="control-group span8">
<label class="control-label">
<s>*</s>身份证号</label>
<div class="controls">
<input name="SFZHM" type="text" data-rules="{required:true}" class="input-normal control-text">
</div>
</div>
</div>
<div class="row">
<div class="control-group span8 ">
<label class="control-label">
工作年月</label>
<div class="controls">
<input type="text" name="GZNY" id="gzny" />
</div>
</div>
<div class="control-group span8 ">
<label class="control-label">
退休年月</label>
<div class="controls">
<input type="text" name="TXNY" id="txny" />
</div>
</div>
</div>
<div class="row">
<div class="control-group span15">
<label class="control-label">
退休类型</label>
<div class="controls control-row4">
<textarea name="TXLX" class="input-large" type="text"></textarea>
</div>
</div>
</div>
</form>
</div>
<div class="search-grid-container">
<div id="grid">
</div>
</div>
</div>
<script src='@Url.Content("~/Scripts/bui/js/jquery-1.8.1.min.js")' type="text/javascript"></script>
<script src='@Url.Content("~/Scripts/bui/js/bui-min.js")' type="text/javascript"></script>
<script src='@Url.Content("~/Scripts/bui/js/config-min.js")' type="text/javascript"></script>
<script type="text/javascript">
BUI.use(['common/search', 'common/page'], function (Search) {
var Grid = BUI.Grid,
Data = BUI.Data;
var Grid = Grid,
Store = Data.Store,
enumObj = { "1": "男", "0": "女" },
columns = [
{ title: '档案号', dataIndex: 'DAH', width: 50 },
{ title: '单位代码', dataIndex: 'DWDM', width: 60 },
{ title: '工作单位', dataIndex: 'GZDW', width: 200 },
{ title: '个人社保代码', dataIndex: 'GRSBDM', width: 100 },
{ title: '姓名', dataIndex: 'XM', width: 60 },
{ title: '身份证号码', dataIndex: 'SFZHM', width: 150 },
{ title: '工作年月', dataIndex: 'GZNY', width: 80 },
{ title: '退休年月', dataIndex: 'TXNY', width: 80 },
{ title: '退休类型', dataIndex: 'TXLX', width: 60 },
{ title: '状态', dataIndex: 'YXBZ', width: 60, renderer: function (v) {
if (v == "0") {
delStr = '<span>正常</span>';
} else if(v == "1"){
delStr = '<span>死亡</span>';
}else if(v == "2"){
delStr = '<span>删除</span>';
}
return delStr;
}},
{ title: '扫描人', dataIndex: 'SMR', width: 80 },
{ title: '操作', width: 80, renderer: function () {
// var editStr = Search.createLink({ //链接使用 此方式
// id: 'edit' + obj.id,
// title: '编辑档案信息',
// text: '编辑',
// href: 'search/edit.html'
// }),
var editStr = '<span class="grid-command btn-edit" title="修改档案信息">修改</span>';
delStr = '<span class="grid-command btn-del" title="删除档案信息">删除</span>'; //页面操作不需要使用Search.createLink
return editStr + delStr;
}
}
],
store = new Store({
url: '@Url.Action("DACXResult", "CXDY")',
params: {
dwdm: $("#dwdm").val(),
gzdw: $("#gzdw").val(),
grsbdm: $("#grsbdm").val(),
xm: $("#xm").val(),
sfzhm: $("#sfzhm").val(),
dah: $("#dah").val(),
gzny: $("#gzny").val(),
txny: $("#txny").val()
},
autoLoad: true, //自动加载数据
pageSize: 10// 配置分页数目
}),
editing = new Grid.Plugins.DialogEditing({
contentId: 'content', //弹出框显示的内容的id
triggerCls: 'btn-edit', //点击表格行时触发编辑的 css
autoUpdate: false,
editor: {
title: '退休人员信息修改',
success: function () {
var editor = this,
form = editor.get('form'),
editType = editing.get('editType');
form.valid();
if (form.isValid()) {
form.ajaxSubmit({
dataType: "text",
url: '@Url.Action("ModifyRY", "DAManage")',
data: {
'grsbdm_val': $("#grsbdm_val").val(),
'grsbdm_old_val': $("#grsbdm_old_val").val(),
'dah_val':$("#dah_val").val(),
'dah_old_val': $("#dah_old_val").val(),
},
success: function (data) {
if (data == 'fail') {
BUI.Message.Alert(data.Message, 'error');
}
if (data == 'success') {
if (editType == 'add') {
// store.add(data.Data);
}
if (editType == 'edit') {
record = form.serializeToObject();
editing.saveRecord(record);
}
editor.accept();
}
},
error: function () {
BUI.Message.Alert('修改信息时发生错误', 'error');
}
});
}
}
}
}),
gridCfg = Search.createGridCfg(columns, {
// tbar: {
// items: [
// { text: '<i class="icon-plus"></i>新建', btnCls: 'button button-small', handler: function () { alert('新建'); } },
// { text: '<i class="icon-edit"></i>编辑', btnCls: 'button button-small', handler: function () { alert('编辑'); } },
// { text: '<i class="icon-remove"></i>删除', btnCls: 'button button-small', handler: delFunction }
// ]
// },
plugins: [editing]
});
var search = new Search({
store: store,
gridCfg: gridCfg
}),
grid = search.get('grid');
function delFunction() {
var selections = grid.getSelection();
delItems(selections);
}
function delItems(items) {
var grsbdm = [];
BUI.each(items, function (item) {
grsbdm.push(item.GRSBDM);
});
if (grsbdm.length) {
BUI.Message.Confirm('确认要删除选中的记录么？', function () {
$.ajax({
url: '@Url.Action("DelRY", "DAManage")' + '?grsbdm=' + grsbdm,
method: 'get',
//dataType: 'json',
//data: { grsbdm: grsbdm },
success: function (data) {
if (data == "success") { //删除成功
search.load();
} else { //删除失败
BUI.Message.Alert('删除失败！');
}
}
});
}, 'question');
}
}
//监听事件，删除一条记录
grid.on('cellclick', function (ev) {
var sender = $(ev.domTarget); //点击的Dom
if (sender.hasClass('btn-del')) {
var record = ev.record;
delItems([record]);
}
});
});
</script>
<script type="text/javascript">
function selectDate(id) {
var Calendar = BUI.Calendar
var inputEl = $('#' + id),
monthpicker = new BUI.Calendar.MonthPicker({
trigger: inputEl,
// month:1, //月份从0开始，11结束
autoHide: true,
align: {
points: ['bl', 'tl']
},
//year:2000,
success: function () {
var month = this.get('month'),
year = this.get('year');
inputEl.val(year + '-' + (month + 1)); //月份从0开始，11结束
this.hide();
}
});
monthpicker.render();
monthpicker.on('show', function (ev) {
var val = inputEl.val(), arr, month, year;
if (val) {
arr = val.split('-'); //分割年月
year = parseInt(arr[0]);
month = parseInt(arr[1]);
monthpicker.set('year', year);
monthpicker.set('month', month - 1);
}
});
}
selectDate('gzny');
selectDate('txny');
</script>
</body>
</html>
CXDYController中的DACXResult方法代码：
/// <summary>
/// 档案查询结果
/// </summary>
/// <returns></returns>
[HttpGet]
public JsonResult DACXResult()
{
using (dao as IDisposable)
{
int start = int.Parse(Request["start"] ?? "");
int limit = int.Parse(Request["limit"] ?? "");
int pageIndex = int.Parse(Request["pageIndex"] ?? "") + ;
int all = ; #region where条件
string strWhere = string.Empty;
if (!string.IsNullOrEmpty(Request["dwdm"]))
{
strWhere += "and dwdm = '" + Request["dwdm"] + "'";
}
if (!string.IsNullOrEmpty(Request["gzdw"]))
{
strWhere += "and gzdw = '" + Request["gzdw"] + "'";
}
if (!string.IsNullOrEmpty(Request["grsbdm"]))
{
strWhere += "and grsbdm = '" + Request["grsbdm"] + "'";
strWhere += "and (yxbz = '0' or yxbz = '1' or yxbz = '2')";
}
if (!string.IsNullOrEmpty(Request["xm"]))
{
strWhere += "and xm = '" + Request["xm"] + "'";
strWhere += "and (yxbz = '0' or yxbz = '1' or yxbz = '2')";
}
if (!string.IsNullOrEmpty(Request["sfzhm"]))
{
strWhere += "and sfzhm = '" + Request["sfzhm"] + "'";
}
if (!string.IsNullOrEmpty(Request["dah"]))
{
strWhere += "and dah = '" + Request["dah"] + "'";
strWhere += "and (yxbz = '0' or yxbz = '1' or yxbz = '2')";
}
if (!string.IsNullOrEmpty(Request["gzny"]))
{
strWhere += "and gzny = '" + Request["gzny"] + "'";
}
if (!string.IsNullOrEmpty(Request["txny"]))
{
strWhere += "and txny = '" + Request["txny"] + "'";
}
if (string.IsNullOrEmpty(Request["grsbdm"])&& string.IsNullOrEmpty(Request["xm"])&& string.IsNullOrEmpty(Request["dah"]))
{
strWhere += "and yxbz = '0'";
}
#endregion string orderBy = "order by yxbz,to_number(dah) asc,gxsj desc"; DataSet ds = dao.GetListByPage2(strWhere, orderBy, start, limit, pageIndex, out all);
int count = ds.Tables[].Rows.Count;
RYXX[] ryxxs = new RYXX[count];
for (int i = ; i < count; i++)
{
RYXX ryxx = dao.DataRowToModel(ds.Tables[].Rows[i]);
ryxxs[i] = ryxx;
} return new JsonResult()
{
Data = new PageData<RYXX>()
{
rows = ryxxs,
results = all,
hasError = false,
error = ""
},
MaxJsonLength = int.MaxValue,
ContentType = "application/json",
JsonRequestBehavior = JsonRequestBehavior.AllowGet
};
}
}
PageData泛型类代码（分页对象）：
public class PageData<T> where T : class
{
public T[] rows { get; set; }
public int results { get; set; }
public bool hasError { get; set; }
public string error { get; set; }
}
RYXX实体类代码：
/// <summary>
/// 人员信息
/// </summary>
public class RYXX
{
/// <summary>
/// 单位代码
/// </summary>
public string DWDM { get; set; } /// <summary>
/// 工作单位
/// </summary>
public string GZDW { get; set; } /// <summary>
/// 个人社保代码
/// </summary>
public string GRSBDM { get; set; } /// <summary>
/// 姓名
/// </summary>
public string XM { get; set; } /// <summary>
/// 身份证号码
/// </summary>
public string SFZHM { get; set; } /// <summary>
/// 工作年月
/// </summary>
public string GZNY { get; set; } /// <summary>
/// 退休年月
/// </summary>
public string TXNY { get; set; } /// <summary>
/// 档案号
/// </summary>
public string DAH { get; set; } /// <summary>
/// 退休类型
/// </summary>
public string TXLX { get; set; } /// <summary>
/// 有效标志（0表示正常，1表示死亡）
/// </summary>
public string YXBZ { get; set; } /// <summary>
/// 档案扫描人
/// </summary>
public string SMR { get; set; } /// <summary>
/// 数据导入人
/// </summary>
public string DRR { get; set; }
}
GetListByPage2分页代码（基于Oracle的分页查询）：
/// <summary>
/// 分页获取数据
/// </summary>
/// <param name="strWhere">where条件</param>
/// <param name="orderBy">排序</param>
/// <param name="start">开始记录的起始数，如第 20 条,从0开始</param>
/// <param name="limit">单页多少条记录</param>
/// <param name="pageIndex">第几页，同start参数重复，可以选择其中一个使用</param>
/// <param name="all">记录总数</param>
/// <returns>分页数据</returns>
public DataSet GetListByPage2(string strWhere, string orderBy, int start, int limit, int pageIndex, out int all)
{
string sql1 = "SELECT * FROM T_RYXX where 1=1 " + strWhere + " " + orderBy;
all = OracleHelper.Query(sql1).Tables[].Rows.Count; string sql = @"SELECT * FROM (SELECT A.*, ROWNUM RN FROM (SELECT * FROM T_RYXX where 1=1" + strWhere + " " + orderBy + ") A WHERE ROWNUM <= '" + limit * pageIndex + "') WHERE RN > '" + start + "'";
return OracleHelper.Query(sql);
}
DAManage中的ModifyRY和DelRY方法代码就不贴了，与上述Action中的查询代码思路类似（Request获取参数，然后后端执行一下sql返回标志，前端success回调函数处理）。通过上面的例子可以看出，现在Web开发大部分都是js代码，C#代码只占很少部分。因此熟练掌握js对于web开发来说是第一位的。
ASP.NET MVC+BUI实现表格的操作的更多相关文章
- 【第一篇】ASP.NET MVC快速入门之数据库操作（MVC5+EF6）
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
- 【第三篇】ASP.NET MVC快速入门之安全策略（MVC5+EF6）
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
- 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库（MVC5+EF6）
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
- 【第四篇】ASP.NET MVC快速入门之完整示例（MVC5+EF6）
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
- ASP.NET MVC 3 之表单和 HTML 辅助方法（摘抄）
——选自<ASP.NET MVC3 高级编程(第5章) 孙远帅 译> 第5章 表单和HTML辅助方法 本章内容简介: * 理解表单 * 如何利用HTML辅助方法 * 编辑和输入的辅助方法 ...
- 返璞归真 asp.net mvc (1) - 添加、查询、更新和删除的 Demo
原文:返璞归真 asp.net mvc (1) - 添加.查询.更新和删除的 Demo [索引页] [源码下载] 返璞归真 asp.net mvc (1) - 添加.查询.更新和删除的 Demo 作者 ...
- ABP 教程文档 1-1 手把手引进门之 AngularJs, ASP.NET MVC, Web API 和 EntityFramework（官方教程翻译版 版本3.2.5）含学习资料
本文是ABP官方文档翻译版,翻译基于 3.2.5 版本 转载请注明出处:http://www.cnblogs.com/yabu007/ 谢谢 官方文档分四部分 一. 教程文档 二.ABP 框架 三. ...
- 【第二篇】ASP.NET MVC快速入门之数据注解（MVC5+EF6）
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
- [转] ASP.NET MVC 模型绑定的功能和问题
摘要:本文将与你深入探究 ASP.NET MVC 模型绑定子系统的核心部分,展示模型绑定框架的每一层并提供扩展模型绑定逻辑以满足应用程序需求的各种方法. 同时,你还会看到一些经常被忽视的模型绑定技术, ...
随机推荐
- Linux之安装python
# yum install zlib-devel -y # tar -xf Python-3.6.0 cd Python-3.6.0 # ./configure --prefix=/usr/local ...
- 【数论】Factors of Factorial @upcexam6503
问题 G: Factors of Factorial 时间限制: 1 Sec 内存限制: 128 MB提交: 57 解决: 33[提交][状态][讨论版][命题人:admin] 题目描述 You ...
- JSP解决：Attempt to clear a buffer that's already been flushed错误（jsp:forward标签跳转空白）
[摘要:本日正在开辟过程当中发明一个题目:正在页里中应用了jsp:forward扔错Attempt to clear a buffer that's already been flushed!! 百思 ...
- __c语言__结构体、共用体、枚举__笔记
2017-09-16 21:14:09 结构体,共用体,枚举 1.结构体 把不同的类型整合成一个有机的整体,以便于引用,这个类型就叫做结构体 1)结构体变量的定义方式(3种)和引用成员变量: 定义一个 ...
- MAC 开启与关闭SIP
1. 查看SIP状态 在终端中输入csrutil status,就可以看到是enabled还是disabled. 2. 关闭SIP S1 重启MAC,按住cmd+R直到屏幕上出现苹果的标志和进度条, ...
- C# Task WhenAny和WhenAll 以及TaskFactory 的ContinueWhenAny和ContinueWhenAll的实现
个人感觉Task 的WaitAny和WhenAny以及TaskFactory 的ContinueWhenAny有相似的地方,而WaitAll和WhenAll以及TaskFactory 的Continu ...
- Sandcastle Help File Builder（.NET帮助文档工具）的版本选择心得——支持VS2010至VS2015，高版本项目文件问题
作者: zyl910 一.缘由 "Sandcastle Help File Builder"(简称SHFB)是一个很好用.NET 帮助文档生成工具. 但它的每个版本支持的VS版本范 ...
- 解决：Reading table information for completion of table and column names
mysql -A不预读数据库信息(use dbname 更快)—Reading table information for completion of table and column names Y ...
- mycat偶尔会出现JVM报错double free or corruption并崩溃退出
mycat偶尔会出现JVM报错double free or corruption并崩溃退出 没有复杂的sql,也没有大量的io INFO | jvm | // :: | *** Error in `j ...
- linux下fallocate快速创建大文件
以前创建文件我一般用dd来创建,例如创建一个512M的文件: dd命令可以轻易实现创建指定大小的文件,如 dd if=/dev/zero of=test bs=1M count=1000 会生成一个1 ...