layui如何創(chuàng)建table

這篇文章主要介紹了layui如何創(chuàng)建table，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

　　table模塊是layui的又一走心之作，在layui2.0的版本中全新推出，是layui最核心的組成之一。它用于對(duì)表格進(jìn)行一些列功能和動(dòng)態(tài)化數(shù)據(jù)操作，涵蓋了日常業(yè)務(wù)所涉及的幾乎全部需求。推薦：layui使用教程

　　支持固定表頭、固定行、固定列左/列右，支持拖拽改變列寬度，支持排序，支持多級(jí)表頭，支持單元格的自定義模板，支持對(duì)表格重載（比如搜索、條件篩選等），支持復(fù)選框，支持分頁，支持單元格編輯等等一些列功能。

　　HTML：

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

　　<divclass="panelcol-md-12">

　　<br/>

　　<divclass="demoTable">

　　關(guān)鍵字：

　　<divclass="layui-inline">

　　<inputname="id"class="layui-input"id="keyword"placeholder="請(qǐng)輸入查詢關(guān)鍵字">

　　</div>

　　時(shí)間段：

　　<divclass="layui-inline">

　　<inputclass="layui-input"id="timearea"placeholder="請(qǐng)選擇查詢時(shí)間段"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;

　　//時(shí)間選擇器

　　laydate.render({

　　elem:'#timearea'

　　,range:true

　　});

　　});

　　functioninitTable(){

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

　　varstartTime="";

　　varendTime="";

　　if(timeArea){

　　startTime=timeArea.split("-")[0];//開始時(shí)間

　　endTime=timeArea.split("-")[1];//結(jié)束時(shí)間

　　}

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

　　vartable=layui.table;

　　//執(zhí)行渲染

　　table.render({

　　id:'demo',

　　elem:'#demo'//指定原始表格元素選擇器（推薦id選擇器）

　　,height:315//容器高度

　　,cols:[[{checkbox:true}

　　,{field:'DepartmentName',title:'單位名稱',width:180,sort:true}

　　,{field:'ISName',title:'信息系統(tǒng)名稱',width:200,sort:true}

　　,{field:'CloudType',title:'上云類別',width:130,sort:true}

　　,{field:'ContactPerson',title:'聯(lián)絡(luò)人',width:130,sort:true}

　　,{field:'ContactPhoneNumber',title:'聯(lián)絡(luò)人手機(jī)',width:130}

　　,{field:'ApplyDate',title:'申請(qǐng)日期',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,//默認(rèn)采用10

　　loading:true,

　　page:true

　　});

　　//監(jiān)聽工具條

　　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>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“l(fā)ayui如何創(chuàng)建table”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!