2013-03-26 102 views
0

我打算使用KoGrid庫,但我遇到了無法解決的情況。 我不知道如何刷新網格的情況下,如果我有新的數據顯示。 我需要在ajax調用後更新數據。KoGrid如何在數據更改的情況下刷新網格

$.ajax({ 
       type: "GET", 
       url: reqvesturl, 
       cache: false, 
       dataType: "jsonp", 
       success: function (data) { 
        resultData = data; 
        if (!model) 
        { 
         model =new mainViewModel(); 
         ko.applyBindings(model); 
         } 
         else 
         { 
         model.myData(data); 
         //mo.applyBindings(); 
         }; 
        //model.myData(data);   
       }, 
       error: function (jqXHR, textStatus, errorThrown) { 

       } 
      }); 




var resultData = new Array(); 
var model ; 

function mainViewModel() { 
    var self = this; 
    var checkmarkFilter = function (input) { 
     return input ? '\u2714' : '\u2718'; 
    }; 
    var dateFilter = function (input) { 
     return new Date(input); 
    }; 
    self.mySelections = ko.observableArray([]); 
    self.myData = ko.observableArray([]); 
    self.myVisibleData = ko.observableArray([]); 
    self.filterOptions = { 
     filterText: ko.observable(""), 
     useExternalFilter: false 
    }; 
    self.pagingOptions = { 
     pageSizes: ko.observable([10, 20, 50]), //page Sizes 
     pageSize: ko.observable(10), //Size of Paging data 
     totalServerItems: ko.observable(0), //how many items are on the server (for paging) 
     currentPage: ko.observable(1) //what page they are currently on 
    }; 
    self.getPagedDataAsync = function (pageSize, page, searchText) {  
     var pagedData = resultData.slice((page - 1) * pageSize, page * pageSize); 
     self.myVisibleData(pagedData); 
     self.myData(resultData); 
     self.pagingOptions.totalServerItems(resultData.length); 

     // setTimeout(function() { 
      // var data; 
      // if (searchText) { 
       // var ft = searchText.toLowerCase(); 
       // data = largeLoad().filter(function (item) { 
        // return JSON.stringify(item).toLowerCase().indexOf(ft) != -1; 
       // }); 
      // } else { 
       // data = largeLoad(); 
      // } 
      // //var pagedData = data.slice((page - 1) * pageSize, page * pageSize); 
      // self.myData(data); 
      // self.pagingOptions.totalServerItems(data.length); 
     // }, 100); 
    }; 
    self.pagingOptions.pageSize.subscribe(function (a) { 
     self.getPagedDataAsync(a, self.pagingOptions.currentPage(), self.filterOptions.filterText()); 
    }); 
    self.pagingOptions.currentPage.subscribe(function (a) { 
     self.getPagedDataAsync(self.pagingOptions.pageSize(), a, self.filterOptions.filterText()); 
    }); 
    self.filterOptions.filterText.subscribe(function (a) { 
     self.getPagedDataAsync(self.pagingOptions.pageSize(), self.pagingOptions.currentPage(), a); 
    }); 
    self.getPagedDataAsync(self.pagingOptions.pageSize(), self.pagingOptions.currentPage()); 
    self.columnsChanged = function(newCols) { 
     return true; 
    }; 
    self.gridOptions = { 
     data: self.myVisibleData, 
     selectedItems: self.mySelections, 
     displaySelectionCheckbox: true, 
     multiSelect: true, 
     showGroupPanel: false, 
     showColumnMenu: false, 
     showFilter: false, 
     columnsChanged: self.columnsChanged, 
     maintainColumnRatios: true, 
     enablePaging: true, 
     pagingOptions: self.pagingOptions, 
     columnDefs: ko.observableArray([{ field: 'name', displayName: 'Adr', width: 'auto' }, 
        { field: 'type', displayName: 'type', width: 'auto' }, 
        { field: 'id', displayName: 'id', width: 'auto' } ]) 
    }; 

} 

//ko.applyBindings(new mainViewModel()); 

如何刷新網格?

回答

1

如果你的AJAX方法成功返回時,在你的mainViewModel稱爲刷新的方法,看起來是這樣的:

self.refresh =功能(myAjaxData){ self.myData(myAjaxData) }

+0

是的,這是正確的代碼的好方法。但是,在代碼之後以及在可視化數據更新之後,我會調用getPagedDataAsync。 – 2013-03-27 07:40:33

相關問題