layui表格参数
layui表格对数据进行用table样式展现
举个例子:
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>layui表格div容器</title> 6 </head> 7 <body> 8 <div id=“container”></div> 9 </body> 10 </html>
首先引入layui,jquery等插件 展示为js部分
1 <script> 2 layui.use('table', function(){ 3 var table = layui.table; 4 5 table.render({ 6 elem: '#container', //绑定控件，为html页面容器id 7 id：‘container’, //定义id 8 page:true, //开启分页 9 height：‘full’, 10 width ：$(document.body).width(), 11 url:'/demo/table/user/', //路径 12 method：‘post’, //请求方式 13 where ：‘＿where’, //查询条件 14 cellMinWidth: 80, //定义单元格（列）的最宽度， 15 request:{//重新指定响应参数名称 16 pageName:'page', 17 limitName:'pageSize', 18 } 19 response:{ 20 countName:'allcount' 21 } 22 cols: [[ 23 {field:'id', width:80, title: 'ID', sort: true} 24 ,{field:'username', width:80, title: '用户名'} 25 ,{field:'sex', width:80, title: '性别', sort: true} 26 ,{field:'city', width:80, title: '城市'} 27 ,{field:'sign', title: '签名', width: '30%', minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增 28 ,{field:'experience', title: '积分', sort: true} 29 ,{field:'score', title: '评分', sort: true} 30 ,{field:'classify', title: '职业'} 31 ,{title:'操作', width:'137',align:'center',templet:initDetail}, 32 ]] 33 }); 34 }); 35 </script>
基本参数:
filed为数据库的字段名(与字段名相符和)
title为展示表格的表头
limit为每页显示的条数(默认:10)。值务必对应 limits 参数的选项
limits为每页条数的选择项,例:[5,10,15]
width为表格列的宽度(可自适应宽度,不设置宽度)
sort为是否允许排序(默认:false),设置true对列开启排序功能
templet设置回调函数 后面加方法名
详情操作按钮显示于操作列 d为当前条数的所有值(格式为object)
1 function initDetail(d){ 2 return '<div><span class="operatestyle" onclick="showDetail(\''+d.caseid+'\')">详情</span></div>' 3 }
点击详情,查看详情页.此方法跳转路径需要先引ExtendForm.js插件 target控制打开方式 此方法传递为用post传递 在展示详情页可用post直接接收数组值
1 function showDetail(d){ 2 var data = {}; 3 data['字段id']=d; 4 参数传递... 5 ExtendForm.init({action:'路径',target:'_blank'}).bind(data).send(); 6 }
