这篇文章主要介绍了layui如何创建table,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
创新互联长期为1000+客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为丽水企业提供专业的网站设计、成都网站建设,丽水网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例,为您定制开发。
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”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!