方案一：layui下拉框分页插件

https://fly.layui.com/jie/29002/

此插件我用了下浏览器缓存有问题，而且当下拉框数据量过万后，会一直渲染不出来，期待后期作者优化

如图下拉框效果：

引入js和css

  1.  <script src="${contextPath}/static/selectPage/js/utils.js" type="text/javascript" charset="utf-8"></script>
  2.  <script src="${contextPath}/static/selectPage/js/selectPageTool.js" type="text/javascript" charset="utf-8"></script>
  3.  <link rel="stylesheet" href="${contextPath}/static/selectPage/css/cyType.css" media="all">
  4.  <link rel="stylesheet" href="${contextPath}/static/selectPage/css/cyStyle.css" media="all">
  5.  <link rel="stylesheet" href="${contextPath}/static/selectPage/css/font-awesome.min.css" media="all">
  6. <link rel="stylesheet" href="${contextPath}/static/layui/css/layui.css">
  7. <script src="${contextPath}/static/lib/jquery.js"></script>
  8. <script src="${contextPath}/static/layui/layui.js"></script>
  1. <body>
  2.  
  3.     <form class="layui-form">
  4.     <input type="hidden" id="code" name="code" value="${materielEntity.code}">
  5.  
  6.        <div class="layui-form-item">
  7.         <label class="layui-form-label">下拉框</label>
  8.         <div class="layui-input-block" style="width:80%">
    　　　　　　　　//layui原生下拉框支撑不了大数据
  9.            <%--  <select name="cardCode" lay-filter="" lay-search>
  10.                 <option value="">请选择</option>
  11.                  <c:forEach items="${sapSuppliers}" var="sapSupplier">
  12.                     <option value="${sapSupplier.cardCode}" <c:if test='${materielEntity.cardCode == sapSupplier.cardCode}'>selected="selected"</c:if> >${sapSupplier.cardCode}</option>
  13.                   </c:forEach>
  14.               </select> --%>
  15.  
  16. 　　　　　　　　//这个是下拉框分页的样式，这个插件也是有问题滴，看着用
  17.               <div style="margin-top:4%" cyType="selectPageTool" cyProps="url:'/sapSupplier/findAllSupplier',cache:false, checkbox:'false',tips:'请选择'"
  18.                  name="cardCode" value="${materielEntity.cardCode}" class="layui-input-normal">
  19.             </div>
  20.         </div>
  21.     </div>
  22.  
  23.     <div class="layui-form-item">
  24.         <div class="layui-input-block">
  25.             <button class="layui-btn" lay-submit lay-filter="Form">保存</button>
  26.             <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  27.         </div>
  28.     </div>
  29. </form>
  30.  
  31. </body>
  1. 　　　　<div style="margin-top:4%" cyType="selectPageTool" cyProps="url:'/sapSupplier/findAllSupplier',cache:false, checkbox:'false',tips:'请选择'"
  2.                  name="cardCode" value="${materielEntity.cardCode}" class="layui-input-normal">
  3.             </div> 
    　　　　1.name 填你需要渲染的字段，新增和编辑重新渲染都是靠这个name
    　　　　2. value 渲染的code
    　　　　3.url和平常我们写ajax访问的后台接口一样
  1. //url后台接口
  2.     @RequestMapping(value = "findAllSupplier")
  3.     Map<String, Object> findAllSupplier() {
  4.  
  5.         Map<String, Object> map = new HashMap<>();
  6. 　　　　　//数据库对应的实体集合
  7.         List<SapSupplier> sapSuppliers = sapSupplierService.findAll();
  8.         //我们需要返回前端的json实体集合
  9.         List<SelectPageJson> selectPageJsons = new ArrayList<>();
  10.         if(sapSuppliers != null && sapSuppliers.size() > 0) {
  11.             for(SapSupplier sapSupplier : sapSuppliers) {
  12.                 SelectPageJson selectPageJson = new SelectPageJson();
  13.                 selectPageJson.setCode(sapSupplier.getCardCode());
  14.                 selectPageJson.setValue(sapSupplier.getCardName());
  15.                 selectPageJsons.add(selectPageJson);
  16.             }
  17.         }
  18.         map.put("code", 0);
  19.         map.put("data", selectPageJsons);
  20.         map.put("count", selectPageJsons.size());
  21.         map.put("msg", "成功");
  22.         return map;
  23.     }
    　　返回的数据格式类似这样：
    　　

{
"code": 0,
"msg": "",
"count": 16,
"data": [//SelectPageJson 集合

　code:"",

　value:"";

]
}

  1.  
  1. /**
  2. * @Description: layui 分页下拉框插件json格式
  3. * @date: 2019年4月19日 下午5:28:16
  4. */
  5. public class SelectPageJson {
  6.  
  7.     private String code;
  8.  
  9.     private String value;
  10.  
  11.     public String getCode() {
  12.         return code;
  13.     }
  14.  
  15.     public void setCode(String code) {
  16.         this.code = code;
  17.     }
  18.  
  19.     public String getValue() {
  20.         return value;
  21.     }
  22.  
  23.     public void setValue(String value) {
  24.         this.value = value;
  25.     }
  26.  
  27. }

关键字搜索的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

  1. <body>
  2.  
  3.     <form class="layui-form">
  4.     <input type="hidden" id="code" name="code" value="${salesOrder.code}">
  5.  
  6.        <div class="layui-form-item">
  7.         <label class="layui-form-label">客户/供应商</label>
  8.         <div class="layui-input-block" style="width:80%">
  9.             <div class="layui-input-inline">
  10.                 <input id="cardCode" type="text" name="cardCode"  placeholder="请输入" autocomplete="off" class="layui-input">//下拉框样式
  11.                  <input type="hidden" name="cardCode" id="cardCode2" value="${salesOrder.cardCode}">//传入后台的code
  12.             </div>
  13.         </div>
  14.     </div>
  15.  
  16.     <div class="layui-form-item">
  17.         <div class="layui-input-block">
  18.             <button class="layui-btn" lay-submit lay-filter="Form">保存</button>
  19.             <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  20.         </div>
  21.     </div>
  22. </form>
  23.  
  24. </body>
  25. //缺少layui css等文件自己引入
  26. <script src="${contextPath}/static/layui/layui.all.js"></script>
  27. <script src="${contextPath}/static/tableSelect/tableSelect.js" type="text/javascript" charset="utf-8"></script>
  28. <script src="${contextPath}/static/backend/js/baseManage/salesOrder/salesOrder_edit.js"></script>
  29. <script type="text/javascript">
  30. var form = layui.form;
  31. form.render();
  32. var tableSelect = layui.tableSelect;//非模块化使用
  33. tableSelect.render({
  34.     elem: '#cardCode',//主建 和cols的cardcode对应
  35.     checkedKey: 'cardCode',//和cols的cardCode相对应
  36.     searchKey: 'cardName',//传入后台的搜索关键字
  37.     table: {
  38.         url: 'xx/findAllByPageAndLimit',//后台java代码接口
  39.         cols: [[
  40.             { type: 'radio' },//开启单选
  41.             { field: 'cardCode', title: '业务伙伴代码', width: 100 },//列名1
  42.             { field: 'cardName', title: '业务伙伴名称', width: 100 },//列名2
  43.         ]]
  44.     },
  45.     done: function (elem, data) {//点击选择之后的回调
  46.         var NEWJSON = []
  47.         layui.each(data.data, function (index, item) {
  48.             NEWJSON.push(item.cardName)
  49.             $("#cardCode2").val(item.cardCode)
  50.         })
  51.         elem.val(NEWJSON.join(","))
  52.     }
  53. })
  54.  
  55. </script>

java代码：

控制层

  1. @RequestMapping(value="/findAllByPageAndLimit",method=RequestMethod.GET)
  2.     @ResponseBody
  3.     Map<String, Object> findAllByPageAndLimit(SapSupplierModel sapSupplierModel,int page,int limit) {
  4.         Map<String, Object> map = new HashMap<>();
  5.  
  6.         Page<SapSupplier> p = sapSupplierService.findPage(sapSupplierModel, page, limit);
  7.  
  8.         List<SapSupplierXiaLaJson> list = new ArrayList<>();
  9.         int a = 0;
  10.         for (SapSupplier sapSupplier : p.getContent()) {
  11.             a++;
  12.             if (sapSupplier != null) {
  13.                 list.add(new SapSupplierXiaLaJson(sapSupplier,a));
  14.             }
  15.         }
  16.  
  17.         map.put("code", 0);
  18.         map.put("data", list);
  19.         map.put("count", new Long(p.getTotalElements()).intValue());
  20.         map.put("msg", "成功");
  21.         return map;
  22.     }

实现层：

  1. @Override
  2.     public Page<SapSupplier> findPage(SapSupplierModel sapSupplierModel, int currentPage, int pageSize) {
  3.         Specification<SapSupplier> specification = new Specification<SapSupplier>() {
  4.  
  5.             @Override
  6.             public Predicate toPredicate(Root<SapSupplier> root, CriteriaQuery<?> query,
  7.                                          CriteriaBuilder cb) {
  8.                 List<Predicate> list = new ArrayList<>();
  9.  
  10.                 Predicate deleteMark = cb.equal(root.get("deleteMark").as(Boolean.class), false);
  11.                 list.add(deleteMark);
  12.  
  13.                 if (!CommonUtil.isEmpty(sapSupplierModel.getCardName())) {
  14.                     Predicate cardName = cb.like(root.get("cardName"), "%" + sapSupplierModel.getCardName().trim() + "%");
  15.                     list.add(cardName);
  16.                 }
  17.  
  18.                 Predicate[] predicates = new Predicate[list.size()];
  19.  
  20.                 return cb.and(list.toArray(predicates));
  21.             }
  22.         };
  23.         //排序
  24.         List<Order> orders = new ArrayList<>();
  25.  
  26.         orders.add(new Order(Direction.ASC, "createDate"));
  27.         Sort sort = Sort.by(orders);
  28.         Pageable pageable = PageRequest.of(currentPage - 1, pageSize, sort);
  29.         return sapSupplierRepository.findAll(specification, pageable);
  30.     }
  1. Page<SapSupplier> findPage(SapSupplierModel sapSupplierModel, int currentPage, int pageSize);

持久层：

  1. Page<SapSupplier> findPage(SapSupplierModel sapSupplierModel, int currentPage, int pageSize);

layui下拉框数据过万渲染渲染问题解决方案的更多相关文章

  1. layui下拉框渲染问题，以及回显问题

    最近实习公司给的新人练手项目用的layui,layui之前自己也接触过但是也就是用了用table组件,没有用过layer弹层这些东西,所以就了解了一下. 首先遇到的一个问题就是下拉框没有样式,然后加样 ...

  2. layui动态设置下拉框数据，根据后台数据设置选中

    追加下拉框数据: 设置默认选中: 正常的判断这种情况是不行的,因为追加出的数据,在前台显示的并不是同一个下拉框,原来的下拉框被隐藏了 因此需要:根据原来的位置,寻找下一个节点,寻找子节点的方式找到相应 ...

  3. 【Layui】当Layui数据表格和Layui下拉框组合时发生的问题

    关于Layui数据表格用下拉框显示问题 如图所示 可以看见当点击下拉框时下拉选项被下拉框覆盖 此时你需要在数据表格渲染完成时的回调内添加如下代码即可 $(".sel_scrq"). ...

  4. layui下拉框后台动态赋值

    前台页面: <select name="xm" id="xm" lay-verify="required" lay-filter=&q ...

  5. vuetify.js框架 下拉框数据改变DOM原数据未清除

    今天遇到一个奇怪的bug 需求很简单,就是将“引擎能力”下拉框选中的值作为筛选条件传入到“样本类型”下拉框中,默认“样本类型”下拉框显示所有样本类型 看图: 如图所示,功能很简单. 其实还是对vuet ...

  6. layui下拉框不显示的问题

    1.先检查有没有引入layui.js 2.然后看有没有被<form class="layui-form"></form>包住, 3.查看是否有以下代码 &l ...

  7. 下拉框数据的动态选择，类似级联ajax刷新数据

    简单的两个下拉列表,第二个中的数据与第一个下拉框相关: --------------------var selected = $(this).children('option:selected').v ...

  8. Layui下拉框改变时触发事件

    layui.use(['form', 'layer'], function () { var form = layui.form(); var layer = layui.layer; form.on ...

  9. layUI 下拉框遮挡

    原项目中把layui内置的富文本编辑器替换成了百度的ueditor,但是出现了一点问题,下拉框被遮挡了! 在网上查询了一些方法,发现最简单的方法就是在当前页面的<head>标签中加入 &l ...

随机推荐

  1. mybatis+maven自动生成代码框架

    说明 通过可配置化,通过数据库自动生成model,da和mapper文件,这对于可定制化开发来说是非常有用的,减少了很多重复的工作. 添加依赖 <properties> <proje ...

  2. P3768 简单的数学题 [杜教筛，莫比乌斯反演]

    \[\sum_{i=1}^{n}\sum_{j=1}^{n} ij\gcd(i,j)\] \[=\sum_{d=1}^{n} d \sum_{i=1}^{n}\sum_{j=1}^{n} ij[\gc ...

  3. FHQTreap刷题记录

    分裂:如图,按值分裂,u比k大则切黄色的一

  4. Life Forms[poj3294]题解

    Life Forms Description - You may have wondered why most extraterrestrial life forms resemble humans, ...

  5. 原生JS操作class 极致版

    // 获取class function getClass(el) { return el.getAttribute('class') } // 设置class function setClass(el ...

  6. ECMAScript基本语法——⑤运算符 赋值运算符

    左边的变量等于等号左边的内容移到右边

  7. ElasticSearch安装---Windows环境

    一.前提条件 已经安装了jdk 1.8 二.下载 中文官网: https://www.elastic.co/cn/ 中文官网下载: https://elasticsearch.cn/download/ ...

  8. Python获取时间范围

    import datetime def dateRange(beginDate, endDate): dates = [] dt = datetime.datetime.strptime(beginD ...

  9. Codeforce 588A - Duff and Meat （贪心）

    Duff is addicted to meat! Malek wants to keep her happy for n days. In order to be happy in i-th day ...

  10. linux多线程编程的应用场景