2013-07-09 44 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();