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;
    }
    
    
    
}

扫描二维码关注公众号，回复： 6047222 查看本文章

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

猜你喜欢