layui中创建table的方法

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自带的时间框，如下图：

在前台打印出来我们可以看到是这样的格式：

极限网络办公Office Automation

专为中小型企业定制的网络办公软件,富有竞争力的十大特性： 1、独创 web服务器、数据库和应用程序全部自动傻瓜安装，建立企业信息中枢 只需3分钟。 2、客户机无需安装专用软件，使用浏览器即可实现全球办公。 3、集成Internet邮件管理组件，提供web方式的远程邮件服务。 4、集成语音会议组件，节省长途话费开支。 5、集成手机短信组件，重要信息可直接发送到员工手机。 6、集成网络硬

下载

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

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

  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框架自带的模板语法，下图是对申请日期列进行一个时间的格式转换：

效果图：