jQuery form的load函数与el表达式赋值的冲突问题

Posted 2020-08-04 An

问题：

在使用el表达式给表单中的项赋初始值的时候，总是失败，物流公司没有自动选中，物流单号也没有显示值。

 

<form id="form" method="post">
。。。。
<tr>
    <th>物流公司：</th>
    <td>
        <select id="shippingCompany" name="shippingCompany" class="easyui-combobox" style="width: 171px;" data-options="required:true">
        <c:choose>
            <c:when test=‘${not empty brand}‘>
                <c:forEach var="lc" items="${logisticsCorporations}">
                    <c:choose>
                        <c:when test=‘${brand.shippingCompany eq lc.logisticsId}‘>
                            <option value="${lc.logisticsId }" selected="selected">${lc.logisticsName }</option>
                        </c:when>
                        <c:otherwise>
                            <option value="${lc.logisticsId }" >${lc.logisticsName }</option>
                        </c:otherwise>
                    </c:choose>
                </c:forEach>
            </c:when>
            <c:otherwise>
                <c:forEach var="lc" items="${logisticsCorporations}">
                    <option value="${lc.logisticsId }" >${lc.logisticsName }</option>
                </c:forEach>
            </c:otherwise>
        </c:choose>
        </select> 
    </td>
</tr>
<tr>
    <th>物流单号：</th>
    <td><input name="shippingSn" id="shippingSn"
        class="easyui-textbox easyui-validatebox" type="text"
         value="${brand.shippingSn }" required="required"/></td>
</tr>
</form>

 

调查：

1、当我把class="easyui-combobox"和class="easyui-textbox easyui-validatebox"属性去掉以后，就正常了。怀疑是easyui冲突了。

2、当我把form标签删掉，或者把form的id属性改个名字，也正常了，怀疑是jQuery在使用form的时候造成的冲突。

3、继续调查，当前页面其实是一个编辑页面，它是这样在父页面中被打开的：

//发货
function ship() {
    var row = $dg.datagrid(‘getSelected‘);
    if (row) {
        parent.$.modalDialog({
            title : ‘编辑订单信息‘,
            width : 600,
            height : 270,
            href : "${pageContext.request.contextPath}/orders/showShip?orderId="+row.orderId+"&orderInfoId="+row.orderInfoId,
            onLoad:function(){
                var f = parent.$.modalDialog.handler.find("#formx");
                f.form("load", row);
            },
            buttons : [ {
                text : ‘确定‘,
                iconCls : ‘icon-ok‘,
                handler : function() {
                    parent.$.modalDialog.openner= $grid;//因为添加成功之后，需要刷新这个dataGrid，所以先预定义好
                    var f = parent.$.modalDialog.handler.find("#form");
                    f.submit();
                }
            }, {
                text : ‘取消‘,
                iconCls : ‘icon-cancel‘,
                handler : function() {
                    parent.$.modalDialog.handler.dialog(‘destroy‘);
                    parent.$.modalDialog.handler = undefined;
                }
            }
            ]
        });
    }else{
        parent.$.messager.show({
            title :"提示",
            msg :"请选择一行记录!",
            timeout : 1000 * 2
        });
    }
}

dg是一个datagrid表格，我们的编辑页面就是编辑dg选中的一行数据。注意onLoad方法，在数据加载完毕以后，有一个f.form("load",row)方法，该方法能够自动将这行数据的各属性值填充到编辑页面的相应表单项中。

这本质上与我们在编辑页面中使用el表达式给表单项赋值就冲突了，也就是说，你要么使用f.form("load",row)给表单项赋值，要么使用el表达式给表单项赋值，只能选一个。

解决：

去掉onLoad方法。