2013-07-09 43 views
0

对不起,我的代码,数额巨大,但想彻底..剑道UI网格按钮触发多时间

网1有一个按钮 - 这是它的代码:

name: "custom1", text: "View", 
click: function(e) { 
    $uid = this.dataItem(this.select()).users_id; 
    $(".title h4").filter(":first").css({ 
    color: "#0070c0", 
    "text-decoration": "underline", 
    cursor: "pointer" 
    }); 
    var offset = $(".grid-box").offset(); 
    var newLeft = offset.left+25; 
    newLeft = newLeft + "px"; 
    var newTop = offset.top+80; 
    newTop = newTop + "px"; 

    // Get Profile Info 
    $.getJSON(
    '/data/get_users_data.php', 
    { users_id: $uid }) 
    .done(function(tempData) { 
     $(".echo_users_name").html(tempData.data[0].users_first_name + ' ' + tempData.data[0].users_last_name); 
     $("#users_email").html("<a href=\"+tempData.data[0].users_email+\">"+tempData.data[0].users_email+"</a>"); 
     $("#users_mobile_phone").html(tempData.data[0].users_mobile_phone); 


     $('#teamGrid').css("display","none"); 
     $('.grid-box2').css({ 
      display: "block", 
      position: "absolute", 
      top: newTop, 
      left: newLeft, 
     }); 
     generatePermissionsGrid($uid); 
    }); 
}, 

点击此按钮隐藏了容纳它的网格,取消隐藏(CSS显示=块)div并生成新的网格。这里是网格(网格2#),这是点击后产生上述发生:

function generatePermissionsGrid(uid) { 
    $uid = ""; 
    $uid = uid; 
    $("#permissionsGrid").kendoGrid({ 
     columns: [ 
      { title: "Access to Application?", 
       field: "permissions_users_apps_status", 
       attributes: { 
        style: "text-align: center; font-size: 14px;" 
       }, 
       filterable: true, 
       headerAttributes: { 
        style: "font-weight: bold; font-size: 14px; width: 100px;" 
       }, 
       template: function(dataItem) { 
        if (dataItem.permissions_users_apps_status == 0) { 
         return "<input type='checkbox' name='permissions_users_apps_status' id='permissions_users_apps_status' value='1' />" 
        } else if (dataItem.permissions_users_apps_status == 1) { 
         return "<input type='checkbox' name='permissions_users_apps_status' id='permissions_users_apps_status' value='1' checked />" 
        } 
       } 
      }, 
      { title: "Application Name", 
       field: "apps_title", 
       attributes: { 
        style: "text-align: center; font-size: 14px;" 
       }, 
       filterable: true, 
       headerAttributes: { 
        style: "font-weight: bold; font-size: 14px; width: 100px;" 
       } 
      }, 
      { 
       command: [ 
        { 
         name: "custom3", text: "Update", 
         click: function() { 
         $pid = this.dataItem(this.select()).permissions_users_apps_id; 
         /*var $row = $(this); 
         var enabled = $row.find('#permissions_users_apps_status').attr('checked');*/ 
         // Update App Info 
         alert($uid + ' - ' + $pid); 
         $(".k-grid-custom3").off("click"); 
         return; 
         $.post(
          '/data/update_users_permissions.php', 
          { 
           users_id: $uid, 
           apps_id: $pid 
          }).done(function(data) { 
           generatePermissionsGrid($uid); 
          }); 
         } 
        }/*, 
        { 
         name: "custom1", text: "Delete", 
         click: function(e) { 
          $pid = this.dataItem(this.select()).permissions_users_apps_id; 
          // Delete Permissions 
          $confirmed = confirm("Are you certain you would like to delete\nremove access to this application from this user?"); 
          if ($confirmed) { 
           $.post(
           '/data/delete_users_permissions.php', 
           { 
            users_id: uid, 
            apps_id: $pid 
           }) 
           .done(function(data) { 
            // 
           }); 
          } 
         }, 
        }*/ 
       ], 
       headerAttributes: { 
        style: "width: 80px;" 
       }, 
       attributes: { 
        style: "text-align: center;" 
       }, 
       title: "&nbsp;" 
      } 
      ], 
     dataSource: { 
      transport: { 
       read: { 
        url: "/data/get_users_permissions.php?users_id=" + uid 
       }, 
       update: { 
        url: "/data/update_teammate.php", 
        type: "POST" 
       }, 
       destroy: { 
        url: "/data/delete_teammember.php", 
        type: "POST" 
       }, 
       create: { 
        url: "", 
        type: "POST"  
       } 
      }, 
      schema: { 
       data: "data", 
       total: function (result) { 
         result = result.data || result; 
         return result.length; 
       }, 
       model: { 
        id: "permissions_users_apps_id" 
       } 
      }, 
      type: "json" 
     }, 
     pageable: { 
       refresh: true, 
       pageSize: 5, 
       pageSizes: [ 
        5,10,20 
       ] 
      }, 
     sortable: true, 
     filterable: true, 
     autoSync: true, 
     scrollable: false, 
     selectable: "row", 
     reorderable: false 
    }); // END: teamGrid 

} // END: generateGrid function 

现在,如果我关闭这个生成的网格(使用CSS显示为无隐藏它 - 我已经试过破坏电网和清除div内容 - 没关系),然后我点击上面的按钮(第一个)再次打开这个网格 - 它会像按钮被按下两次那样触发。然后关闭并重新打开这个网格使用相同的按钮,它会发射3次..等..等永远持续下去。

我试过把“关闭”点击绑定..纳达。

任何人有任何建议?

再次感谢,提前...

回答

1

所以..找到了问题。

在各种命令按钮的“.done()”函数中,我从零开始重新创建网格。这会导致点击处理程序“彼此堆叠”。

正确的方法是简单地强制重新读取数据源。

因此,例如,如果您的网格放置在名为“permissionsGrid”的div中,并且在进行此调用之前已经生成了网格,则可以使用以下方法重新读取数据(导致刷新网格):

$("#permissionsGrid").data("kendoGrid").dataSource.read(); 

就是这样。整洁而简单 - 并且像魅力一样工作。

希望这可以帮助别人!我知道答案就在那里 - 但这看起来像一个简单,直接的方式 - 并且很容易复制。

享受...

0

为了避免对剑道按钮,当你点击了第一次的多次点击,做一些进度条

var divTest= $("#permissionsGrid"); 
    kendo.ui.progress(divTest,true); 

在Ajax调用,完成()方法关闭进度条和也读取网格数据源。

kendo.ui.progress(divTest, false); 
    $("#permissionsGrid").data("kendoGrid").dataSource.read();