2

我正在尝试向上滑动包含表格的 div，使用 ajax 调用更改表格的行，然后向下滑动包含表格。我似乎无法让一系列回调有效地工作。

$("div#grid").slideUp('fast', function() {
    //eaery row but the first
    $("#testtable tr")
        .not(":first")
        .filter(":has(input[type='checkbox'][checked])")
        .each(function() {
            //change html using ajax calls
            editrow($(this).attr("id"));
         });

     })
     .slideDown('fast');  // want this to wait until editrow() has been run on each row

editrow() 包含用于编辑给定行的 html 的 ajax 调用。问题是 div 向上滑动，然后立即向下滑动。我需要它等到函数在每一行上执行，更改表的 html，然后再将其向下滑动。

4

3 回答 3

1

我猜第一行是“checkall”类型的东西？也许这就是标题？理想情况下，您应该使用checked="checked" 而不是checked="true"。你应该简单地在 jQuery 中使用“checked”属性验证。

以下应该适用于 jQuery 1.3+

首先尝试完成一两个步骤。然后尝试转向更复杂的东西。

$("div#grid").slideUp('fast', function() {
   $(this).slideDown('fast');
});

如果这行得通，那么下一阶段......

$("div#grid").slideUp('fast', function() {
  // For each table row with a checkbox that isn't in the first row
  $("#testtable tr").not(":first").filter(":has(input[type='checkbox'][checked])")
     .each(function(){
          // I substituted your custom function so we can find out if this works first
          alert($(this).attr("id"));
     });
});

如果这行得通，那么继续……

$("div#grid").slideUp('fast', function() {
  // For each table row with a checkbox that isn't in the first row
  $("#testtable tr").not(":first").filter(":has(input[type='checkbox'][checked])")
     .each(function(){
          // Original function reinserted
          editrow($(this).attr("id"));
     });
     $(this).slideDown('fast');
});

请记住将您的 id="" 放在表格行中，而不是复选框本身。

于 2009-08-19T19:57:20.183 回答
1

我认为你应该$(this).slideDown('fast');从你的 ajax 调用中获得成功。这不适用于您当前的情况（至少，不是我认为您希望它工作的方式），因为每个 ajax 调用都有望触发成功事件。您是否可以将一个数组传递给您的 ajax 调用，以便您可以进行一次调用，而不是一堆不同的调用？不确切地看到你在做什么会让事情变得困难，但我认为这是你最好的选择。

于 2009-08-19T20:21:33.503 回答
0

如果您需要在所有 ajax 调用完成后发生向下滑动动画，那么您可以首先计算将要编辑的行数，将其保存到变量中，并为每个成功的 ajax 调用递减该数字。如果成功的 ajasx 调用将数字减少到 0，则执行向下滑动动画。

像这样的东西：

$("div#grid").slideUp('fast', function() {
  //every row but the first
  rowsToUpdate = $("#testtable tr")
      .not(":first")
      .filter(":has(input[type='checkbox'][checked])");
  $("#testtable").data('rowsToUpdate', rowsToUpdate.length);
  rowsToUpdate.each(function() {
        //change html using ajax calls
        editrow($(this).attr("id"));
     });

 });

 function editrow(id) {
     $.ajax({
         complete : function () {
             // On complete, not success as we always want to show the table again?
             rowsToUpdate = $("#testtable").data('rowsToUpdate')--;
             $("#testtable").data('rowsToUpdate', rowsToUpdate);
             if (rowsToUpdate == 0) {
                 $("div#grid").slideDown('fast');
             }
         }
 }

警告。完全未经测试的代码。

于 2009-10-28T13:22:53.633 回答