Shulou(Shulou.com)06/01 Report--

这篇文章主要介绍了layui如何创建table，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

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

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

HTML：

关键字：

时间段：

搜索

{{#varfn=function(){

returnmoment(d.ApplyDate).format("YYYY-MM-DD");

};if(true){}}

{{fn()}}

{{#}}}

查看

编辑

删除

JavaScript：

$(document).ready(function(){

initTable();

});

layui.use('laydate',function(){

varlaydate=layui.laydate;

//时间选择器

laydate.render({

elem:'#timearea'

,range:true

});

});

functioninitTable(){

vartimeArea=$("#timearea").val();

varstartTime="";

varendTime="";

if(timeArea){

startTime=timeArea.split("-")[0];//开始时间

endTime=timeArea.split("-")[1];//结束时间

}

layui.use('table',function(){

vartable=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){

vardata=obj.data;

if(obj.event==='detail'){

layer.msg('ID：'+data.applyid+'的查看操作');

}elseif(obj.event==='del'){

layer.confirm('真的删除行么',function(index){

obj.del();

layer.close(index);

});

}elseif(obj.event==='edit'){

layer.alert('编辑行：

'+JSON.stringify(data))

}

});

});

}

感谢你能够认真阅读完这篇文章，希望小编分享的"layui如何创建table"这篇文章对大家有帮助，同时也希望大家多多支持，关注行业资讯频道，更多相关知识等着你来学习!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.