.NET MVC 學習筆記（三）— MVC 數據顯示

.

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方法獲取分頁數據，具體方法內容根據實際狀況編寫代碼便可。