problem description

A total of 100 pieces of data. Add combobox style to the data, and stutter occurs on the open page

the environmental background of the problems and what methods you have tried

A piece of data, there are three places to use combobox style. If there are 100pieces of data, opening the page to edit these 100pieces of data will cause page stutter. According to viewing the foreground controller, a total of 300times combobox style will be loaded. If these styles are removed, the loading speed of the page will be less than 2 seconds.

related codes

/ / Please paste the code text below (do not replace the code with pictures)

< 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; iPP) {
                        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 >

what result do you expect? What is the error message actually seen?

I expect the load page speed to open in a few seconds. I don"t know if it can be realized with this plugin!