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 }

转载于:https://www.cnblogs.com/1301694f/p/9323163.html

layui表格参数的更多相关文章

  1. datatable转layui表格【偏原理】

    如题这个类负责把datatable转换为layui表格可以显示的内容.适合配合表格url字段的webapi服务端,为其返回响应字符串.代码如下:using System;using System.We ...

  2. Bootstrap Table 表格参数详解

    表格参数 名称   标签   类型   默认   描述   - data-toggle String 'table' 不用写 JavaScript 直接启用表格. classes data-class ...

  3. layui 表格在排序之后没有重新渲染问题

    问题描述: 在layui表格中,最后一列增加了操作按钮,并且在某些行设置了样式,但是在排序之后,按钮的点击事件失效了,样式也没有了,可能是没有执行done回调 原因: done回调只有在render和 ...

  4. Layui表格编辑【不依赖Layui的动态table加载】

    依赖jquer,layui/css <td class="My_edit"></td> Jquery代码 //-----[Layui表格编辑(<td ...

  5. layui 表格设置td的宽度

    layui 表格设置td的宽度, td{ min-width: 150px; max-width: 200px; } 超出长度隐藏 overflow: hidden; text-overflow: e ...

  6. 设置layui表格cell的内边距

    /*设置layui表格cell的内边距*/ .layui-table-cell { height: 50px !important; line-height: 50px !important; }

  7. 关于layui表格渲染templet解析单元格的问题

    原文链接:https://blog.csdn.net/wyp_comeon/article/details/81735951关于表格解析自定义单元格的解析参数请先详细查看官方文档:http://www ...

  8. 改造 layui 表格组件实现多重排序

    layui 的表格组件目前只支持单列排序,在实际应用中并不能很好的支撑我们的业务需求.今天一时手痒,决定改造一番以支持多重排序. 实现思路也比较简单,只需要用一个数组来存放所有排序的列,再把这个数组传 ...

  9. layui表格点击排序按钮后，表格绑定事件失效解决方法

    最近项目使用layui较为频繁,遇到了一个麻烦的问题,网上搜索也没有看到同类型的问题,故此记下来. 需求是点击上图右侧表格中某一个单元格,会触发点击事件如下代码: $("table>t ...

随机推荐

  1. Go语言笔记 (2) 变量命名与多重赋值

    变量命名 1.大小写 观摩以下代码: func main() { var m int = "你" var M int = "我" fmt.Println(m,M ...

  2. Git-flow 使用笔记

    git-flow 原理:A successful Git branching model,两篇不错的中文翻译: Git开发管理之道,一个成功的Git分支模型. 简单来说,git-flow 就是在 gi ...

  3. 鬼吹灯之龙岭迷窟百度云迅雷BT在线观看免费全集

    看视频搜索微信公众号:qyw1091 还记得去年5月11日在高家堡举行的<鬼吹灯之龙岭迷窟>开机仪式吗?时隔数月,这部网剧于4月1日将在腾讯视频全网独播了! . <鬼吹灯之龙岭迷窟& ...

  4. 加密采矿僵尸网路病毒还在蔓延！ kinsing kdevtmpfsi redis yarn docker

    Hadoop yarn 加密采矿僵尸网路病毒还在继续蔓延! 解决步骤 如果你同样遇到了kdevtmpfsi异常进程,占用了非常高的CPU和出网带宽,影响到了你的正常业务,建议使用以下步骤解决 杀掉异常 ...

  5. Java中String转int型的方法以及错误处理

    应要求,本周制作了一个判断一个年份是否是闰年的程序.逻辑很简单,这里就不贴代码了.可是,在这次程序编写中发现了一个问题. 在输入年份时,如果输入1)字母2)空3)超过Int上限时,就会抛excepti ...

  6. Python操作rabbitmq系列（四）:根据类型订阅消息

    在上一章中,所有的接收端获取的所有的消息.这一章,我们将讨论,一些消息,仍然发送给所有接收端.其中,某个接收端,只对其中某些消息感兴趣,它只想接收这一部分消息.如下图:C1,只对error感兴趣,C2 ...

  7. tf.get_variable

    使用tf.get_variable()时,如果检测到命名冲突,系统不会处理冲突,而会报错. 如果已经创建的变量对象,就把那个对象返回,如果没有创建变量对象的话,就创建一个新的. tf.get_vari ...

  8. Leetcode1353-最多可以参加的会议数目

    题目描述: 给你一个数组 events,其中 events[i] = [startDayi, endDayi] ,表示会议 i 开始于startDayi ,结束于endDayi . 你可以在满足 st ...

  9. W - Palindrome HDU - 1513

    题目大意: 插入最少的字符,使原字符串成为回文串. 题解: LCS问题,将字符串反转,然后求这俩字符串的LCS,总长度减去LCS即可(多组输入). N最大是5E3,直接用二维数组会超内存.所以要用到滚 ...

  10. MySQL的单表查询

    单表查询 单表查询语法: select distinct 字段1,字段2... from 表名 where 条件 group by field having筛选 order by 关键字执行的优先级: ...