2012-11-15 13 views
2

我試圖用「simple data grid」顯示多個獨特的(表),網格在一個頁面上在單頁上工作的多個表。在下面的代碼中,我不清楚如何將唯一的數據傳遞給下面的函數,而不是var data = ExampleData.fruits。我到目前爲止所做的每一次嘗試都要添加具有唯一數據的第二個表格,導致所有數據都被破壞。 (我確實需要所有現有的功能排序高亮點擊,分頁等)。需要幫忙用簡單的數據網格

我創建這個jsfiddle其正在與一個網格和樣本數據。我已經爲我嘗試使用的第二組數據註釋了一些代碼。

ExampleData = {}; 
ExampleData.handleMockjaxResponse = function(settings) { 
var uri = new Uri(settings.url); 
var page = uri.getQueryParamValue('page') || 1; 
var order_by = uri.getQueryParamValue('order_by'); 
var sortorder = uri.getQueryParamValue('sortorder'); 
var rows_per_page = 6; 
var start_index = (page - 1) * rows_per_page; 
var total_pages = 1; 
var data = ExampleData.fruits; //How can I pass this data so that multiple tables can exist with different data 
if (data.length != 0) { 
    total_pages = parseInt((data.length - 1)/rows_per_page) + 1; 
} 
if (order_by) { 
    data.sort(function(left, right) { 
     var a = left[order_by]; 
     var b = right[order_by]; 

     if (sortorder == 'desc') { 
      var c = b; 
      b = a; 
      a = c; 
     } 
     if (a < b) { 
      return -1; 
     } 
     else if (a > b) { 
      return 1; 
     } 
     else { 
      return 0; 
     } 
    }); 
} 
+0

只是想更新此。我從來沒有能夠成功地在單個頁面上工作多個表格,其中每個網格都具有單獨的數據,並且它使用簡單的數據網格是自己的行數。由slashingweapon解決方案非常讚賞,但我永遠無法得到它的工作。最後,我贊成[數據表](http://datatables.net/)拋棄簡單的數據網格有人提出,現在所擁有的一切完美的工作之後。 – neil860208

回答

1

你的問題的根源是,你試圖建立在相同的URL('*')兩大mockjacks。你不能同時擁有它們。

如果您需要更換mockjack對於給定的URL,你需要擺脫舊的第一:

$.mockjaxClear(); 
$.mockjax({ 
    url: '*', 
    response: ... // whatever 
}); 

但是,這仍然沒有完全解決您的問題。通過在安裝第二個mockjack之前清除第一個mockjack,我可以同時顯示兩個數據網格。但是,試圖導航#grid表產生了一些有趣的錯誤(當然),因爲當我們建立#grid2是應該提供該#grid的數據mockjack已被刪除。

這裏是你應該做的:

  • 使用不同的網址爲每個表
  • 設置不同mockjacks每個URL

forked your fiddle一個解決方案。它使用數據說明符來指示要使用的數據集,以及用於數據響應回調的傳統lambda函數。

function generateMockjackResponse(dataIn) { 
    return function(settings) { 
     var uri = new Uri(settings.url); 
     var page = uri.getQueryParamValue('page') || 1; 
     var order_by = uri.getQueryParamValue('order_by'); 
     var sortorder = uri.getQueryParamValue('sortorder'); 

     var rows_per_page = 6; 
     var start_index = (page - 1) * rows_per_page; 

     var total_pages = 1; 
     var data = dataIn; 

     if (data.length != 0) { 
      total_pages = parseInt((data.length - 1)/rows_per_page) + 1; 
     } 

     if (order_by) { 
      data.sort(function(left, right) { 
       var a = left[order_by]; 
       var b = right[order_by]; 

       if (sortorder == 'desc') { 
        var c = b; 
        b = a; 
        a = c; 
       } 

       if (a < b) { 
        return -1; 
       } 
       else if (a > b) { 
        return 1; 
       } 
       else { 
        return 0; 
       } 
      }); 
     } 
     var result = { 
      total_pages: total_pages, 
      rows: data.slice(start_index, start_index + rows_per_page) 
     }; 
     this.responseText = result; 
    }; 
} 

var data1 = [ 
    // some data 
]; 

var data2 = [ 
    // other data 
]; 

$.mockjax({ 
    url: '*', 
    data: 1, 
    response: generateMockjackResponse(data1) 
}); 

$('#grid1').simple_datagrid({ 
    order_by: true, 
    data: 1 
}); 

$.mockjax({ 
    url: '*', 
    data: 2, 
    response: generateMockjackResponse(data1) 
}); 

$('#grid2').simple_datagrid({ 
    order_by: true, 
    data: 2 
});