layui下拉框数据过万渲染渲染问题解决方案

weixin_30565327

于 2019-04-28 17:24:00 发布

阅读量2.5k

点赞数

文章标签： javascript 大数据 php ViewUI

原文链接：http://www.cnblogs.com/bbllw/p/10785267.html

版权

针对layui下拉框数据量过大导致的渲染问题，提出了两种解决方案：一是使用layui下拉框分页插件，但存在浏览器缓存和渲染延迟问题；二是采用下拉框嵌入分页表格的方式，通过tableSelect下拉表格选择器实现高效展示。文章详细介绍了相关代码实现和SQL模糊查询方法。

摘要由CSDN通过智能技术生成

方案一：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>

最低0.47元/天解锁文章

weixin_30565327

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
layui下拉框数据过万渲染渲染问题解决方案

方案一：layui下拉框分页插件https://fly.layui.com/jie/29002/此插件我用了下浏览器缓存有问题，而且当下拉框数据量过万后，会一直渲染不出来，期待后期作者优化如图下拉框效果：引入js和css <script src="${contextPath}/static/selectPage/js/utils.js" type="text/j...
复制链接

扫一扫