方案一：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下拉框数据过万渲染渲染问题解决方案的更多相关文章

  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. 免费生成二维码接口，可直接嵌入到web项目中，附带嵌入方法，任意颜色二维码，任意大小二维码！

    在线体验连接:http://www.zhaimaojun.top/qrcode/ 你是否在项目中寻找方便而且免费的可以直接嵌入到项目中的二维码生成工具呢?你找到了这里,说明你已经找到了!不要犹豫直接拿 ...

  2. 为什么MYSQL分页时使用limit+ order by会出现数据重复问题

    问题描述: MYSQL采用limit进行翻页查询时,搭配order by ,在翻到第二页的时候可能会出现第一页的数据,  示例sql如下: select  a,b from c where d = ' ...

  3. 推荐一本好书：编写可维护的JavaScript（可下载）

    目录 推荐一本好书:编写可维护的JavaScript(可下载) 书摘: 下载: 有些建议: 推荐一本好书:编写可维护的JavaScript(可下载) 书摘: 很多设计模式就是为了解决紧耦合的问题.如果 ...

  4. 使用mininet创建网络拓扑，使ryu、ovs、主机连接

    实验拓扑 控制器:RYU 交换机:s1,s2 主机:h1,h2,h3,h3 联通性(直连): h1<->s1;h2<->s1 h3<->s2;h4<-> ...

  5. @Html.DropDownList 无法显示默认值问题

    1.查看下拉框的id名,是否和ViewBag变量名相同,如果相同的话,更改下拉框的id名字,使之和ViewBag变量名相同即可例如:@Html.DropDownList("List1&quo ...

  6. sql server针对字符串型数字排序（针对此字符串的长度不一致）

    对于不规则的字符串数字排序,无法按照数字大的大小排序的原因是,字符串数字在数据库中按照ASCII码排序,从字符的第一个数字对比,首先就会将为首个数字相同的排在一起,在从这些字符串里面对比第二个数字,如 ...

  7. Qt多线程实现思路二

    建立一个继承于Qobject的类myThread 在类myThread中定义线程处理函数不必是思路一里的run(); 在窗口类中开辟一个自定义线程myThread的指针对象myT = new myTh ...

  8. Fiddler抓取https方法

    基本配置 菜单 -> menu -> tool -> https 勾选"捕获https连接" 勾选"捕获https流量" 勾选"检查 ...

  9. Udacity_deep_learning_anconda

    1.创建anconda的虚拟环境: conda create -n your_env_name Python=X.X(2.7.3.6等) 2.查看anconda 有哪些虚拟环境: conda env ...

  10. 微信小程序期末复习

    过什么六一,复习不完了... 第1章作业 一.单选题(共10题,100.0分) 1以下哪个不是主流的手机操作系统? A.Android B.iOS C.Windows Phone D.Blackber ...