2016-01-20 33 views
0

在一個角度的應用程序我有一個顯示基於從HTTP請求中檢索到的數據的若干劍道-網格的頁面。數據以json的形式返回。數據消失上排序

這是一個成功的數據檢索執行功能。這是在一個控制器內,並且ctrl是控制器作用域上的「this」對象。 Moment是一個用於管理日期的JavaScript庫。它在這裏做的唯一事情就是格式化日期(MM/DD/YYYY)和時間(hh:mm A)。

function (data) { 
    ctrl.dateGroups = {}; 
    var currentDate = ''; 
    data.Data.forEach(function (item) { 
     item.Date = item.StartDateTime ? moment(item.StartDateTime).format(HC_APP_CONFIG.dateFormat) : ''; 
     item.ClockInTime = item.StartDateTime ? moment(item.StartDateTime).format(HC_APP_CONFIG.timeFormat) : ''; 
     if (angular.isEmpty(item.EndDateTime) || 
      item.EndDateTime === '' || 
      item.EndDateTime.format(HC_APP_CONFIG.dateFormat).match(HC_APP_CONFIG.badLocalDatePattern) !== null){ 
      item.ClockOutTime = ''; 
      item.EndDateTime = ''; 
     } else { 
      item.ClockOutTime = moment(item.EndDateTime).format(HC_APP_CONFIG.timeFormat); 
     } 
     var currentDate = 'd'+item.Date; 
     if (ctrl.dateGroups.hasOwnProperty(currentDate) && 
      ctrl.dateGroups[currentDate].length > 0) { 
      ctrl.dateGroups[currentDate].push(item); 
     } else { 
      ctrl.dateGroups[currentDate] = [item]; 
     } 
    }); 
} 

函數(成功)取每個返回的信息並把它放入一個對象作爲日期後命名陣列的一部分,所以,從1月14日的所有項目中,例如,在一個陣列中結束,和另一對於1月15日,等

這將顯示在頁面中使用這個循環:

<div class="col-sm-12" ng-repeat="(key,value) in punchList.dateGroups"> 
    <h2 class="punch-heading">{{key.substring(1)}}</h2> 
    <div hc-grid id="grid-{{key}}"></div> 
</div> 

的結果是一系列網格,每個對應的日期和含有該日期的所有項目。這又是成功的。

網格配置:

gridConfig = { 
    uiOptions: {}, 
    autoBind: false, 
    sortable: { 
     mode: 'single' 
    }, 
    height: 'auto', 
    columnMenu: false, 
    filterable: false, 
    dataSource: { 
     type: 'json', 
     serverPaging: true, 
     serverFiltering: true, 
     serverSorting: true, 
     pageSize: HC_APP_CONFIG.defaultPageSize, 
     schema: { 
      data: 'Data', 
      total: 'TotalCount', 
      model: { 
       id: 'ShiftId', 
       fields: { 
        EmployeeName: { 
         type: 'string' 
        }, 
        EmployeeCode: { 
         type: 'string' 
        }, 
        JobName: { 
         type: 'string' 
        }, 
        ClockIn: { 
         type: 'string' 
        }, 
        ClockOut: { 
         type: 'string' 
        } 
       } 
      } 
     } 
    }, 
    columns: [ 
     { 
      field: 'EmployeeName', 
      title: 'Name', 
      sortable: false 
     }, 
     { 
      field: 'EmployeeCode', 
      title: 'Employee Code', 
      sortable: false 
     }, 
     { 
      field: 'JobName', 
      title: 'Job', 
      sortable: false 
     }, 
     { 
      field: 'ClockInTime', 
      title: 'Clock In' 
     }, 
     { 
      field: 'ClockOutTime', 
      title: 'Clock Out' 
     } 
    ] 
} 

問題是,當我排序的時鐘或時鐘輸出列(唯一可排序列)。此時,網格結構(分頁指示器,列頭等)仍保持完整,但數據消失。

我使用的劍道UI v2015.1.429

+0

注:在DOM行爲而言,這構成了電網的正在從DOM中完全刪除。 –

+0

serverSort param期望爲新鮮的源創建新的API調用嗎?我在其他代碼示例中看到,可以爲Kendo UI網格提供直接API調用的URL。我的直覺反應是Kendo網格在排序時將數據模型丟棄,並期望從服務器獲得新的數據模型(而不是在本地進行排序),因爲serverSort參數是真實的。 –

+0

booyah,@Daniel Nalbach。發佈這個答案。我會將其標記爲答案。謝謝! –

回答

1

劍道UI電網通過支持直接服務器交互的內置AJAX系統進行API調用。看來,設置serverSort:true可能會告訴劍道UI電網刪除當前數據模型和查詢服務器的新排序的數據(其期望服務器提供)。由於您沒有使用與網格的直接服務器交互,它可能會丟棄模型,但無法獲得新的模型。

有一個sortable:true選項,可能是您所需要的現有數據的客戶端排序。

Link to Kendo UI grid server-side sorting article