1

Web ページに、ユーザーが動的に追加および削除できるアイテムのリストがあります。各項目は次のようになります。

<tr id="LELOC_0">
    <td>
        <label title="" for="LE">
            Legal Entity:</label>
        <input type="text" value="0" name="CAS.LERoles[0].LE" id="CAS_LERoles_0__LE" data-val-required="The Legal Entity field is required."
            data-val-number="The field Legal Entity must be a number." data-val="true" class="tinyText">
        <br>
        <label title="" for="LOC">
            Location:</label>
        <input type="text" value="0" name="CAS.LERoles[0].LOC" id="CAS_LERoles_0__LOC" data-val-required="The Location field is required."
            data-val-number="The field Location must be a number." data-val="true" class="tinyText">
    </td>
    <td>
        <label title="" for="APMasterRole">
            AP Master Role:</label>
        <select name="CAS.LERoles[0].APMasterRole" id="CAS_LERoles_0__APMasterRole">
            <option value="0" title="">None</option>
            <option value="1" title="">LBK</option>
            <option value="2" title="">General Manager</option>
            <option value="3" title="">Publisher</option>
            <option value="4" title="">RAM</option>
            <option value="5" title="">District Manager</option>
            <option value="6" title="">Corp0</option>
            <option value="7" title="">Corp1</option>
            <option value="8" title="">Corp2</option>
        </select>
        <br>
        <label title="" for="WebPortalRole">
            Web Portal Role:</label>
        <select name="CAS.LERoles[0].WebPortalRole" id="CAS_LERoles_0__WebPortalRole">
            <option value="0" title="">None</option>
            <option value="1" title="">Admin</option>
            <option value="2" title="">LBK</option>
            <option value="3" title="">PUB</option>
            <option value="4" title="">Security</option>
            <option value="5" title="">RAM</option>
            <option value="6" title="">CAS</option>
            <option value="7" title="">Site Data Entry</option>
        </select>
        <br>
        <label title="" for="AnyViewIDSRole">
            AnyView IDS Role:</label>
        <select name="CAS.LERoles[0].AnyViewIDSRole" id="CAS_LERoles_0__AnyViewIDSRole">
            <option value="0" title="">None</option>
            <option value="1" title="">Administrators</option>
            <option value="2" title="">All Access</option>
            <option value="3" title="">CORP</option>
            <option value="4" title="">GL</option>
            <option value="5" title="">LBK</option>
            <option value="6" title="">Other</option>
            <option value="7" title="">PUB</option>
            <option value="8" title="">RBK</option>
            <option value="9" title="">RM</option>
        </select>
    </td>
    <td>
        <label title="" for="APMasterPurchaseApprover">
            AP Master Approver:</label>
        <input type="text" value="" name="CAS.LERoles[0].APMasterPurchaseApprover" id="CAS_LERoles_0__APMasterPurchaseApprover"
            data-val-requiredif-operator="EqualTo" data-val-requiredif-dependentvalue="LBK"
            data-val-requiredif-dependentproperty="APMasterRole" data-val-requiredif="If the user is in the AP Master LBK role, the AP Master Purchase Approver must be provided."
            data-val="true" class="smallText">
        <br>
        <label title="" for="WebPortalPurchaseApprover">
            Web Portal Approver:</label>
        <input type="text" value="" name="CAS.LERoles[0].WebPortalPurchaseApprover" id="CAS_LERoles_0__WebPortalPurchaseApprover"
            data-val-requiredif-operator="EqualTo" data-val-requiredif-dependentvalue="LBK"
            data-val-requiredif-dependentproperty="WebPortalRole" data-val-requiredif="If the user is in the Web Portal LBK role, the Web Portal Purchase Approver must be provided."
            data-val="true" class="smallText">
    </td>
    <td>
        <button class="deleteButton" id="btnDelete_0" type="button">
            Delete</button>
        <button class="addButton" id="btnAdd_0" type="button">
            Add</button>
    </td>
</tr>

秘訣は、ユーザーがアイテムを削除した場合、リストを並べ替えて、サーバーにポストバックするときにシーケンス番号にギャップがないようにすることです。これについて私が最初に考えたのは、すべての要素をループして<tr>、正規表現の一致/シーケンス番号を置き換えることでしたが、それは本当に面倒です。だから私は疑問に思っています、これを簡単にする気の利いたjavascript/jQueryの方法はありますか? それ以外の場合は、「ねじ込み」と言って、サーバー側で欠落しているシーケンスを確認するだけです。

4

2 に答える 2

0

フォーム投稿の前に、すべての TR 要素を簡単にループして id 属性を更新できます。

var newValue = "LELOC_";
$("tr").each(function(i, row) {
   $(row).attr("id", newValue + i);
});

フォームを送信する前にそれを行うと、すべてが順番に変更されます。

于 2012-07-02T18:39:27.253 に答える
0

シーケンス番号は編集可能ですが、ページに関連していますか? そうでない場合は、それらを省略して、保存時にのみ生成させます。

function generateItemsToSave() {
    var itemsToSave = [];
    jQuery('tr').each(function(pos, el) {
        var locData = {
          id: 'LELOC_' + itemsToSave.length,
          //Build rest of locData from el
        };
        itemsToSave.push(locData);
    });
    return itemsToSave;
}
saveItems(generateItemsToSave());
于 2012-07-02T18:46:30.280 に答える