如何解决多条数据加载easyui-combobox样式反应慢的问题

Question

问题描述

总共一百条数据，数据中加入combobox样式，打开页面出现卡顿情况

问题出现的环境背景及自己尝试过哪些方法

一条数据，有三处地方用到combobox样式，如果有100条数据是，打开页面编辑这100条数据就会出现页面卡顿情况，根据查看前台控制器，总共要加载300次combobox样式，如果去掉这些样式加载页面的速度在2秒内。

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<c:forEach items="${list }" var="a" varStatus="vs">

                                <tr name="detailRow">
                                    <td class="tc">
                                        <div class="seq">${vs.index+1 }</div>
                                    </td>
                                    <td><input type="text" name="list[${vs.index }].materialName" value="${a.materialName }" class="w100p check">
                                        <input type="hidden" name="list[${vs.index }].id" value="${a.id }">
                                        <input type="hidden" value="${vs.index }">
                                    </td>
                                    <td>
                                        <input type="text" id="model${vs.index }" name="list[${vs.index }].model" value="${a.model }" <c:if test="${a.unit==batchId }">readonly="readonly"</c:if> class="tc w100p check">
                                    </td>
                                    <td>
                                        <input type="text" onfocus="clickUnit(${vs.index})" class="easyui-metering${vs.index } check w80" value="${a.unitName }" data-options="valueField:'code',textField:'name',panelHeight:'auto',panelMaxHeight:200,panelMinHeight:100">
                                        <input type="hidden" id="counts${vs.index }" value="${vs.index }">
                                        <input type="hidden" name="list[${vs.index }].unit" value="${a.unit }">
                                        <input type="hidden" name="list[${vs.index }].unitName" value="${a.unitName }">
                                    </td>
                                    <c:if test="${a.unit ==batchId }">
                                        <td><input type="text" name="list[${vs.index }].detailsNumber" value="${a.detailsNumber }" id="num${vs.index }" readonly="readonly" class="w100p check"></td>
                                        <td><input type="text" name="list[${vs.index }].unitPrice" value="${a.unitPrice }" id="price${vs.index }" onblur="checkPrice(this)" class="w100p check"></td>
                                        <td><input type="text" name="list[${vs.index }].money" value="${a.money }" id="money${vs.index }" onblur="checkMoney(this);" readonly="readonly" class="w100p check"></td>
                                    </c:if>
                                    <c:if test="${a.unit !=batchId }">
                                        <td><input type="text" name="list[${vs.index }].detailsNumber" value="${a.detailsNumber }" id="num${vs.index }" onblur="checkNum(this)" class="w100p check"></td>
                                        <td><input type="text" name="list[${vs.index }].unitPrice" value="${a.unitPrice }" id="price${vs.index }" onblur="checkPrice(this)" class="w100p check"></td>
                                        <td><input type="text" name="list[${vs.index }].money" value="${a.money }" id="money${vs.index }" onblur="checkMoney(this);" readonly="readonly" class="w100p check money"></td>
                                    </c:if>
                                    <td>
                                        <select required="required" name="list[${vs.index }].classifiedGrade" class="w100p check">
                                            <c:forEach items="${smdj }" var="b">
                                                <option value="${b.id }" <c:if test="${b.id  eq a.classifiedGrade}">selected="selected"</c:if>>${b.name }</option>
                                            </c:forEach>
                                        </select>
                                    </td>
                                    <td>
                                        <select required="required" name="list[${vs.index }].importCategory" class="w100p check">
                                            <c:forEach items="${jklb }" var="c">
                                                <option value="${c.id }" <c:if test="${c.id  eq a.importCategory}">selected="selected"</c:if>>${c.name }</option>
                                            </c:forEach>
                                        </select>
                                    </td>
                                    <td>
                                        <select required="required" name="list[${vs.index }].taxExemptCategory" class="w100p check">
                                            <c:forEach items="${mslb }" var="d">
                                                <option value="${d.id }" <c:if test="${d.id  eq a.taxExemptCategory}">selected="selected"</c:if>>${d.name }</option>
                                            </c:forEach>
                                        </select>
                                    </td>
                                    <td>
                                        <input type="text" onfocus="clickCustoms(${vs.index})" class="easyui-customs${vs.index } check w150" value="${a.customsName }" data-options="valueField:'code',textField:'name',panelHeight:'auto',panelMaxHeight:200,panelMinHeight:100">
                                        <input type="hidden" name="list[${vs.index }].importCustoms" value="${a.importCustoms }">
                                        <input type="hidden" name="list[${vs.index }].customsName" value="${a.customsName }">
                                    </td>
                                    <td>
                                        <select required="required" name="list[${vs.index }].fundingSources" class="w100p check">
                                            <c:forEach items="${jfly }" var="e">
                                                <option value="${e.id }" <c:if test="${e.id  eq a.fundingSources}">selected="selected"</c:if>>${e.name }</option>
                                            </c:forEach>
                                        </select>
                                    </td>
                                    <td class="tc"><input type="text" name="list[${vs.index }].unitUser" value="${a.unitUser }" class="w100p check"></td>
                                    <td>
                                        <input type="text" onfocus="clickMaterial(${vs.index})" class="easyui-material${vs.index } check w150" value="${a.materialUserName }" data-options="valueField:'code',textField:'name',panelHeight:'auto',panelMaxHeight:200,panelMinHeight:100">
                                        <input type="hidden" name="list[${vs.index }].materialUser" value="${a.materialUser }">
                                        <input type="hidden" name="list[${vs.index }].materialUserName" value="${a.materialUserName }">
                                    </td>
                                    <td><input type="text" name="list[${vs.index }].purchaseNameNumber" value="${a.purchaseNameNumber }" class="w100p check"></td>
                                    <td><input type="text" name="list[${vs.index }].remark" value="${a.remark }" class="w100p"></td>
                                    <td class="tc"><button class="tc btn mb0 mr0" onclick="delRowIndex(this,'${a.id }')">删除</button></td>
                                </tr>
                            </c:forEach>
                            

<script type="text/javascript">
$(".easyui-material"+num).combobox({

                required: false,
                data: collectionMaterial,
                valueField: 'id',
                textField: 'name',
                editable: true,
                filter: function(L, row) {
                    var opts = $(this).combobox('options');
                    return(row[opts.textField] + "" + row[opts.valueField]).indexOf(L) >= 0;

                },
                onHidePanel: function() {
                    var _options = $(this).combobox('options');
                    var _data = $(this).combobox('getData'); /* 下拉框所有选项 */
                    var _value = $(this).combobox('getValue'); /* 用户输入的值 */
                    var _b = false; /* 标识是否在下拉列表中找到了用户输入的字符 */
                    for(var i = 0; i < _data.length; i++) {
                        if(_data[i][_options.valueField] == _value) {
                            _b = true;
                            break;
                        }
                    }
                    if(!_b) {
                        $(this).parent().children(":last").prev().val("0");
                        $(this).parent().children(":last").val(_value);
                    }
                },
                onSelect: function(org) {
                    $(this).parent().children(":last").prev().val(org.id);
                    $(this).parent().children(":last").val(org.name);
                }

            });

</script>

你期待的结果是什么？实际看到的错误信息又是什么？

我期望加载页面速度在几秒内打开。不知道用这插件能不能实现！