table模組是layui的又一走心之作，在 layui 2.0 的版本中全新推出，是 layui 最核心的組成之一。它用於對表格進行一些列功能和動態化資料操作，涵蓋了日常業務所涉及的幾乎全部需求。建議：layui使用教學
支援固定表頭、固定行、固定列左/列右，支援拖曳改變列寬度，支援排序，支援多層表頭，支援單元格的自訂模板，支援對錶格重載（例如搜尋、條件篩選等），支援複選框，支援分頁，支援單元格編輯等等一些列功能。
HTML：
<div class="row" id="divParams">
<div class="panel col-md-12">
<br />
<div class="demoTable">
关键字：
<div class="layui-inline">
<input name="id" class="layui-input" id="keyword" placeholder="请输入查询关键字">
</div>
时间段：
<div class="layui-inline">
<input class="layui-input" id="timearea" placeholder="请选择查询时间段" type="text">
</div>
<button class="layui-btn" data-type="reload" οnclick="initTable();">搜索</button>
</div>
<table class="layui-table" id="demo" lay-filter="demo"></table>
</div>
</div>
<script id="dateTpl" type="text/html">
{{# var fn = function(){
return moment(d.ApplyDate).format("YYYY-MM-DD");
}; if(true){ }}
{{ fn() }}
{{# } }}
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-mini" lay-event="detail"> 查看</a>
<a class="layui-btn layui-btn-mini" lay-event="edit"> 编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del"> 删除</a>
</script>JavaScript：
<script>
$(document).ready(function () {
initTable();
});
layui.use('laydate', function () {
var laydate = layui.laydate;
//时间选择器
laydate.render({
elem: '#timearea'
, range: true
});
});
function initTable() {
var timeArea = $("#timearea").val();
var startTime = "";
var endTime = "";
if (timeArea) {
startTime = timeArea.split(" - ")[0];//开始时间
endTime = timeArea.split(" - ")[1];//结束时间
}
layui.use('table', function () {
var table = layui.table;
//执行渲染
table.render({
id: 'demo',
elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
, height: 315 //容器高度
, cols: [[{ checkbox: true }
, { field: 'DepartmentName', title: '单位名称', width: 180, sort: true }
, { field: 'ISName', title: '信息系统名称', width: 200, sort: true }
, { field: 'CloudType', title: '上云类别', width: 130, sort: true }
, { field: 'ContactPerson', title: '联络人', width: 130, sort: true }
, { field: 'ContactPhoneNumber', title: '联络人手机', width: 130 }
, { field: 'ApplyDate', title: '申请日期', width: 150, sort: true, templet: '#dateTpl' }
, { field: 'CloudState', title: '操作', width: 160, fixed: 'right', toolbar: '#barDemo' }
]],
url: '/Order/GetTableData/',
where: { KeyWords: $("#keyword").val(), StartTime: startTime, EndTime: endTime },
method: 'post',
limits: [10, 20, 30, 50, 100]
, limit: 10, //默认采用10
loading: true,
page: true
});
//监听工具条
table.on('tool(demo)', function (obj) {
var data = obj.data;
if (obj.event === 'detail') {
layer.msg('ID：' + data.applyid + ' 的查看操作');
} else if (obj.event === 'del') {
layer.confirm('真的删除行么', function (index) {
obj.del();
layer.close(index);
});
} else if (obj.event === 'edit') {
layer.alert('编辑行：<br>' + JSON.stringify(data))
}
});
});
}
</script>我們先來看看api中描述的非同步請求資料所需的參數：
預設傳遞的是page和limit ，可依需求修改參數名，兩個參數分別為是我們傳統的頁碼和頁面大小。
where 是其他附加參數，根據前台頁面的需要與否來選擇是否傳值。
在這裡我修改了一下預設值（在table.js檔案中），將原有的page和limit修改為Start和Length：
以下為後台Action 邏輯：
public ActionResult GetTableData(string Start, string Length, string KeyWords, string StartTime,string EndTime)
{
if (string.IsNullOrWhiteSpace(Start) || string.IsNullOrWhiteSpace(Length))
{
return Json(new { Success = false, Message = "" }, JsonRequestBehavior.AllowGet);
}
var demoList = orderdal.getDemoData(Start, Length, KeyWords, StartTime, EndTime);
return Json(demoList, JsonRequestBehavior.AllowGet);
}這裡我們除了預設的兩個參數以外還附加了三個參數，與前台搜尋框對應，時間段比較特殊，是layui自帶的時間框，如下圖：
在前台列印出來我們可以看到是這樣的格式：
#所以需要轉換一下以便於後台篩選：
#然後貼一下返回資料格式的程式碼：
public LayTableResult<V_MoveUnionDeployCloudBase> getDemoData(string Start, string Length, string KeyWords, string StartTime, string EndTime)
{
....==.
LayTableResult<V_MoveUnionDeployCloudBase> result = new LayTableResult<V_MoveUnionDeployCloudBase>()
{
code = seleResult.Any() ? 0 : 1,
count = resultCount,//总条数
data = seleResult,
msg = ""
};
return result;
}這邊這個LayTableResult是根據頁面需要來自己定義的一個類，如下（T為自己要返回的表)：
public class LayTableResult<T>
{
public int code { get; set; }
public string msg { get; set; }
public int count { get; set; }
public List<T> data { get; set; }
}至此，所有的邏輯都寫完了，需要強調的一點是，當你進行條件篩選的時候應該給搜尋按鈕加個屬性，如下：
然後操作列是在外部綁定的html：
如果需要自訂列，使用LayUI框架自帶的範本語法，下圖是對申請日期列進行一個時間的格式轉換：
#效果圖：
以上是layui中創建table的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
