layui实现table加载的示例代码

js实现：

layui.use(['table','form'], function() {
$ = layui.jquery;
table = layui.table;
tableIns = initTable();
});
//加载列表
function initTable(){
// 执行渲染
tableIns = table.render({
id: 'idTest',
elem : '#deviceTable', // 指定原始表格元素选择器（推荐id选择器）
size: 'lg',
height : 'full-20', // 容器高度
url : '/csCloud-admin/deviceController/getDeviceList.do',
where: {
'orgId':$("#orgId").val(),
'coldNum':$("#coldNum").val(),
'devType':$("#devType").val(),
'isUsed':$("#isUsedId").val()
},
method : 'post',
cols : [ [ // 标题栏
{
field : 'rownum',
title : '序号',
width : 100,
sort : true
}, {
field : 'devNum',
title : '设备编号',
width : 200
}, {
field : 'devAlias',
title : '设备别名',
width : 100
}, {
field : 'devTypeVal',
title : '设备类型',
width : 100
}, {
field : 'devModel',
title : '设备型号',
width : 100
}, {
field : 'stateVal',
title : '设备状态',
width : 100
}, {
field : 'coldNum',
title : '冷库编号',
width : 100
}, {
field : 'orgName',
title : '所属机构',
width : 300
}, {
field : 'isUsedValue',
title : '状态',
width : 100
}, {
fixed : 'right',
width : 300,
align:'center',
toolbar : '#barDemo'
}
] ], // 设置表头
page : true,
limits : [ 10,30, 60, 90, 150, 300 ],
limit : 10
});
return tableIns;
}

jsp实现：

<div class="layui-fluid">
		<div class="layui-row">
			<div class="layui-col-lg12">
				<table id="deviceTable"></table>
			</div>
		</div>
	</div>

以上这篇layui实现table加载的示例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数

    Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数

    背景 笔者之前一直使用 bootstrap table ,因为当前项目中主要使用 Layui 框架,于是也就随了 Layui table ,只是在使用的时候出现了一些问题,当然也是怪自己不熟悉的锅吧! 出现的问题: 1.使用 Layui 官方提供的 [转换静态表格] 方式初始化加载时报 id 找不到的错误(自己的锅) 2.传递参数问题(姑且算是 Layui 官方的锅) 笔者使用的 table 加载刷新方案 有一个页面,左侧是一个 tree,右侧是一个 table,默认 table 加载全数据,当

  • layui之table checkbox初始化时选中对应选项的方法

    这个问题需要后台返回的数据格式跟layui中的示例中返回数据格式一模一样 下面是数据格式参考,第一个LAY_CHECKED:true是让checkbox选中的最重要的参数 LAY_CHECKED:true city:"浙江杭州" email:"xianxin@layui.com" experience:"12" id:"10002" ip:"192.168.0.8" joinTime:"2016-

  • Layui table field初始化加载时进行隐藏的方法

    layui应该是现在用的比较多的前端框架了,尤其是layui.table数据表格非常强大. 在很多时候,我们需要从数据库中拿到记录的id,但是我们又不希望在页面上展现,所以需要对一些字段进行隐藏. 看了网上很多的教程,各种对field进行隐藏,通过display:none等常规手段,虽然列是隐藏了,但是整个表格的展现却出了问题. 今天仔细看了文档,原来layui中已经封装了field隐藏的方法: 用法: {field:'id',title:'ID' ,hide:true},直接在fieId中,使

  • 关于Layui Table隐藏列问题

    layui没有提供Table隐藏列的功能(只是写这个文档的时候没有提供). 第一步:获取Layui的TableBox Jquery对象 var _table_box = $(this._table_elem).next().find(".layui-table-box"); this._table_elem 是指的Table标签的ID layui-table-box 是layui的类名 第二步:将需要隐藏的列添加 display:none 的样式 : _table_box.find(&

  • layui实现table加载的示例代码

    js实现: layui.use(['table','form'], function() { $ = layui.jquery; table = layui.table; tableIns = initTable(); }); //加载列表 function initTable(){ // 执行渲染 tableIns = table.render({ id: 'idTest', elem : '#deviceTable', // 指定原始表格元素选择器(推荐id选择器) size: 'lg',

  • Android ListView 实现上拉加载的示例代码

    本文介绍了Android ListView 实现上拉加载的示例代码,分享给大家,具体如下: 我们先分析一下如何实现 ListView 上拉加载. 当我们上拉的时候,会出现一个提示界面,即 ListView 的 Footer 布局. ListView 要实现滚动,所以要监听 ListView 滚动事件,即 OnScrollListener() 事件. 当我们开始滚动时,Footer 布局才慢慢显示出来,所以需要监听 ListView 的 onTouch() 事件. 实现思路 首先判断 ListVi

  • Flutter 实现下拉刷新上拉加载的示例代码

    本文介绍了Flutter 实现下拉刷新上拉加载的示例代码,分享给大家,具体如下: 效果图 使用方法 添加依赖 dependencies: pull_to_refresh: ^1.5.7 导入包 import 'package:pull_to_refresh/pull_to_refresh.dart'; 页面代码样例 class _MyHomePageState extends State<MyHomePage> { List<String> items = ["1&quo

  • bootstrap table动态加载数据示例代码

    bootstrap table动态加载数据示例代码

    我最近在研究bootstrap的学习路上,那么今天也算个学习笔记吧! 效果如下: 点击选择按钮,弹出模态框,加载出关键词列表 TABLE样式: <div class="modal fade " id="ClickModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" &

  • java selenium智能等待页面加载完成示例代码

    java selenium  智能等待页面加载完成 我们经常会碰到用selenium操作页面上某个元素的时候, 需要等待页面加载完成后, 才能操作.  否则页面上的元素不存在,会抛出异常. 或者碰到AJAX异步加载,我们需要等待元素加载完成后, 才能操作 selenium 中提供了非常简单,智能的方法,来判断元素是否存在. 阅读目录 实例要求 隐式等待 显式等待 实例要求 实例:set_timeout.html 下面的html 代码,  点击click 按钮5秒后, 页面上会出现一个红色的div

  • java实现静默加载Class示例代码

    前言 本文主要介绍了关于java静默加载Class的相关内容,之所以有这篇文章,是因为有时候在开发的时候,我们有这样的场景,我们只想得到一个Class的基本信息,但是并不想触发相关的静态代码块,在之前的一篇<JAVA扫描包>文章中就用到了这种方式,我将其称之为静默加载,如果有专业的叫法,欢迎指正. 一般情况下,我们加载一个Class的时候会使用Class.forName(String name)方法,该方法会返回一个Class对象,同时会触发该类中的静态代码块,举个例子: 我们先来编写一个只包

  • 微信小程序实现图片懒加载的示例代码

    本文主要介绍微信小程序的模拟图片懒加载,实现的原理是通过页面预加载图片(默认图),加载完成后再显示出来原图,而非真正意义上的懒加载(跟web的懒加载还有很大的差距),只是借此提高用户体验度. 多图片懒加载 1.xml页面 <block wx:for="{{list}}" wx:key=""> <image class='relative width-100 mgb-20 fade_in' src='{{item.cover_url}}' mode=

  • easyui下拉框动态级联加载的示例代码

    easyui的下拉框动态加载数据,高校中要根据首先查询所有学院,然后根据学院动态加载课程.下面看如何实现. 1.界面效果 2. html + js代码 <span>学院名称:</span> <input class="easyui-combobox" style="width:30%;" id="collegeName"> <span>课程名称:</span> <input cla

  • Swift快速集成下拉刷新和上拉加载更多示例代码

    Swift快速集成下拉刷新和上拉加载更多示例代码

    ESPullToRefresh ESPullToRefresh是一个非常易于开发者使用的下拉刷新和加载更多组件.通过一个UIScrollView的扩展,可以轻松为UIScrollView的所有子类添加下拉刷新功能. 如果你想定制组件的UI样式,只要实现指定的协议方法即可.Github地址 如何安装 使用CocoaPods pod "ESPullToRefresh" 手动安装 git clone https://github.com/eggswift/pull-to-refresh.gi

  • asp.net上传execl文件后,在页面上加载显示(示例代码)

    复制代码 代码如下: #region 上传Execl文件    protected void Button1_Click(object sender, EventArgs e)    {        if (FileUpload1.HasFile)        {            string NewFileName = string.Empty;            string ErrorMess = UpLoadFile(FileUpload1, ".xls|.xlsx&quo

随机推荐