.
NET MVC 学习笔记（三）—— MVC 数据显示
在目前做的项目中，用的最多的数据展示控件就是table展示（说不是的请走开，不是一路人），以下详细阐述下table的使用方法。
先看效果：
上图中包含两个部分，上面的是检索区域，下面部分是数据显示区域。检索区域不做讨论，主要看数据显示部分。
数据显示部分包含三部分：【功能按钮】、【数据表】、【分页信息】
功能按钮：是关于数据的操作，新增，删除等
数据表：显示数据
分页信息：对查询的数据进行分页显示，包括前端分页和服务器分页两种，这里我们用服务器端分页，提高检索速度
这里介绍数据表的加载功能。
页面加载过程中，数据表显示初始化：
页面部分代码：
<div class="box-header" id="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default" id="btnAdd">新增会员</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default" id="btnDelete">删除会员</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default" id="btnDownloadTemplate">下载模板</button>
</div>
<div class="btn-group" style="text-align:right;width:82px">
<label class="input-group-btn">
<input id="btnSelectData" type="file" name="file" accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" style="left: -9999px; position: absolute;">
<span class="btn btn-default" style="border-radius:3px">导入会员</span>
</label>
</div>
</div>
<div class="box-body">
<table id="tb_Client"></table>
</div>
JS代码：
$(function () {
//1.初始化Table
var oTable = new TableInit();
oTable.Init();
//2.初始化Button的点击事件
var oButtonInit = new ButtonInit();
oButtonInit.Init();
});
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#tb_Client').bootstrapTable({
url: '@Url.Content("~/Client/GetClientList")', //请求后台的URL（*）
method: 'post', //请求方式（*）
toolbar: '#toolbar', //工具按钮用哪个容器
striped: false, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
search: false, //是否显示表格搜索，此搜索是会员端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
showColumns: false, //是否显示所有的列
showRefresh: false, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
uniqueId: "Id", //每一行的唯一标识，一般为主键列
showToggle: false, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
columns: [{
checkbox: true
}, {
field: 'CardNo',
name: 'CardNo',
align: table_align,
title: '会员卡号'
}, {
field: 'UserName',
name: 'UserName',
align: table_align,
title: '会员名'
}, {
field: 'Sex',
name: 'Sex',
align: table_align,
title: '性别'
}, {
field: 'Birthdate',
name: 'Birthdate',
align: table_align,
title: '出生日期',
//获取日期列的值进行转换
formatter: function (value, row, index) {
return changeDateFormat(value, "YYYY-MM-DD")
}
}, {
field: 'Phone',
name: 'Phone',
title: '手机号',
align: table_align
}, {
field: 'Address',
name: 'Address',
title: '地址',
align: table_align
}, {
field: 'Score',
name: 'Score',
title: '积分',
align: table_align
}, {
field: 'GradeText',
name: 'GradeText',
title: '等级',
align: table_align
}, {
field: 'operate',
title: '编辑',
align: 'center',
events: operateEvents,
width: '8%',
formatter: operateFormatter
}]
});
};
//得到查询的参数
oTableInit.queryParams = function (params) {
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
PageSize: params.limit, //页面大小
Offset: params.offset / params.limit + 1, //页码
CardNo: $("#txtCardNo").val(),
UserName: $("#txtClientName").val(),
Phone: $("#txtPhone").val()
};
return temp;
};
return oTableInit;
};
var ButtonInit = function () {
var oInit = new Object();
var postdata = {};
oInit.Init = function () {
//初始化页面上面的按钮事件
$("#btnAdd")
.click(function () {
$("#myModalLabel").text("新增会员");
var options = {
Id: "",
CardNo: "",
UserName: "",
Sex: "",
Birthdate: "",
Phone: "",
Address: "",
Score: "",
GradeCode: ""
};
setFormValue(options);
$('#myClientModal').modal();
});
$("#btnDelete")
.click(function () {
removeRows();
});
$("#btnDownloadTemplate")
.click(function () {
window.location.href = "@Url.Content("~/Content/ImportClientDataTemplate.xlsx")";
});
};
return oInit;
};
function operateFormatter(value, row, index) {
return [
'<a class="edit" style="cursor: pointer" href="javascript:void(0)" title="编辑">',
'<i class="fa fa-edit"></i>',
'</a>'
].join('');
}
window.operateEvents = {
'click .edit': function (e, value, row, index) {
editRow(row);
}
};
// 表格数据对应方式
var table_align = "left"; //转换日期格式(时间戳转换为datetime格式)
function changeDateFormat(cellval, dateType) {
var dateVal = cellval + "";
if (cellval != null) {
var date = new Date(parseInt(dateVal.replace("/Date(", "").replace(")/", ""), 10));
var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
if (dateType == "YYYY-MM-DD") {
return date.getFullYear() + "-" + month + "-" + currentDate;
}
else if (dateType == "YYYY-MM-DD HH:MM:SS") {
return date.getFullYear() + "-" + month + "-" + currentDate + " " + hours + ":" + minutes + ":" + seconds;
}
}
}
后台代码：
/// <summary>
/// 获取会员列表
/// </summary>
/// <param name="filter">查询条件</param>
/// <returns>会员列表</returns>
[HttpPost]
public JsonResult GetClientList(ClientFilter filter)
{
// 检索条件
filter.SortField = "CardNo ASC";
filter.StartRowIndex = filter.Offset - 1;
// get Client list
var result = service.GetClientList(filter);
var resObj = new TableData();
foreach (var item in result)
{
resObj.total = item.Key;
resObj.rows = item.Value;
}
return Json(resObj, JsonRequestBehavior.AllowGet);
}
ClientFilter.cs
namespace CRM.Entity
{
/// <summary>
/// create by: Pegasus
/// Filter
/// </summary>
[Serializable]
[DataContract]
public class ClientFilter : ClientModel
{
#region Private Fields
private String swhere;
private String sortField;
private Int32 startRowIndex;
private Int32 maximumRows;
private Int32 totalRows;
private Int32 pageSize;
private Int32 offset; private DateTime? birdateStart; private DateTime? birdateEnd; private DateTime? createDateTimeStart; private DateTime? createDateTimeEnd; private DateTime? updateDateTimeStart; private DateTime? updateDateTimeEnd; #endregion #region Attributes
/// <summary>
/// Special Property for "SQL Where" Component
/// </summary>
[DataMember]
public String sWhere
{
set
{
swhere = value;
}
get
{
return swhere;
}
} /// <summary>
/// Sort Field
/// </summary>
[DataMember]
public String SortField
{
set
{
sortField = value;
}
get
{
return sortField;
}
} /// <summary>
/// Start row index
/// </summary>
[DataMember]
public Int32 StartRowIndex
{
get
{
return startRowIndex;
}
set
{
startRowIndex = value;
}
} /// <summary>
/// Maximum return ows
/// </summary>
[DataMember]
public Int32 MaximumRows
{
get
{
return maximumRows;
}
set
{
maximumRows = value;
}
} /// <summary>
/// Total Rows
/// </summary>
[DataMember]
public Int32 TotalRows
{
get
{
return this.totalRows;
}
set
{
this.totalRows = value;
}
} /// <summary>
/// Page Size 页面大小
/// for bootstrap table
/// </summary>
[DataMember]
public Int32 PageSize
{
get
{
return this.pageSize;
}
set
{
this.pageSize = value;
}
} /// <summary>
/// Offset 页码
/// for bootstrap table
/// </summary>
[DataMember]
public Int32 Offset
{
get
{
return this.offset;
}
set
{
this.offset = value;
}
} /// <summary>
/// Birdate
/// </summary>
[DataMember]
public DateTime? BirdateStart
{
get
{
return this.birdateStart;
}
set
{
this.birdateStart = value;
}
} /// <summary>
/// Birdate
/// </summary>
[DataMember]
public DateTime? BirdateEnd
{
get
{
return this.birdateEnd;
}
set
{
this.birdateEnd = value;
}
} /// <summary>
/// Create Date Time
/// </summary>
[DataMember]
public DateTime? CreateDateTimeStart
{
get
{
return this.createDateTimeStart;
}
set
{
this.createDateTimeStart = value;
}
} /// <summary>
/// Create Date Time
/// </summary>
[DataMember]
public DateTime? CreateDateTimeEnd
{
get
{
return this.createDateTimeEnd;
}
set
{
this.createDateTimeEnd = value;
}
} /// <summary>
/// Update Date Time
/// </summary>
[DataMember]
public DateTime? UpdateDateTimeStart
{
get
{
return this.updateDateTimeStart;
}
set
{
this.updateDateTimeStart = value;
}
} /// <summary>
/// Update Date Time
/// </summary>
[DataMember]
public DateTime? UpdateDateTimeEnd
{
get
{
return this.updateDateTimeEnd;
}
set
{
this.updateDateTimeEnd = value;
}
} #endregion
}
}
ClientModel是数据基类，对应数据库表的字段 TableData.cs
/// <summary>
/// Table分页数据
/// </summary>
[Serializable]
[DataContract]
public class TableData
{
[DataMember]
public Int32 total { get; set; }
[DataMember]
public dynamic rows { get; set; }
}
GetClientList方法：
/// <summary>
/// 获取会员列表
/// </summary>
/// <returns></returns>
public Dictionary<Int32, List<ClientDomain>> GetClientList(ClientFilter filter)
{
Dictionary<Int32, List<ClientDomain>> list = null;
using (DBManager manager = this.GetDBManager())
{
list = dao.GetClientList(manager, filter);
}
return list;
}
通过dao.GetClientList方法获取分页数据，具体方法内容根据实际情况编写代码即可。