聪明，有效的方式来重新排序jQuery中的表单数组？

我有我的网页上的项目列表，用户可以动态添加和删除。每个项目类似于此：聪明，有效的方式来重新排序jQuery中的表单数组？

<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的方式来使这个简单？否则，我可能会说“拧紧它”并检查服务器端的缺失序列。

来源

2012-07-02 Jeremy Holovacs

页面中的序列号在可编辑时是否与页面相关？如果没有，只需省略它们并让它们仅在保存时生成。

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-02 18:46:30

不幸的是，他们是......我需要能够关闭特定的行。 –

我可能会使用属性''tr class =“LELOC”locref =“blah1”>然后通过'locref'引用它们，而不是依赖于id号码（特别是如果id预计会改变）。这样，您就可以在页面中访问它们的方式和随后如何保存它们之间切断，同时仍然保持在页面中操作它们的能力。 –

您可以轻松地遍历所有TR元素并在表单发布之前更新id属性。

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

在表单提交之前这样做，它会将它们全部更改为按顺序。

来源

2012-07-02 18:39:27

好吧，行ID比表单输入名称更不用担心。 –

同样适用于每一行的内容。只需找到后代元素并更新其属性。否则，只需在服务器端处理表单时设置值。 –

聪明，有效的方式来重新排序jQuery中的表单数组？

回答

相关问题