[.net core自我修煉3]關於前端2
阿新 • • 發佈：2018-12-20
隨便說說
前端框架
我在本專案中使用的是 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,"desc"]]" 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;
}],