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"ο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>




本文转载自中文网