zoukankan      html  css  js  c++  java
  • layui实现table加载的示例代码

     1 layui.use(['table','form'], function() {
     2 $ = layui.jquery;
     3 table = layui.table;
     4 tableIns = initTable();
     5 });
     6 //加载列表
     7 function initTable(){
     8 // 执行渲染
     9 tableIns = table.render({
    10 id: 'idTest',
    11 elem : '#deviceTable', // 指定原始表格元素选择器(推荐id选择器)
    12 size: 'lg',
    13 height : 'full-20', // 容器高度
    14 url : '/csCloud-admin/deviceController/getDeviceList.do',
    15 where: {
    16 'orgId':$("#orgId").val(),
    17 'coldNum':$("#coldNum").val(),
    18 'devType':$("#devType").val(),
    19 'isUsed':$("#isUsedId").val()
    20 },
    21 method : 'post',
    22 cols : [ [ // 标题栏
    23 {
    24 field : 'rownum',
    25 title : '序号',
    26 width : 100,
    27 sort : true
    28 }, {
    29 field : 'devNum',
    30 title : '设备编号',
    31 width : 200
    32 }, {
    33 field : 'devAlias',
    34 title : '设备别名',
    35 width : 100
    36 }, {
    37 field : 'devTypeVal',
    38 title : '设备类型',
    39 width : 100
    40 }, {
    41 field : 'devModel',
    42 title : '设备型号',
    43 width : 100
    44 }, {
    45 field : 'stateVal',
    46 title : '设备状态',
    47 width : 100
    48 }, {
    49 field : 'coldNum',
    50 title : '冷库编号',
    51 width : 100
    52 }, {
    53 field : 'orgName',
    54 title : '所属机构',
    55 width : 300
    56 }, {
    57 field : 'isUsedValue',
    58 title : '状态',
    59 width : 100
    60 }, {
    61 fixed : 'right',
    62 width : 300,
    63 align:'center',
    64 toolbar : '#barDemo'
    65 }
    66 ] ], // 设置表头
    67 page : true,
    68 limits : [ 10,30, 60, 90, 150, 300 ],
    69 limit : 10
    70 });
    71 return tableIns;
    72 }
    1 <div class="layui-fluid">
    2   <div class="layui-row">
    3       <div class="layui-col-lg12">
    4      <table id="deviceTable"></table>
    5      </div>
    6   </div>
    7 </div>
  • 相关阅读:
    03.redis集群
    02.redis数据同步
    01.redis数据类型
    06.MySQL主从同步
    05.MySQL优化
    04.MySQL慢查询
    lamp服务器站点目录被植入广告代码
    tar命令简单用法
    linux基础优化
    Linux 思想与法则
  • 原文地址:https://www.cnblogs.com/lgx5/p/12602968.html
Copyright © 2011-2022 走看看