劍道UI網格：分層列標題顯示

我們需要實現這種類型的分層列顯示的用於在特定劍道UI網格兩列（用剃刀發動機）劍道UI網格：分層列標題顯示

column example

「應付金額」標題將位於兩個子標題「US $」和「R $」之上並顯示正確的邊界。否則，我們只需要使用兩個單獨的列標題來實現它。

行數據目前不以任何方式對兩列進行分組......他們是不同的。

編輯添加：列必須保持獨立，可過濾和可排序。

所有幫助非常感謝，

乍得雷曼企業IT，20世紀福克斯

來源

2014-09-03 Chad Lehman

我看你標記的「剃鬚刀」這一點，所以我假設你使用的是網格的MVC版本。但在網絡版中，您可以將HTML直接放入title屬性中。然後，您可以根據需要設置該代碼的樣式。我相當肯定，你可以做同樣的事情在MVC：

columns.Bound(c => c.Name).Title("<b>Name</b>");

這裏是網頁版的劍道道場的例子：http://dojo.telerik.com/Imiq 你可以看到，我有一個style標籤在head，並且我更新了其中一列的title屬性。

代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <base href="http://demos.telerik.com/kendo-ui/grid/index"> 
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style> 
    <title></title> 
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" /> 
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" /> 
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" /> 
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" /> 
    <script src="http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script> 
    <script src="http://cdn.kendostatic.com/2014.2.716/js/angular.min.js"></script> 
    <script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script> 

    <style> 
    div.hdr1 { 
     font-weight: bold; 
     border-bottom: white 2px solid; 
     text-align: center; 
    } 

    div.hdr2 { 
     font-weight: normal; 
     border-right: white 2px solid; 
     width: 47%; 
     float: left; 
     height: 14px; 
     text-align: center; 
    } 

    div.hdr3 { 
     border: white 0px solid; 
    } 
    </style> 
</head> 
<body> 

     <div id="example"> 
      <div id="grid"></div> 

      <script> 
       $(document).ready(function() { 
        $("#grid").kendoGrid({ 
         dataSource: { 
          type: "odata", 
          transport: { 
           read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers" 
          }, 
          pageSize: 20 
         }, 
         height: 550, 
         groupable: true, 
         sortable: true, 
         pageable: { 
          refresh: true, 
          pageSizes: true, 
          buttonCount: 5 
         }, 
         columns: [{ 
          field: "ContactName", 
          title: "<div class='hdr1'>Contact</div><div class='hdr2'>First</div><div class='hdr2 hdr3'>Last</div>", 
          width: 200 

         }, { 
          field: "ContactTitle", 
          title: "Contact Title" 
         }, { 
          field: "CompanyName", 
          title: "Company Name" 
         }, { 
          field: "Country", 
          width: 150 
         }] 
        }); 
       }); 
      </script> 
     </div> 


</body> 
</html>

來源

2014-09-03 22:35:35 jwatts1980

謝謝你的。是的，我們正在爲這個項目使用MVC/Razor。我看了一下你的dojo示例，而頭部分看起來是正確的...需求是保持列是分開的，可過濾的，可排序的等。在這種情況下，沒有'超級'頭部的單獨列是更可取的。 – 2014-09-04 00:13:14

劍道UI網格：分層列標題顯示

回答

相關問題