.NET MVC 学习笔记（三）— MVC 数据显示-白红宇

.NET MVC 学习笔记（三）— MVC 数据显示

阅读量：5315 次

发布时间：2019-06-14

本文共 13123 字，大约阅读时间需要 43 分钟。

NET MVC 学习笔记（三）—— MVC 数据显示

在目前做的项目中，用的最多的数据展示控件就是table展示（说不是的请走开，不是一路人），以下详细阐述下table的使用方法。

先看效果：

上图中包含两个部分，上面的是检索区域，下面部分是数据显示区域。检索区域不做讨论，主要看数据显示部分。

数据显示部分包含三部分：【功能按钮】、【数据表】、【分页信息】

功能按钮：是关于数据的操作，新增，删除等

数据表：显示数据

分页信息：对查询的数据进行分页显示，包括前端分页和服务器分页两种，这里我们用服务器端分页，提高检索速度

这里介绍数据表的加载功能。

页面加载过程中，数据表显示初始化：

页面部分代码：

　　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 [            '',            '',            ''        ].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;        }    }}

后台代码：

/// /// 获取会员列表/// 
/// 查询条件/// 
     
      会员列表
     [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{    ///     /// create by: Pegasus    /// Filter    /// 
    [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        ///         /// Special Property for "SQL Where" Component        /// 
        [DataMember]        public String sWhere        {            set            {                swhere = value;            }            get            {                return swhere;            }        }        ///         /// Sort Field        /// 
        [DataMember]        public String SortField        {            set            {                sortField = value;            }            get            {                return sortField;            }        }        ///         /// Start row index        /// 
        [DataMember]        public Int32 StartRowIndex        {            get            {                return startRowIndex;            }            set            {                startRowIndex = value;            }        }        ///         /// Maximum return ows        /// 
        [DataMember]        public Int32 MaximumRows        {            get            {                return maximumRows;            }            set            {                maximumRows = value;            }        }        ///         /// Total Rows        /// 
        [DataMember]        public Int32 TotalRows{            get            {                return this.totalRows;            }            set            {                this.totalRows = value;            }        }        ///         /// Page Size 页面大小        /// for bootstrap table        /// 
        [DataMember]        public Int32 PageSize        {            get            {                return this.pageSize;            }            set            {                this.pageSize = value;            }        }        ///         /// Offset 页码        /// for bootstrap table        /// 
        [DataMember]        public Int32 Offset        {            get            {                return this.offset;            }            set            {                this.offset = value;            }        }        ///         /// Birdate        /// 
        [DataMember]        public DateTime? BirdateStart        {            get            {                return this.birdateStart;            }            set            {                this.birdateStart = value;            }        }        ///         /// Birdate        /// 
        [DataMember]        public DateTime? BirdateEnd        {            get            {                return this.birdateEnd;            }            set            {                this.birdateEnd = value;            }        }        ///         /// Create Date Time        /// 
        [DataMember]        public DateTime? CreateDateTimeStart        {            get            {                return this.createDateTimeStart;            }            set            {                this.createDateTimeStart = value;            }        }        ///         /// Create Date Time        /// 
        [DataMember]        public DateTime? CreateDateTimeEnd        {            get            {                return this.createDateTimeEnd;            }            set            {                this.createDateTimeEnd = value;            }        }        ///         /// Update Date Time        /// 
        [DataMember]        public DateTime? UpdateDateTimeStart        {            get            {                return this.updateDateTimeStart;            }            set            {                this.updateDateTimeStart = value;            }        }        ///         /// Update Date Time        /// 
        [DataMember]        public DateTime? UpdateDateTimeEnd        {            get            {                return this.updateDateTimeEnd;            }            set            {                this.updateDateTimeEnd = value;            }        }        #endregion    }}

ClientModel是数据基类，对应数据库表的字段 TableData.cs

///     /// Table分页数据    /// 
    [Serializable]    [DataContract]    public class TableData    {        [DataMember]        public Int32 total { get; set; }        [DataMember]        public dynamic rows { get; set; }    }

　　GetClientList方法：

///         /// 获取会员列表        /// 
        /// 
             public Dictionary
     
      > GetClientList(ClientFilter filter)        {            Dictionary
      
       > list = null;            using (DBManager manager = this.GetDBManager())            {                list = dao.GetClientList(manager, filter);            }            return list;        }

　　通过dao.GetClientList方法获取分页数据，具体方法内容根据实际情况编写代码即可。

转载于:https://www.cnblogs.com/byron-123/p/10429815.html

你可能感兴趣的文章