layui怎么创建table模块

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

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

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

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

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 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; }
 
    }

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

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

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

效果图：

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