layui table渲染和数据处理
最近在用layui开发管理系统,果然是“累”ui
实现功能:将之前选择的选项勾选,渲染备注信息(原数据为空的列)
<table class="layui-hide" id="test" lay-filter="test">
</table>
table 渲染前修改数据,需要用ajax
$.ajax({
url: "/product/showProduct",
type: "GET",
dataType: 'json',
success: function (res) {
//数据处理
for (var item in res.datas) {
renderInfo(res.datas[item], idList, amountList, remarksList);
}
table.render({
elem: '#test'
// ,skin: 'nob' //无边框风格
, toolbar: '#toolbarDemo'
, title: '产品数据表'
// , totalRow: true
, cols: [
[
{type: 'checkbox', fixed: 'left'}
, {
field: 'id',
title: 'ID',
width: 80,
fixed: 'left',
unresize: true,
cellMinWidth: 80,//全局定义常规单元格的最小宽度,layui 2.2.1 新增
sort: true,
totalRowText: '合计'
}
, {field: 'productName', title: '功能模块'}
]
]
, data: res.datas
// , page: true //是否显示分页
});
}
});
table渲染后修改数据,layui提供done方法
table.render({
elem: '#test'
// ,skin: 'nob' //无边框风格
, url: '/product/showProduct'
, toolbar: '#toolbarDemo'
, title: '产品数据表'
, response: {
// countName: 'count',
dataName: 'datas' //规定数据列表的字段名称,默认:data
}
// , totalRow: true
, cols: [
[
{type: 'checkbox', fixed: 'left'}
, {
field: 'id',
title: 'ID',
width: 80,
fixed: 'left',
unresize: true,
cellMinWidth: 80 ,//全局定义常规单元格的最小宽度,layui 2.2.1 新增
sort: true,
totalRowText: '合计'
}
, {field: 'productName', title: '功能模块'}
]
],
// , page: true //是否显示分页
// done: function(res, curr, count){// done模板
// //如果是异步请求数据方式,res即为你接口返回的信息。
// //如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
// console.log(res.datas);
//
// //得到当前页码
// console.log(curr);
//
// //得到数据总量
// console.log(count);
// }
done: function (res, curr, count) {//修改totalRow时刚好用到了done
$(".layui-table-total div").each(function (i,item) {
var div_text = $(item).html();
if(div_text != ""&&div_text != '合计') {
$(item).html(total);
}
});
}
});
layui table渲染和数据处理的更多相关文章
- Layui table 组件的使用:初始化加载数据、数据刷新表格、传参数
背景 笔者之前一直使用 bootstrap table ,因为当前项目中主要使用 Layui 框架,于是也就随了 Layui table ,只是在使用的时候出现了一些问题,当然也是怪自己不熟悉的锅吧! ...
- 项目总结17-使用layui table分页表格
项目总结17-使用layui table分页表格总结 前言 在项目中,需要用到分页的表格来展示数据,发现layui的分页表格,是一个很好的选择:本文介绍layui table分页表格的前后端简单使用 ...
- Layui Table 分页记忆选中
Layui Table 分页记忆选中 挺好的功能,之前为什么放弃了,哈哈哈! 在最早的版本中,layui 的 table 会记录每页的勾选状态,但很多用户反馈这是 bug,因为当他们获取选中数据时,其 ...
- LayUI table表格控件 如何显示 对象中的属性(针对Mybatis的级联查询--一对一情况)
1.entity如下: 2.Mybatis的Mapper.xml文件如下 <resultMap id="BaseResultMapPlus" type="dicIt ...
- layui table异步调用数据的时候,数据展示不出来现象解决方案
最近使用layui table进行异步获取数据并填充的时候,控制台打印出数据长度为0,但是其中还有数据,网上找了很多办法,下边是我最后使用的. 一般,render渲染表格是独立的书写格式,但是我在做数 ...
- layui table 跨页记忆选择
layui 表格功能目前默认不支持跨页记忆选择 下面来实现layui table跨页记忆选择实现 基于layui版本 1.4.5 表格跨页通用方法 //表格分页复选框 layui.define(['j ...
- LayUI Table复杂表头实现
LayUI table官方文档中在介绍复杂表头时的用例仅使用了自动渲染的方式作为参考,而并未用到方法渲染的方式来做用例,这让部分不太熟悉layUI table的开发者会有些头疼,不知道如何在方法渲染中 ...
- layui table 表头和内容数据不能对齐
个人博客 地址:http://www.wenhaofan.com/article/20181224153019 今天使用layui table方法渲染时出现了个莫名其妙的错误 正常情况table应该是 ...
- layui table 表格上添加日期控件
方法一: var tableInit = table.render({ elem: '#tbtxrz' , method: 'post' , data: jsonData , height: &quo ...
随机推荐
- 有个原则就是实体类还是controller入参都应该是 包装类型
问题说明 我在使用JPA作为项目的ORM框架的时候,在分页查询中,不管咋样使用查询不出来数据,然后发现Hibernate构建的查询SQL中,在where子句中带上了createTime=0这个条件.这 ...
- C#使用反射设置属性值
最近在Refix一个支持Excel文件导入导出功能时,发现有用到反射的相关技能.故而在网上查了些资料,通过代码调试加深下理解. class Program { static void Main(str ...
- [Asp.Net Core] 关于 Blazor Server Side 的一些杂项, 感想
在2016年, 本人就开始了一个内部项目, 其特点就是用C#构建DOM树, 然后把DOM同步到浏览器中显示. 并且在一些小工程中使用. 3年下来, 效果很不错, 但因为是使用C#来构建控件树, 在没有 ...
- 透过 ReentrantLock 分析 AQS 的实现原理
对于 Java 开发者来说,都会碰到多线程访问公共资源的情况,这时候,往往都是通过加锁来保证访问资源结果的正确性.在 java 中通常采用下面两种方式来解决加锁得问题: synchronized 关键 ...
- Docker基础修炼1--Docker简介及快速入门体验
本文作为Docker基础系列第一篇文章,将详细阐述和分析三个问题:Docker是什么?为什么要用Docker?如何快速掌握Docker技术? 本系列文章中Docker的用法演示是基于CentOS7进行 ...
- 【开源】使用Angular9和TypeScript开发RPG游戏(20200410版)
源代码地址 通过对于斗罗大陆小说的游戏化过程,熟悉Angular的结构以及使用TypeScript的面向对象开发方法. Github项目源代码地址 RPG系统构造 ver0.03 2020/04/10 ...
- block 的内存结构衍生出来的面试题
今天在群里看到大佬们在讨论一个面试题,问如下代码在 32bit 和 64bit 系统上分别报什么错误: #import <Foundation/Foundation.h> int main ...
- python中装饰器的使用
看个例子: # 定义装饰器函数 def log(func): """ 接受一个函数作为参数,并返回一个函数 :param func: :return: "&qu ...
- 我去,还在这样读写 excel 这也太低效了吧!
前言 博文地址:https://sourl.cn/SsD3AM 最近读者小 H 给小黑哥发来私信: 小黑哥,最近我在负责公司报表平台开发,需要导出报表到 excel 中.每次使用 POI 开发,都要写 ...
- 构建Mysql服务器
<综合>构建Mysql服务器 构建MySQL服务器 数据库基本管理 MySQL 数据类型 表结构的调整 1 构建MySQL服务器 1.1 问题 本案例要求熟悉MySQL官方安装包的使用,快 ...