1. 程式人生 > >[.net core自我修煉3]關於前端2

[.net core自我修煉3]關於前端2

隨便說說

前端框架

我在本專案中使用的是 H-ui 前端框架 ,推薦下,對於前端小白來說說使用還是很舒服的,有官網,有說明,有樣式,不用為前端佈局煩惱,安心寫後端就好了。網址: http://www.h-ui.net/

Datatables簡介

Datatables(以下簡稱dt)是一款jquery表格外掛。它是一個高度靈活的工具,可以將任何HTML表格新增高階的互動功能。 網址:http://datatables.club/

初始化Datatables

新寫一個js,專門用來初始化Datatable

//DataTables.js  這是Datatables的相關知識,具體作用請求官網檢視
$.extend($.fn.dataTable.defaults, {
    "processing": true,//載入中
    "serverSide": true,//伺服器模式(★★★★★重要,本文主要介紹伺服器模式)
    "searching": false,//datatables自帶的搜尋
    "scrollX": true,//X滑動條
    "pagingType": "full_numbers",//分頁模式
    "ajax": {
        "type": "POST",//(★★★★★重要)
        "contentType": "application/json; charset=utf-8"
    },
    "language": { //使用中文介面
        "processing": "載入中...",
        "lengthMenu": "每頁顯示 _MENU_ 條資料",
        "zeroRecords": "沒有匹配結果",
        "info": "顯示第 _START_ 至 _END_ 項結果,共 _TOTAL_ 項",
        "infoEmpty": "顯示第 0 至 0 項結果,共 0 項",
        "infoFiltered": "(由 _MAX_ 項結果過濾)",
        "infoPostFix": "",
        "search": "搜尋:",
        "url": "",
        "emptyTable": "沒有匹配結果",
        "loadingRecords": "載入中...",
        "thousands": ",",
        "paginate": {
            "first": "首頁",
            "previous": "上一頁",
            "next": "下一頁",
            "last": "末頁"
        },
        "aria": {
            "sortAscending": ": 以升序排列此列",
            "sortDescending": ": 以降序排列此列"
        }
    }
});

網頁Datatable

dt支援多種資料來源,在此我們只說“伺服器處理”。 伺服器處理的程式碼如下(有些預設配置已經在上面的DataTables.js中配置,如開啟伺服器模式"serverSide": true):

<table id="area" class="table" data-order="[[0,&quot;desc&quot;]]" width="100%">
    <thead>
        <tr>
            <th data-data="Id" data-visible="false">Id</th>
            <th data-data="Name">名稱</th>
            <th data-data="Description" data-orderable="false">描述</th>
            <th data-data="PointX">X座標</th>
            <th data-data="PointY">Y座標</th>
        </tr>
    </thead>
</table>
<script>
    $(function(){
        var userTable = $('#area').DataTable({
            "ajax": {
                "url": "@Url.Action("GetDatas")", //這裡是請求後端
                "data": function(data) {
                    data.Name = $("#name").val();;//此處是新增額外的請求引數
                    return JSON.stringify(data);
                }
                  "columnDefs": [{ //收到資料後的處理
	                "targets": 0,
	                "width": "3%", //寬度使用百分比
	                render: function (data, type, full, meta) {
	                    return '<input type="checkbox" id="checkbox-all-' + full.Id+ '" value="' + full.Id+ '" />';
	                }],
					"aaSorting": [[1, "desc"]],//預設第幾個排序
	            },
            }
        });
    });
</script>

後端接收類

接收類可以使用ModelBinder(模型繫結)自定繫結請求的引數的方式,也比較方便。 此處的排序只實現了單列排序,如需多列排序請自行修改

/// <summary>
///     DataTables引數
/// </summary>
public class DataTablesParameters
{
    /// <summary>
    ///     請求次數計數器
    /// </summary>
    public int Draw { get; set; }

    /// <summary>
    ///     第一條資料的起始位置
    /// </summary>
    public int Start { get; set; }

    /// <summary>
    ///     每頁顯示的資料條數
    /// </summary>
    public int Length { get; set; }

    /// <summary>
    ///     資料列
    /// </summary>
    public List<DataTablesColumns> Columns { get; set; }

    /// <summary>
    ///     排序
    /// </summary>
    public List<DataTablesOrder> Order { get; set; }

    /// <summary>
    ///     搜尋
    /// </summary>
    public DataTablesSearch Search { get; set; }

    /// <summary>
    ///     排序欄位
    /// </summary>
    public string OrderBy
    {
        get
        {
            return Columns != null && Columns.Any() && Order != null && Order.Any()
                ? Columns[Order[0].Column].Data
                : string.Empty;
        }
    }

    /// <summary>
    ///     排序模式
    /// </summary>
    public DataTablesOrderDir OrderDir
    {
        get
        {
            return Order != null && Order.Any()
                ? Order[0].Dir
                : DataTablesOrderDir.Desc;
        }
    }
}

/// <summary>
///     排序
/// </summary>
public class DataTablesOrder
{
    /// <summary>
    ///     排序的列的索引
    /// </summary>
    public int Column { get; set; }

    /// <summary>
    ///     排序模式
    /// </summary>
    public DataTablesOrderDir Dir { get; set; }
}

/// <summary>
///     排序模式
/// </summary>
public enum DataTablesOrderDir
{
    /// <summary>
    ///     正序
    /// </summary>
    Asc,

    /// <summary>
    ///     倒序
    /// </summary>
    Desc
}

/// <summary>
///     資料列
/// </summary>
public class DataTablesColumns
{
    /// <summary>
    ///     資料來源
    /// </summary>
    public string Data { get; set; }

    /// <summary>
    ///     名稱
    /// </summary>
    public string Name { get; set; }

    /// <summary>
    ///     是否可以被搜尋
    /// </summary>
    public bool Searchable { get; set; }

    /// <summary>
    ///     是否可以排序
    /// </summary>
    public bool Orderable { get; set; }

    /// <summary>
    ///     搜尋
    /// </summary>
    public DataTablesSearch Search { get; set; }
}

/// <summary>
///     搜尋
/// </summary>
public class DataTablesSearch
{
    /// <summary>
    ///     全域性的搜尋條件的值
    /// </summary>
    public string Value { get; set; }

    /// <summary>
    ///     是否為正則表示式處理
    /// </summary>
    public bool Regex { get; set; }
}

返回Datatables規定的Json

Datatables要求返回的資料Json

名稱 型別 描述
draw integerJS 請求次數計數器,每次傳送給伺服器後又原封返回.
recordsTotal integerJS 即沒有過濾的記錄數(資料庫裡總共記錄數)
recordsFiltered integerJS 過濾後的記錄數
data arrayJS 表中中需要顯示的資料。
error stringJS 可選。你可以定義一個錯誤來描述伺服器出了問題後的友好提示

處理返回的資料

當我們把包含第n頁的m資料放在一個List的時候,我們就需要封裝以下Datatables想要的資料格式了。

public class DataTablesResult<TEntity>
{ 
    public DataTablesResult(int drawParam, int recordsTotalParam, int recordsFilteredParam, IReadOnlyList<TEntity> dataParam)
    {
        draw = drawParam;
        recordsTotal = recordsTotalParam;
        recordsFiltered = recordsFilteredParam;
        data = dataParam;
    }
    public DataTablesResult(string errorParam)
    {
        error = errorParam;
    }
    public int draw { get; set; }
    public int recordsTotal { get; set; }
    public int recordsFiltered { get; set; }
    public IReadOnlyList<TEntity> data { get; set; }
    public string error { get; set; }

呼叫

public JsonResult GetDatas(DataTablesParameters query)
{
	var data = new Area().GetData();
	if (!string.IsNullOrEmpty(query.Name))
	    data = data.Where(n => n.Name.Contains(query.Name));
	data = data.OrderBy(n=>n.Id);
	var count = data.Count();
	var result = data.Skip(query.Start).Take(query.Length).ToList();
	var resultJson = new DataTablesResult<Area>(draw, recordsFiltered, recordsFiltered, result);
	return Json(resultJson);
}

渲染Table,展示資料 資料中使用了data-data方式渲染資料,我實際使用中不行,應該還有地方沒調整好,我就用了這種方式。

 "columnDefs": [{ //收到資料後的處理
                "targets": 0,
                "width": "3%", //寬度使用百分比
                render: function (data, type, full, meta) {
                    return full.Id;
                }],