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实现列表查询功能
layUI可以直接使用本地的json文件进行列表数据渲染,但,我们会发现,官网ctr+c ctr+v 过来的代码在做查询时每次看起来都有列表刷新的动作,但实际操作无效,百度了一大圈也没找到具体的原因, ...
- layui列表显示缩略图_layui 表格中实现照片预览,点击查看原图
人员表格中实现照片预览,并且可点击放大.查看原图 js //定义列 var cols = [ [{ type: 'radio', width: 60 }, { type: 'numbers', wid ...
- 列表查询,添加功能---JSP,servlet
1.列表查询以及添加功能的需求 列表查询功能: *用户可以通过点击一个超链接或者按钮,经过UserListServlet 类处理后,跳转到查询后的界面list.jsp *使用Druid数据库连接池技术 ...
- Layui列表分页功能前后台实现(傻瓜式教程)
Layui列表分页功能前后台实现 layui一直备受国内web开发者的喜欢.使用简单,样式也较为好看.本次说一下layui分页的实例,首先先引入layui,那是肯定的. 效果图: 引入一个maven依 ...
- Kotlin实战案例:实现RecyclerView分页查询功能(仿照主流电商APP,可切换列表)
n实战案例:带你实现RecyclerView分页查询功能(仿照主流电商APP,可切换列表和网格效果) 随着Kotlin的推广,一些国内公司的安卓项目开发,已经从Java完全切成Kotlin了.虽然Ko ...
- CRM客户关系管理系统开发第十九讲——实现客户拜访记录管理模块中条件查询客户拜访记录列表的功能
在客户拜访记录列表页面上准备一些筛选条件 首先,咱得在客户拜访记录列表页面上准备一些筛选条件,不妨我们按照拜访时间来进行筛选.之前咱在实现联系人管理模块中条件查询联系人列表的功能时,文本输入框使用的是 ...
- CRM客户关系管理系统开发第十七讲——实现客户拜访记录管理模块中分页查询客户拜访记录列表的功能
在CRM客户关系管理系统中,客户的拜访是很重要的一个环节,由业务员面见客户并介绍公司的相关的业务,在业务员回到公司以后,需要对此次的拜访的整个过程记录下来,记录中需要包含拜访的客户的姓名,拜访的时间以 ...
- C#学生管理系统——班级列表(查询功能)
C#学生管理系统--班级管理的班级列表(查询功能) 上次的年级列表做好了,今天就来做班级管理中的班级列表,与年级列表不同的是,班级列表增加了查询功能,如下图: 界面布局部分: 简单写下,查询这个浅色的 ...
- layui自定义查询条件html页面,Layui的数据表格+springmvc实现搜索功能的例子_飛雲_前端开发者...
如下所示: 主要在前端页面加: 搜索ID: userid content 搜索 在 reload:function () { var keyWord=$("#keyWord").v ...
最新文章
- C语言循环选择还有,C语言第五讲,语句 顺序循环选择.(示例代码)
- 关于图片上传的个人摘要
- python的if not用法
- webstorm+nodejs+JetBrains IDE Support+chrome打造前端开发神器
- [UE4]性能优化指南(程序向)
- 朴素贝叶斯算法-分类算法
- requests session
- image 第二次使用就出错是怎么回事_第二次上机报告-RNA-seq (HISAT - SAMtools- StringTie - ballgown)amp;amp;Gene-Assembly
- 基于MATLAB的车牌识别系统
- MES系统供应商评估报告-- Gartner出品
- Jetbrains IDE 各种 plugins 插件下载
- 软件测试工程师晋升通道
- 2020亚太数学建模竞赛A题翻译
- 计算日期差(C/C++实现)
- 女性贫血的经典食疗方
- 树莓派使用排线摄像头和远程视频监控
- mybatis-sqlserver批量新增返回id
- 【无线】【流程】QCA无线驱动收包流程分析
- ZYNQ-AX7020学习笔记
- select2的使用
热门文章
- python 中值滤波
- TensorFlow 莫烦 手写识别 cross_entry (五)
- python管理图片_Django 管理图片
- 108. Leetcode 188. 买卖股票的最佳时机 IV (动态规划-股票交易)
- MAS 714总复习
- 文巾解题 326. 3的幂
- Linux疑难杂症解决方案100篇(二)-SHELL编程函数的定义及调用
- SVM -支持向量机原理详解与实践之五
- Scrapy实战篇(二)之爬取链家网成交房源数据(下)
- Hadoop学习之HDFS架构(二)