jQuery form的load函數與el表達式賦值的沖突問題

問題：

在使用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方法。