layui如何创建table

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

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

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

　　HTML：

　　<divclass="row"id="divParams">

　　<divclass="panelcol-md-12">

　　<br/>

　　<divclass="demoTable">

　　关键字：

　　<divclass="layui-inline">

　　<inputname="id"class="layui-input"id="keyword"placeholder="请输入查询关键字">

　　</div>

　　时间段：

　　<divclass="layui-inline">

　　<inputclass="layui-input"id="timearea"placeholder="请选择查询时间段"type="text">

　　</div>

　　<buttonclass="layui-btn"data-type="reload"&omicron;nclick="initTable();">搜索</button>

　　</div>

　　<tableclass="layui-table"id="demo"lay-filter="demo"></table>

　　</div>

　　</div>

　　<scriptid="dateTpl"type="text/html">

　　{{#varfn=function(){

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

　　};if(true){}}

　　{{fn()}}

　　{{#}}}

　　</script>

　　<scripttype="text/html"id="barDemo">

　　<aclass="layui-btnlayui-btn-mini"lay-event="detail">查看</a>

　　<aclass="layui-btnlayui-btn-mini"lay-event="edit">编辑</a>

　　<aclass="layui-btnlayui-btn-dangerlayui-btn-mini"lay-event="del">删除</a>

　　</script>

　　JavaScript：

　　<script>

　　$(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('编辑行：<br>'+JSON.stringify(data))

　　}

　　});

　　});

　　}

　　</script>

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