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 }
原文地址：https://www.cnblogs.com/1301694f/p/9323163.html
时间： 2024-10-15 04:31:40