在Web中基于表格的操作，比如添加行、单元格内容编辑等等功能，是完全基于js实现的。但如果程序员完全使用js或者jquery去编写表格控件，则会导致样式不统一，代码量较大等问题，尤其对于不太熟悉js的后端程序员来说，可能会是一个挑战。因此，网络上出现了很多基于表格操作的js控件，帮助程序员尤其是后端程序员也能够编写出漂亮的基于表格的应用。本篇博客以ASP.NET+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 > ???????<form > ???????<div > ???????????<div > ???????????????<label > ???????????????????单位代码： ???????????????</label> ???????????????<div > ???????????????????<input type="text" name="dwdm" /> ???????????????</div> ???????????</div> ???????????<div > ???????????????<label > ???????????????????工作单位： ???????????????</label> ???????????????<div > ???????????????????<input type="text" name="gzdw" /> ???????????????</div> ???????????</div> ???????????<div > ???????????????<label > ???????????????????个人社保代码： ???????????????</label> ???????????????<div > ???????????????????<input type="text" name="grsbdm" /> ???????????????</div> ???????????</div> ???????</div> ???????<div > ???????????<div > ???????????????<label > ???????????????????姓名： ???????????????</label> ???????????????<div > ???????????????????<input type="text" name="xm" /> ???????????????</div> ???????????</div> ???????????<div > ???????????????<label > ???????????????????身份证号码： ???????????????</label> ???????????????<div > ???????????????????<input type="text" name="sfzhm" /> ???????????????</div> ???????????</div> ???????????<div > ???????????????<label > ???????????????????档案号： ???????????????</label> ???????????????<div > ???????????????????<input type="text" name="dah" /> ???????????????</div> ???????????</div> ???????</div> ???????<div > ???????????<div > ???????????????<label > ???????????????????工作年月： ???????????????</label> ???????????????<div > ???????????????????<input type="text" name="gzny" /> ???????????????</div> ???????????</div> ???????????<div > ???????????????<label > ???????????????????退休年月： ???????????????</label> ???????????????<div > ???????????????????<input type="text" name="txny" /> ???????????????</div> ???????????</div> ???????????<div > ???????????????<button type="button" > ???????????????????查询 ???????????????</button> ???????????</div> ???????</div> ???????</form> ???????<div > ???????????<form > ???????????<div > ???????????????<div > ???????????????????<label > ???????????????????????<s>*</s>单位代码</label> ???????????????????<div > ???????????????????????<input name="DWDM" type="text" data-rules="{required:true}" > ???????????????????</div> ???????????????</div> ???????????????<div > ???????????????????<label > ???????????????????????<s>*</s>工作单位</label> ???????????????????<div > ???????????????????????<input name="GZDW" type="text" data-rules="{required:true}" > ???????????????????</div> ???????????????</div> ???????????</div> ???????????<div > ???????????????<div > ???????????????????<label > ???????????????????????<s>*</s>个人社保代码</label> ???????????????????<div > ???????????????????????<input name="GRSBDM" type="text" data-rules="{required:true}" > ???????????????????????<input name="GRSBDM" type="hidden" /> ???????????????????????<input name="SMR" type="hidden" /> ???????????????????</div> ???????????????</div> ???????????????<div > ???????????????????<label > ???????????????????????<s>*</s>档案号</label> ???????????????????<div > ???????????????????????<input name="DAH" type="text" data-rules="{required:true,number : true}" ???????????????????????????> ???????????????????????<input name="DAH" type="hidden" /> ???????????????????</div> ???????????????</div> ???????????</div> ???????????<div > ???????????????<div > ???????????????????<label > ???????????????????????<s>*</s>姓名</label> ???????????????????<div > ???????????????????????<input name="XM" type="text" data-rules="{required:true}" > ???????????????????</div> ???????????????</div> ???????????????<div > ???????????????????<label > ???????????????????????<s>*</s>身份证号</label> ???????????????????<div > ???????????????????????<input name="SFZHM" type="text" data-rules="{required:true}" > ???????????????????</div> ???????????????</div> ???????????</div> ???????????<div > ???????????????<div > ???????????????????<label > ???????????????????????工作年月</label> ???????????????????<div > ???????????????????????<input type="text" name="GZNY" /> ???????????????????</div> ???????????????</div> ???????????????<div > ???????????????????<label > ???????????????????????退休年月</label> ???????????????????<div > ???????????????????????<input type="text" name="TXNY" /> ???????????????????</div> ???????????????</div> ???????????</div> ???????????<div > ???????????????<div > ???????????????????<label > ???????????????????????退休类型</label> ???????????????????<div > ???????????????????????<textarea name="TXLX" type="text"></textarea> ???????????????????</div> ???????????????</div> ???????????</div> ???????????</form> ???????</div> ???????<div > ???????????<div > ???????????</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 title="修改档案信息">修改</span>‘; ???????????????????delStr = ‘<span 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 ></i>新建‘, btnCls: ‘button button-small‘, handler: function () { alert(‘新建‘); } }, ???????????????// ???????????????{ text: ‘<i ></i>编辑‘, btnCls: ‘button button-small‘, handler: function () { alert(‘编辑‘); } }, ???????????????// ???????????????{ text: ‘<i ></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"] ?? "20"); ???????int limit = int.Parse(Request["limit"] ?? "10"); ???????int pageIndex = int.Parse(Request["pageIndex"] ?? "1") + 1; ???????int all = 0; ???????#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[0].Rows.Count; ???????RYXX[] ryxxs = new RYXX[count]; ???????for (int i = 0; i < count; i++) ???????{ ???????????RYXX ryxx = dao.DataRowToModel(ds.Tables[0].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[0].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实现表格的操作
原文地址：https://www.cnblogs.com/guwei4037/p/8459423.html