支持固定表头、固定行、固定列左/列右,支持拖拽改变列宽度,支持排序,支持多级表头,支持单元格的自定义模板,支持对表格重载(比如搜索、条件筛选等),支持复选框,支持分页,支持单元格编辑等等一些列功能。
HTML:
关键字:时间段:
JavaScript:
我们先看看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 LayTableResultgetDemoData(string Start, string Length, string KeyWords, string StartTime, string EndTime) { ....==. LayTableResult result = new LayTableResult () { code = seleResult.Any() ? 0 : 1, count = resultCount,//总条数 data = seleResult, msg = "" }; return result; }
这边这个LayTableResult是根据页面需要来自己定义的一个类,如下(T为自己要返回的表):
public class LayTableResult{ public int code { get; set; } public string msg { get; set; } public int count { get; set; } public List data { get; set; } }
上一篇:LayUI插件开发规范有哪些