爲Kendo Grid UI設置groupHeaderTemplate

我現在正在與kendo Grid UI一起使用PHP。我在Grid中有一個列來列出我的DB中的'Stage'名稱（一個表'stage_name'的字段名稱）。我可以通過在列中設置「stage_name」作爲字段來實現，但是我必須根據「stage_id」（表的主鍵）對Stage Name進行排序。所以我改寫爲下面的代碼：爲Kendo Grid UI設置groupHeaderTemplate

var grid = $("#stageGrid").kendoGrid({ 
    columns: [{ 
     field: "stage_id", // stage_name 
     title: "Stage", 
     template: "#=stage_name#", 
     aggregates: ["count"], 
     groupHeaderTemplate: "Stage : #=(value != null)? value : 'Empty' # (Count: #=count#)", 
     width: 150 
    }] 
});

我能列出藝名的，排序的名相對於stage_id &了這一切。現在，我的問題是，在對列進行分組時，stage_id顯示爲列標題（可以在圖像attached中看到）。我必須通過顯示相應的舞臺名稱來解決這個問題。你們中的任何一個人都可以幫助我解決這個問題。期待你有價值的想法。

感謝您提前。

來源

2016-12-14 Sinto

如果我正確理解您的方案，您在網格中使用外鍵列，並且想要顯示與該外鍵ID相對應的名稱，並且還希望使用該外鍵進行分組。要做到這一點，使用列值屬性的最佳方式，除了具有文本和值屬性的對象數組，Kendo gird將根據該列的值自動選擇該行的文本。

這裏是一個工作演示。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>Kendo UI Snippet</title> 
 

 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" /> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" /> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" /> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" /> 
 

 
    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <div id="grid"></div> 
 
    <script> 
 
    var positionValues = [{ 
 
     "text": "Project Manager", 
 
     "value": 1 
 
    }, { 
 
     "text": "Sales Manager", 
 
     "value": 2 
 
    }, { 
 
     "text": "Engineer", 
 
     "value": 3 
 
    }]; 
 

 
    $("#grid").kendoGrid({ 
 
     columns: [{ 
 
     field: "name", 
 
     title: "Name" 
 
     }, { 
 
     field: "age", 
 
     title: "Age" 
 
     }, { 
 
     field: "positionId", 
 
     title: "Position", 
 
     values: positionValues 
 
     }], 
 
     dataSource: { 
 
     data: [{ 
 
      name: "Jane Doe", 
 
      age: 30, 
 
      positionId: "2" 
 
     }, { 
 
      name: "John Doe", 
 
      age: 34, 
 
      positionId: "1" 
 
     }, { 
 
      name: "Sam Degree", 
 
      age: 40, 
 
      positionId: "1" 
 
     }, { 
 
      name: "Salina Kile", 
 
      age: 51, 
 
      positionId: "2" 
 
     }, { 
 
      name: "Johney Doe", 
 
      age: 24, 
 
      positionId: "3" 
 
     }, { 
 
      name: "Matt Prior", 
 
      age: 23, 
 
      positionId: "3" 
 
     }, { 
 
      name: "Michael Jackson", 
 
      age: 37, 
 
      positionId: "2" 
 
     }, ], 
 
     group: { 
 
      field: "positionId", 
 
      aggregates: [{ 
 
      field: "age", 
 
      aggregate: "count" 
 
      }] 
 
     } 
 
     } 
 
    }); 
 
    </script> 
 
</body> 
 

 
</html>

我希望這將有助於。

編輯

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>Kendo UI Snippet</title> 
 

 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" /> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" /> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" /> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" /> 
 

 
    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <div id="grid"></div> 
 
    <script> 
 
    var positionValues = [{ 
 
     "text": "Project Manager", 
 
     "value": 1 
 
    }, { 
 
     "text": "Sales Manager", 
 
     "value": 2 
 
    }, { 
 
     "text": "Engineer", 
 
     "value": 3 
 
    }]; 
 

 
    function showPos(value) { 
 
     position = positionValues.find(function(el){ 
 
     return el.value == value; 
 
     }); 
 
     return (position) ? position.text : ""; 
 
    } 
 
    $("#grid").kendoGrid({ 
 
     columns: [{ 
 
     field: "name", 
 
     title: "Name" 
 
     }, { 
 
     field: "age", 
 
     title: "Age" 
 
     }, { 
 
     field: "positionId", 
 
     title: "Position", 
 
     values: positionValues, 
 
     groupHeaderTemplate: "Custom Template: #= showPos(value) #" 
 
     }], 
 
     dataSource: { 
 
     data: [{ 
 
      name: "Jane Doe", 
 
      age: 30, 
 
      positionId: "2" 
 
     }, { 
 
      name: "John Doe", 
 
      age: 34, 
 
      positionId: "1" 
 
     }, { 
 
      name: "Sam Degree", 
 
      age: 40, 
 
      positionId: "1" 
 
     }, { 
 
      name: "Salina Kile", 
 
      age: 51, 
 
      positionId: "2" 
 
     }, { 
 
      name: "Johney Doe", 
 
      age: 24, 
 
      positionId: "3" 
 
     }, { 
 
      name: "Matt Prior", 
 
      age: 23, 
 
      positionId: "3" 
 
     }, { 
 
      name: "Michael Jackson", 
 
      age: 37, 
 
      positionId: "2" 
 
     }, ], 
 
     group: { 
 
      field: "positionId", 
 
      aggregates: [{ 
 
      field: "age", 
 
      aggregate: "count" 
 
      }] 
 
     } 
 
     } 
 
    }); 
 
    </script> 
 
</body> 
 

 
</html>

來源

2016-12-14 11:19:34

泰的幫助，我會考慮這與更新你的。 – Sinto

這是一個有幫助的工作，但你能幫我多做一件事。按照您的建議進行操作時，我無法顯示groupHeaderTemplate。你知道如何設置，如上面的代碼所示。 – Sinto

對於使用groupHeaderTemplate，您可以使用自定義函數將您的值映射到相應的文本。檢查我更新的答案 –

爲Kendo Grid UI設置groupHeaderTemplate

回答

相關問題