layui表格参数

转载

mb5ff2f24b42377 2018-07-17 14:29:00

文章标签 html 字段名 html页面数组自适应 文章分类 虚拟化云计算

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" οnclick="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 }