layui相关问题总结
1.layui table回显选中
1) radio:
done:function(res, curr, count){
for(var i = 0; i < res.data.length; i++){
for(var j = 0; j < vm.chosenInfo.waterInfo.length; j++){
if(res.data[i].meterId == vm.chosenInfo.waterInfo[j].meterId){
res.data[i]["LAY_CHECKED"] = 'true';
var index= res.data[i]['LAY_TABLE_INDEX'];
$('tr[data-index=' + index + '] .layui-form-radio').click();
}
}
}
}
2) checkbox:
done:function(res, curr, count){
var num = 0;
for(var i = 0; i < res.data.length; i++){
for(var j = 0; j < vm.chosenInfo.equipment.length; j++){
if(res.data[i].materialId == vm.chosenInfo.equipment[j].materialId){
num++;
res.data[i]["LAY_CHECKED"] = 'true';
var index= res.data[i]['LAY_TABLE_INDEX'];
$('tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
$('tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
}
}
}
if(num == res.data.length){
$("th div input[type=checkbox]").next().addClass("layui-form-checked");
}
}
2.layui table高度设定
//动态监听表头高度变化,冻结行跟着改变高度
$(".layui-table-header tr").resize(function () {
$(".layui-table-header tr").each(function (index, val) {
$($(".layui-table-fixed .layui-table-header table tr")[index]).height($(val).height());
});
});
//初始化高度,使得冻结行表头高度一致
$(".layui-table-header tr").each(function (index, val) {
$($(".layui-table-fixed .layui-table-header table tr")[index]).height($(val).height());
});
//动态监听表体高度变化,冻结行跟着改变高度
$(".layui-table-body tr").resize(function () {
$(".layui-table-body tr").each(function (index, val) {
$($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
});
});
//初始化高度,使得冻结行表体高度一致
$(".layui-table-body tr").each(function (index, val) {
$($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
if(index==0){
$($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height()-1);
}
}); // 以下两行视情况而定
$('.layui-table-fixed.layui-table-fixed-r .layui-table-header').css({
'margin-bottom':'-1px',
'z-index':'99999'
})
$('.layui-table-fixed.layui-table-fixed-l .layui-table-header').css({
'margin-bottom':'0px',
'z-index':'99999'
})
layui相关问题总结的更多相关文章
- layui相关总结
表格操作实例1: https://sun_zoro.gitee.io/layuitableplug/testTableCheckboxDisabled?v0.1.9
- layui相关用法总结
1.关闭当前弹出层 parent.layer.close(parent.layer.getFrameIndex(window.name));
- Layui的一点小理解(上)
首先声明这是个人的一点理解,如有不对之处请指正,以下的例子有在官网上看到的,有的是自己写的.还是老规矩最后会附上官网的,如有不明白之处,请查看文档或留言. 既然说Layui,当然要简单的介绍以下什么是 ...
- asp.net core封装layui组件示例分享
用什么封装?自然是TagHelper啊,是啥?自己瞅文档去 在学习使用TagHelper的时候,最希望的就是能有个Demo能够让自己作为参考 怎么去封装一个组件? 不同的情况怎么去实现? 有没有更好更 ...
- .net mvc + layui做图片上传(二)—— 使用流上传和下载图片
摘要:上篇文章写到一种上传图片的方法,其中提到那种方法的局限性,就是上传的文件只能保存在本项目目录下,在其他目录中访问不到该文件.这与浏览器的安全性机制有关,浏览器不允许用户用任意的路径访问服务器上的 ...
- layui学习<一>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- layui弹出层之应用实例讲解
从酒店管理系统到智能门锁及其现在的资源共享平台,layui框架,我们团队用的比较多的就是这个layui弹出层. layui弹出层,除了页面iframe层我们比较常用还有就是表单校验和其他相关的友好提示 ...
- layui表格的新增和编辑功能前端代码
html页面的代码(注意:引入layui相关的css): <div class="layui-form-item"> <label class="lay ...
- layui的多文件列表上传功能前端代码
html页面的代码(注意:引入layui相关的css): <div class="layui-upload" style="margin-left: 130px&q ...
- .Net之Layui多图片上传
前言: 多图上传在一些特殊的需求中我们经常会遇到,其实多图上传的原理大家都有各自的见解.对于Layui多图上传和我之前所说的通过js获取文本框中的文件数组遍历提交的原理一样,只不过是Layui中的up ...
随机推荐
- Vue3学习笔记(1)
安装 //使用yarn构建 //安装yarn 需要管理员权限 sudo npm i yarn -g yarn create vite cd .. yarn yarn dev 目录结构 见名知义 四种语 ...
- char 与 string 互转 byte与string互转 list<string>与string[]互转 char与byte互转
class Program { static void Main(string[] args) { ...
- html的table多级表头表格的代码
1,两级表头的代码 <html> <head> <title>多层表头</title> <link rel="stylesheet&qu ...
- 修复右键批量打印PDF文件的功能
bat文件内容如下, 直接右键管理员运行即可. @echo off rem "功能描述:修复右键批量打印PDF文件的功能" rem "制作人:赵龙" rem & ...
- mysql索引 数据库优化
1.mysql索引结构b+树 a.首先要说二叉树,二叉查找树,数的结构不用多说,二叉查找树,大概就是几个原则,左边比右边的小,然后保持一个分布均匀,也就是树的高度尽量最小. b.b-树,b-树和二叉查 ...
- csr_matrix与ndarray类型互转
ndarry 转 csr_matrix>>> import numpy as np>>> import scipy.sparse >>> my_m ...
- Verilog仿真遇到的问题
1.Vivado 15.4仿真时编译没有报错,但是仿真不成功,逻辑很简单,full为高电平时,rd_en要拉高,但全程没有拉高! 检查语法发现语句" else if( empty == 'b ...
- base64 转图片
data:image+jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcg% ...
- kubectl的vistor模式
package main import ( "encoding/json" "encoding/xml" "log" ) type Visi ...
- mathcurve.com
https://mathcurve.com/surfaces.gb/surfaces.shtml