layui怎么创建table模块

layui怎么创建table模块?针对这个问题,这篇文章给出了相对应的分析和解答,希望能帮助更多想解决这个问题的朋友找到更加简单易行的办法。

创新互联建站-专业网站定制、快速模板网站建设、高性价比华阴网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式华阴网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖华阴地区。费用合理售后完善,10余年实体公司更值得信赖。

table模块是layui的又一走心之作,在 layui 2.0 的版本中全新推出,是 layui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求。推荐:layui使用教程

支持固定表头、固定行、固定列左/列右,支持拖拽改变列宽度,支持排序,支持多级表头,支持单元格的自定义模板,支持对表格重载(比如搜索、条件筛选等),支持复选框,支持分页,支持单元格编辑等等一些列功能。

HTML:


关键字:
时间段:

JavaScript:

我们先看看api中描述的异步请求数据需要的参数:

layui怎么创建table模块

默认传递的是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自带的时间框,如下图:

layui怎么创建table模块

所以需要转换一下以便于后台筛选:

layui怎么创建table模块

然后贴一下返回数据格式的代码:

  public LayTableResult getDemoData(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怎么创建table模块

至此,所有的逻辑都写完了,需要强调的一点是,当你进行条件筛选的时候应该给搜索按钮加个属性

然后操作列是在外部绑定的html:

layui怎么创建table模块

如果需要自定义列,使用LayUI框架自带的模板语法,下图是对申请日期列进行一个时间的格式转换:

layui怎么创建table模块

效果图:

layui怎么创建table模块

关于layui创建table模块的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


新闻标题:layui怎么创建table模块
当前路径:http://myzitong.com/article/iesgic.html