layui列表筛选列_layUI实现列表查询功能
layUI可以直接使用本地的json文件进行列表数据渲染,但,我们会发现,官网ctr+c ctr+v 过来的代码在做查询时每次看起来都有列表刷新的动作,但实际操作无效,百度了一大圈也没找到具体的原因,无奈继续回去看官网,后面总结出只有一点,也是大家比较容易忽略的一点:
官网说在查询时的url必须设置异步接口,so,如果我们不借助后台看起来这个效果好像是单靠前端是出不来,但,为了本地演示,这里写了一个很low的方法,单靠show()hide()方法来实现查询效果(效果演示可以单不建议实际开发中使用该方法)
以下代码粘贴复制便可直接使用:
搜索ID:
搜索
layui.use('table', function(){
var table = layui.table;
//方法级渲染
var tabins = table.render({
elem: '#LAY_table_user'
,url: 'new_file.json'
,cols: [[
{checkbox: true, fixed: true}
,{field:'id', title: 'ID', width:80, sort: true, fixed: true}
,{field:'username', title: '用户名', width:80}
,{field:'sex', title: '性别', width:80, sort: true}
,{field:'city', title: '城市', width:80}
,{field:'sign', title: '签名'}
,{field:'experience', title: '积分', sort: true, width:80}
,{field:'score', title: '评分', sort: true, width:80}
,{field:'classify', title: '职业', width:80}
,{field:'wealth', title: '财富', sort: true, width:135}
]]
,id: 'testReload'
,page: true
,height: 315
,done:function(res){
}
});
var $ = layui.$, active = {
reload: function(){
var demoReload = $('#demoReload');
//执行重载
table.reload('testReload', {
page: {
curr: 1 //重新从第 1 页开始
}
,where: {
key: {
id: demoReload.val()
}
}
});
}
};
$('.demoTable .layui-btn').on('click', function(){
search = $('#demoReload').val();
$('.layui-table-fixed tbody tr').each(function(i){
var id = $(this).children('td').eq(1).children('div').html();
if(id.indexOf(search)>=0){
$(this).show()
$('.layui-table-main tbody tr').eq(i).show()
}else{
$('.layui-table-main tbody tr').eq(i).hide()
$(this).hide();
}
});
});
});
layui列表筛选列_layUI实现列表查询功能相关推荐
- layui列表筛选列_layui框架的table字段筛选功能介绍
首先是在这个是针对字段的,所以给cols新增一个配置项,来决定哪些列需要有过滤的功能,一般来说只有那些数据可以归纳成几种分布的列才有做这个过滤的需求,比如例子中的性别列还有职业列,id列这些的意义不大 ...
- layui列表筛选列_Shopify搜索产品并筛选产品列表功能介绍
搜索产品并筛选产品列表 您的所有产品都列在 Shopify 的产品区域中.每个页面列出 50 种产品.要整理产品列表,并在跨多个页面的列表中查找产品,您可以对列表进行排序.搜索和筛选. 默认情况下,产 ...
- layui表格筛选列不随页面刷新重置
Layui table 自带筛选列的功能,但是这个筛选列会随着页面的刷新重置.用户第二次进入页面或者进行table手工渲染,都会使得筛选项重置. 本例利用layui自带的本地储存进行筛选列的数据保存, ...
- layui tabel筛选列 记忆功能
记录一下 参考:https://www.cnblogs.com/zuochanzi/p/14721567.html Mutation Observer:https://blog.csdn.net/u0 ...
- Java宇layUi结合xm-select 实现复选框查询功能
首先引用xm-select 我们项目的地址是 <script src="../../statics/plugins/layui/layui-formSelects/xm-select. ...
- 第三百八十九节,Django+Xadmin打造上线标准的在线教育平台—列表筛选结合分页...
第三百八十九节,Django+Xadmin打造上线标准的在线教育平台-列表筛选结合分页 根据用户的筛选条件来结合分页 实现原理就是,当用户点击一个筛选条件时,通过get请求方式传参将筛选的id或者值, ...
- js用递归遍历多维数组_JavaScript树结构操作:查找、遍历、筛选、树结构和列表结构相互转换...
经常有同学问树结构的相关操作,也写了很多次,在这里总结一下JS树形结构一些操作的实现思路,并给出了简洁易懂的代码实现. 本文内容结构大概如下: 一.遍历树结构 1. 树结构介绍 JS中树结构一般是类似 ...
- python自动翻译excel某一列_【python excel实例教程】怎样用Python将excel的某一列生成一个列表?...
用python做一个登录程序通过后直接进入某个excel? 是要做python自动化办公吧,这个很不错的,让办公很方便快捷的 python excel进行接口自动化测试,目前只写成了利用多个sheet ...
- JS树结构操作:查找、遍历、筛选、树结构和列表结构相互转换
经常有同学问树结构的相关操作,也写了很多次,在这里总结一下 JS 树形结构一些操作的实现思路,并给出了简洁易懂的代码实现. 本文内容结构大概如下: JS树结构相关操作 1 遍历树结构 1. 树结构介绍 ...
最新文章
- Python将classification_report的结论转化为字典(dict)形式并提取模型的灵敏度(sensitivity)、特异度(specificity)、PPV和NPV指标、混淆矩阵图
- Cocoa的MVC架构分析
- 【机器翻译】transformer
- HTTP权威指南记录 ---- HTTP概述
- 如何访问云端的tcpserver_远程读写FTP文件,花生壳盒子+Serv-U快速实现远程访问...
- linux png pdf,将多页PDF转换为PNG并返回(Linux)
- jQuery-1.9.1源码分析系列(五) 回调对象
- 初学多线程使用中踩过的坑
- python乘法表代码注释_Python统计python文件中代码,注释及空白对应的行数示例【测试可用】...
- 神经网络反向传导算法
- 制作网页版电子时钟特效
- 手把手教你学DSP 28335学习笔记
- 基于神经网络的分类设计——模式识别实验
- cordova 美洽_phonegap-cordova-美洽客服插件-Android
- 短视频平台、工具,新手在家用手机全程复制粘贴,一天收益247
- python登录微信pc版_详解PC端微信扫码注册和登录实例代码
- Android之——多媒体开发视频格式
- 射频识别技术IC卡——通讯协议概述
- 求偶数c语言程序,用C语言编写一道程序计算100以内偶数的和
- matlab初值的非线性最小二乘,Matlab与Mathematica在非线性拟合中的应用比较