劍道網格中的列級垂直分頁

我有一個要求：將18列數據顯示到劍道網格中。但是，這些列應該分頁。這意味着默認情況下頁面載入前6列將被顯示，並且頁碼2和3將被顯示。如果我點擊第2頁，網格將顯示第7列到第12列，第3頁顯示第13列到第18列。在Kendo UI網格中是否有任何隱式功能可用。我對劍道很感興趣。請一些身體可以拋出一些燈光/想法嗎？劍道網格中的列級垂直分頁

我在Asp.Net Mvc 5上使用Kendo，我需要去執行一些服務器端嗎？

在此先感謝。

來源

2015-08-03 gee' K' iran

您還需要翻閱結果「行」數據集。例如。你會有比你的pagesize更多的數據行嗎？你必須自己實現這一點，因爲默認的分頁機制將通過行而不是列，並且你還必須處理列重新綁定/（隱藏/顯示）。在你的情況下，網格控制實際上是你需要實現的正確的東西？如果您一次只顯示一行，那麼爲什麼不使用可以翻頁的漂亮表單？問題域的更多上下文可能有助於獲得有用/詳細的答案。 –

或者，爲什麼不顯示最重要列的「行」摘要，然後彈出「詳細」數據視圖。這對你來說可能是一個更合適的解決方案，這一切都取決於你想用這個解決方案實現的目標。 –

@DavidShorthose感謝您的回覆。是的，我甚至可以在同一個網格中進行明智的分頁。我正在嘗試通過列計數和基於列頁數的可見顯示/隱藏來實現。但是我只是想檢查一下是否有更好的想法，是否可以從Kendo Grid獲得支持。 –

我準備了一個示例dojo，希望能夠展示這種類型的功能。它可能不是你想要的，但爲你開發更適合你的需求的基礎工作。 Hide Columns in Groups

我已經基本上採取了其中一個劍道演示，並修改它顯示功能。

我已經創建了兩組列（columnGroup1,columnGroup2）與這些組，然後我有按鈕被配置爲顯示和隱藏這些組中包含的列。

爲了確保我有tagged正確我添加了一個數據 - *屬性頭，像這樣的列：

{field: "UnitPrice", 
title: "Unit Price", 
format: "{0:c}", 
width: "130px", 
headerAttributes:{ 
        "data-type":"columnGroup1" 
       } 
}

通過這樣做，那麼我可以簡單地連線了一個按鈕，如下所示：

<button data-type="columnGroup1" data-mode="show">Hide Group 1</button>

通過標記我的示例中的按鈕與組名，然後我可以輕鬆選擇哪些列應單擊時顯示/隱藏。

再神奇位發生在這裏：

$('button[data-type]').on('click', function (e) { 
    e.preventDefault(); 

    var mode = $(this).data("mode"); 

    var type = $(this).data("type"); 

    showHideColumns(type, mode === "hide"); 

    if (mode === "hide") { 
     $(this).text("Show " + type) 
     $(this).data("mode", "show"); 
    } else { 
     $(this).text("Hide " + type) 
     $(this).data("mode", "hide"); 
    } 
}); 


}); 



function showHideColumns(group, mode) { 

    //if mode = true then we are to show the columns 
    //if mode = false then we are the hide the columns 
    var grid = $('#grid').data("kendoGrid"); 
    var columns = $('th[data-type="' + group + '"]'); 
    if (!mode) { 
     //this is where we will hide the grid headers. 
     columns.each(function (me) { 
      grid.hideColumn($(this).data("field")); 
     }); 

    } else { 
     columns.each(function (me) { 
      grid.showColumn($(this).data("field")); 

     }); 

    } 


    console.log(group, mode); 
}

我click事件綁定到具有數據類型=「XXX」，然後檢查，看看是否該按鈕應該顯示或按鈕隱藏列取決於data-mode=show/hide設置。然後，我將這個動作推向showHideColumns函數，然後這將隱藏或顯示已經在該列組中設置的那些列。

希望這會讓你走，但如果你需要演示調整/更多的解釋，然後讓我知道。

來源

2015-08-04 11:50:14

劍道網格中的列級垂直分頁

回答

相關問題