layui下拉框数据过万渲染渲染问题解决方案
方案一：layui下拉框分页插件
https://fly.layui.com/jie/29002/
此插件我用了下浏览器缓存有问题，而且当下拉框数据量过万后，会一直渲染不出来，期待后期作者优化
如图下拉框效果：
引入js和css
<script src="${contextPath}/static/selectPage/js/utils.js" type="text/javascript" charset="utf-8"></script>
<script src="${contextPath}/static/selectPage/js/selectPageTool.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="${contextPath}/static/selectPage/css/cyType.css" media="all">
<link rel="stylesheet" href="${contextPath}/static/selectPage/css/cyStyle.css" media="all">
<link rel="stylesheet" href="${contextPath}/static/selectPage/css/font-awesome.min.css" media="all">
<link rel="stylesheet" href="${contextPath}/static/layui/css/layui.css">
<script src="${contextPath}/static/lib/jquery.js"></script>
<script src="${contextPath}/static/layui/layui.js"></script>
<body>
<form class="layui-form">
<input type="hidden" id="code" name="code" value="${materielEntity.code}">
<div class="layui-form-item">
<label class="layui-form-label">下拉框</label>
<div class="layui-input-block" style="width:80%">
//layui原生下拉框支撑不了大数据
<%-- <select name="cardCode" lay-filter="" lay-search>
<option value="">请选择</option>
<c:forEach items="${sapSuppliers}" var="sapSupplier">
<option value="${sapSupplier.cardCode}" <c:if test='${materielEntity.cardCode == sapSupplier.cardCode}'>selected="selected"</c:if> >${sapSupplier.cardCode}</option>
</c:forEach>
</select> --%>
//这个是下拉框分页的样式，这个插件也是有问题滴，看着用
<div style="margin-top:4%" cyType="selectPageTool" cyProps="url:'/sapSupplier/findAllSupplier',cache:false, checkbox:'false',tips:'请选择'"
name="cardCode" value="${materielEntity.cardCode}" class="layui-input-normal">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="Form">保存</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</body>
<div style="margin-top:4%" cyType="selectPageTool" cyProps="url:'/sapSupplier/findAllSupplier',cache:false, checkbox:'false',tips:'请选择'"
name="cardCode" value="${materielEntity.cardCode}" class="layui-input-normal">
</div>
1.name 填你需要渲染的字段，新增和编辑重新渲染都是靠这个name
2. value 渲染的code
3.url和平常我们写ajax访问的后台接口一样
//url后台接口
@RequestMapping(value = "findAllSupplier")
Map<String, Object> findAllSupplier() { Map<String, Object> map = new HashMap<>();
//数据库对应的实体集合
List<SapSupplier> sapSuppliers = sapSupplierService.findAll();
//我们需要返回前端的json实体集合
List<SelectPageJson> selectPageJsons = new ArrayList<>();
if(sapSuppliers != null && sapSuppliers.size() > 0) {
for(SapSupplier sapSupplier : sapSuppliers) {
SelectPageJson selectPageJson = new SelectPageJson();
selectPageJson.setCode(sapSupplier.getCardCode());
selectPageJson.setValue(sapSupplier.getCardName());
selectPageJsons.add(selectPageJson);
}
}
map.put("code", 0);
map.put("data", selectPageJsons);
map.put("count", selectPageJsons.size());
map.put("msg", "成功");
return map;
}
返回的数据格式类似这样：
{
"code": 0,
"msg": "",
"count": 16,
"data": [//SelectPageJson 集合
code:"",
value:"";
]
}
/**
* @Description: layui 分页下拉框插件json格式
* @date: 2019年4月19日 下午5:28:16
*/
public class SelectPageJson { private String code; private String value; public String getCode() {
return code;
} public void setCode(String code) {
this.code = code;
} public String getValue() {
return value;
} public void setValue(String value) {
this.value = value;
} }
关键字搜索的jpa对应的sql
/**
* @Description: CardName模糊查询
* @date: 2019年4月26日 上午11:49:20
*/
@Query(value="SELECT card_code FROM sap_supplier s WHERE LOCATE(?1, s.card_name)>0 and s.delete_mark = false ORDER BY s.create_date",nativeQuery=true)
List<String> findListByCardName(String cardName);
LOCATE(?1, s.card_name)>0 模糊查询
方案二：下拉框嵌入分页表格，
tableSelect 下拉表格选择器
https://fly.layui.com/extend/tableSelect/#doc
<body>
<form class="layui-form">
<input type="hidden" id="code" name="code" value="${salesOrder.code}">
<div class="layui-form-item">
<label class="layui-form-label">客户/供应商</label>
<div class="layui-input-block" style="width:80%">
<div class="layui-input-inline">
<input id="cardCode" type="text" name="cardCode" placeholder="请输入" autocomplete="off" class="layui-input">//下拉框样式
<input type="hidden" name="cardCode" id="cardCode2" value="${salesOrder.cardCode}">//传入后台的code
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="Form">保存</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</body>
//缺少layui css等文件自己引入
<script src="${contextPath}/static/layui/layui.all.js"></script>
<script src="${contextPath}/static/tableSelect/tableSelect.js" type="text/javascript" charset="utf-8"></script>
<script src="${contextPath}/static/backend/js/baseManage/salesOrder/salesOrder_edit.js"></script>
<script type="text/javascript">
var form = layui.form;
form.render();
var tableSelect = layui.tableSelect;//非模块化使用
tableSelect.render({
elem: '#cardCode',//主建 和cols的cardcode对应
checkedKey: 'cardCode',//和cols的cardCode相对应
searchKey: 'cardName',//传入后台的搜索关键字
table: {
url: 'xx/findAllByPageAndLimit',//后台java代码接口
cols: [[
{ type: 'radio' },//开启单选
{ field: 'cardCode', title: '业务伙伴代码', width: 100 },//列名1
{ field: 'cardName', title: '业务伙伴名称', width: 100 },//列名2
]]
},
done: function (elem, data) {//点击选择之后的回调
var NEWJSON = []
layui.each(data.data, function (index, item) {
NEWJSON.push(item.cardName)
$("#cardCode2").val(item.cardCode)
})
elem.val(NEWJSON.join(","))
}
})
</script>
java代码：
控制层
@RequestMapping(value="/findAllByPageAndLimit",method=RequestMethod.GET)
@ResponseBody
Map<String, Object> findAllByPageAndLimit(SapSupplierModel sapSupplierModel,int page,int limit) {
Map<String, Object> map = new HashMap<>(); Page<SapSupplier> p = sapSupplierService.findPage(sapSupplierModel, page, limit); List<SapSupplierXiaLaJson> list = new ArrayList<>();
int a = 0;
for (SapSupplier sapSupplier : p.getContent()) {
a++;
if (sapSupplier != null) {
list.add(new SapSupplierXiaLaJson(sapSupplier,a));
}
} map.put("code", 0);
map.put("data", list);
map.put("count", new Long(p.getTotalElements()).intValue());
map.put("msg", "成功");
return map;
}
实现层：
@Override
public Page<SapSupplier> findPage(SapSupplierModel sapSupplierModel, int currentPage, int pageSize) {
Specification<SapSupplier> specification = new Specification<SapSupplier>() { @Override
public Predicate toPredicate(Root<SapSupplier> root, CriteriaQuery<?> query,
CriteriaBuilder cb) {
List<Predicate> list = new ArrayList<>(); Predicate deleteMark = cb.equal(root.get("deleteMark").as(Boolean.class), false);
list.add(deleteMark); if (!CommonUtil.isEmpty(sapSupplierModel.getCardName())) {
Predicate cardName = cb.like(root.get("cardName"), "%" + sapSupplierModel.getCardName().trim() + "%");
list.add(cardName);
} Predicate[] predicates = new Predicate[list.size()]; return cb.and(list.toArray(predicates));
}
};
//排序
List<Order> orders = new ArrayList<>(); orders.add(new Order(Direction.ASC, "createDate"));
Sort sort = Sort.by(orders);
Pageable pageable = PageRequest.of(currentPage - 1, pageSize, sort);
return sapSupplierRepository.findAll(specification, pageable);
}
Page<SapSupplier> findPage(SapSupplierModel sapSupplierModel, int currentPage, int pageSize);
持久层：
Page<SapSupplier> findPage(SapSupplierModel sapSupplierModel, int currentPage, int pageSize);
layui下拉框数据过万渲染渲染问题解决方案的更多相关文章
- layui下拉框渲染问题，以及回显问题
最近实习公司给的新人练手项目用的layui,layui之前自己也接触过但是也就是用了用table组件,没有用过layer弹层这些东西,所以就了解了一下. 首先遇到的一个问题就是下拉框没有样式,然后加样 ...
- layui动态设置下拉框数据，根据后台数据设置选中
追加下拉框数据: 设置默认选中: 正常的判断这种情况是不行的,因为追加出的数据,在前台显示的并不是同一个下拉框,原来的下拉框被隐藏了 因此需要:根据原来的位置,寻找下一个节点,寻找子节点的方式找到相应 ...
- 【Layui】当Layui数据表格和Layui下拉框组合时发生的问题
关于Layui数据表格用下拉框显示问题 如图所示 可以看见当点击下拉框时下拉选项被下拉框覆盖 此时你需要在数据表格渲染完成时的回调内添加如下代码即可 $(".sel_scrq"). ...
- layui下拉框后台动态赋值
前台页面: <select name="xm" id="xm" lay-verify="required" lay-filter=&q ...
- vuetify.js框架 下拉框数据改变DOM原数据未清除
今天遇到一个奇怪的bug 需求很简单,就是将“引擎能力”下拉框选中的值作为筛选条件传入到“样本类型”下拉框中,默认“样本类型”下拉框显示所有样本类型 看图: 如图所示,功能很简单. 其实还是对vuet ...
- layui下拉框不显示的问题
1.先检查有没有引入layui.js 2.然后看有没有被<form class="layui-form"></form>包住, 3.查看是否有以下代码 &l ...
- 下拉框数据的动态选择，类似级联ajax刷新数据
简单的两个下拉列表,第二个中的数据与第一个下拉框相关: --------------------var selected = $(this).children('option:selected').v ...
- Layui下拉框改变时触发事件
layui.use(['form', 'layer'], function () { var form = layui.form(); var layer = layui.layer; form.on ...
- layUI 下拉框遮挡
原项目中把layui内置的富文本编辑器替换成了百度的ueditor,但是出现了一点问题,下拉框被遮挡了! 在网上查询了一些方法,发现最简单的方法就是在当前页面的<head>标签中加入 &l ...
随机推荐
- 三种比较好玩的黑客效果JS代码（摘取）
<html> <head> <title>The Matrix</title> <script src="http://ajax.goo ...
- HTML5创建高德地图
创建高德地图 功能真的很好很强大,有图有证据! 1.申请key值 去官网2.https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db ...
- tensorflow数据集加载
本篇涉及的内容主要有小型常用的经典数据集的加载步骤,tensorflow提供了如下接口:keras.datasets.tf.data.Dataset.from_tensor_slices(shuffl ...
- C#Linq的10个练习
1.LINQ的两种语法 LINQ查询时有两种语法可供选择:查询表达式(Query Expression)和方法语法(Fluent Syntax). .NET公共语言运行库(CLR)并不具有查询表达式的 ...
- gulp常用插件之gulp-plumber使用
更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-plumber这是一款防止因gulp插件的错误而导致管道中断,plumber可以阻止 gulp 插件发生错误导致进程退出并输出错误日志. ...
- 论文阅读笔记（十一）【ICCV2017】：Jointly Attentive Spatial-Temporal Pooling Networks for Video-based Person Re-Identification
Introduction (1)Motivation: 当前采用CNN-RNN模型解决行人重识别问题仅仅提取单一视频序列的特征表示,而没有把视频序列匹配间的影响考虑在内,即在比较不同人的时候,根据不同 ...
- mysql日期函数及重复数据的查询
-- 日期函数select CURRENT_DATE,CURRENT_TIME,CURRENT_TIMESTAMP,year(CURRENT_DATE),month(CURRENT_DATE);sel ...
- 初入python
初入python 一定要学好python 求1-100的和: i=1 s=0 while i<101: s=s+i i=i+1 print(s)
- Yarn报错：Could not find any valid local directory for nmPrivate/
原因: yarn.nodemanager.local-dirs和hadoop的hadoop.tmp.dir参数对应文件位置不一致 解决办法: 将hdfs-site.xml中hadoop.tmp.dir ...
- 4P遇上了5P
(1)4P工作要素:任何一位从业者,都应该好好想想自己工作的初衷是什么?你将自己所从事的工作又是定位在什么位置?而这份工作的视角又有多宽.多广?最后是你会在某个周期内完成工作或者是实现突破. (2)5 ...