DevExtreme v21.2正式版下載

本系列文章將為大家介紹如何實現和應用模板，模板允許您自定義控件部分（標題、單元格、項目等）的呈現方式。

使用 *Template() 方法定義模板，例如：

• DataGridColumnBuilder.CellTemplate - 為DataGrid控件中的列單元格指定模板。
• ListBuilder.ItemTemplate - 為 List 控件中的項目指定模板。
• PopupBuilder.ContentTemplate - 為 Popup 控件的內容指定模板。

嵌套控件

您可以在模板中使用 DevExtreme 控件，例如以下代碼將 控件嵌套在控件中：

Razor C#

@(Html.DevExtreme().Popup()
// ...
// Specifies the contents of the Popup control
.ContentTemplate(@<text>
@(Html.DevExtreme().DataGrid<Sale>()
.Columns(columns => {
columns.AddFor(m => m.Region);
columns.AddFor(m => m.City);
columns.AddFor(m => m.Amount);
columns.AddFor(m => m.Date);
})
)
</text>)
)

Razor VB

@Code
Html.DevExtreme().Popup() _
.ContentTemplate(Sub()
@<text>
@(Html.DevExtreme().DataGrid(Of Sale)() _
.DataSource(Function(d) d.WebApi().Controller("GridData")) _
.Columns(Sub(columns)
columns.AddFor(Function(m) m.Region)
columns.AddFor(Function(m) m.City)
columns.AddFor(Function(m) m.Amount)
columns.AddFor(Function(m) m.Date)
End Sub)
)
</text>
End Sub) _
.Render()
End Code

彈出窗口應如下所示：

注意：

• 由于 Razor 只允許一個級別的 @<text> 標記，因此您不能在另一個模板中定義模板，使用外部模板進行高級嵌套。
• 如果在 ItemTemplate 或 CellTemplate 模板中使用DevExtreme控件，請確保在嵌套控件的 ID 選項中指定唯一 ID，或者不要指定此選項。在這種情況下，嵌套控件實例會獲得自動生成的 ID。

將嵌套控件綁定到模板參數

嵌套控件的配置可以依賴于。

下面的示例為 DataGrid 單元格定義了一個模板，一個單元格包含一個按鈕，其配置取決于 cellTemplate 的值自由變量。

• 要將值傳遞給 Text 方法，使用 Text(JS) 重載。
• 要將值傳遞給 handleGridButtonClick(cellValue) 事件處理程序，請使用短匿名函數，此函數捕獲無值變量并將其作為參數傳遞給事件處理程序。

注意：

如果處理程序很短，則不需要將其提取到外部函數 - 您可以使用簡短的內聯函數，例如：

.OnClick("function() { alert(value); }")

Razor C#

@(Html.DevExtreme().DataGrid()
// ...
.Columns(columns => {
columns.Add()
.DataField("Name")
.CellTemplate(@<text>
@(Html.DevExtreme().Button()
.Text(new JS("value"))
.OnClick("function() { handleGridButtonClick(value); }")
)
</text>);
})
)

Razor VB

@Code
Html.DevExtreme().DataGrid() _
.Columns(Sub(columns)
columns.Add() _
.DataField("Name") _
.CellTemplate(Sub()
@<text>
@(Html.DevExtreme().Button() _
.Text(New JS("value")) _
.OnClick("function() { handleGridButtonClick(value); }")
)
</text>
End Sub)
End Sub) _
.Render()
End Code

JS

示例：主從網格

將嵌套控件綁定到模板參數的一個常見用例是主從網格。 在以下代碼中，詳細信息部分嵌套了另一個 DataGrid，data.OrderID 自由變量用于其 DataSource 的 LoadParams。

Razor C#

@(Html.DevExtreme().DataGrid()
.DataSource(d => d.WebApi().Controller("DataGridMasterDetailView").Key("ID"))
.Columns(columns => {
columns.Add().DataField("FirstName");
columns.Add().DataField("LastName");
// ...
})
// Configures the Master-Detail UI
.MasterDetail(md => md
.Enabled(true)
// Specifies the contents of the detail section
.Template(@<text>
@(Html.DevExtreme().DataGrid()
.DataSource(d => d.WebApi()
.Controller("DataGridMasterDetailView")
.LoadAction("TasksDetails")
// Use "data.ID" in LoadParams
.LoadParams(new { id = new JS("data.ID") })
)
)
</text>)
)
)

Razor VB

@Code
Html.DevExtreme().DataGrid() _
.DataSource(Function(d) d.WebApi().Controller("DataGridMasterDetailView").Key("ID")) _
.Columns(Sub(columns)
columns.Add().DataField("FirstName")
columns.Add().DataField("LastName")
End Sub) _
.MasterDetail(Sub(md) md _
.Enabled(True) _
.Template(Sub()
@<text>
@(Html.DevExtreme().DataGrid() _
.DataSource(Function(d) d.WebApi() _
.Controller("DataGridMasterDetailView") _
.LoadAction("TasksDetails") _
.LoadParams(New With { .id = New JS("data.ID") })
)
)
</text>
End Sub)
) _
.Render()
End Code

多嵌套控件

在某些情況下，模板參數應通過中間控件傳遞。 例如，如果您將明細 DataGrid 放置在 TabPanel 中，則此 DataGrid 可以訪問 Tab 模板的參數，但看不到主 DataGrid 的明細模板的參數。 要解決這種情況，請將 tabExtras 自定義選項附加到 Tab，然后您可以在 tab1Template 模板中訪問它：

Razor C#

@(Html.DevExtreme().DataGrid()
.KeyExpr("ID")
.DataSource(MasterGridDataSource, key: "ID")
.MasterDetail(m => m
.Enabled(true)
.Template(@<text>
@(Html.DevExtreme().TabPanel()
.Items(items => {
items.Add()
.Title("Tab 1")
.Option("tabExtras", new {
masterKey = new JS("key")
})
.Template(new TemplateName("tab1Template"));
})
)
</text>)
)
)

@using (Html.DevExtreme().NamedTemplate("tab1Template")) {
<!-- Use tabExtras.masterKey to configure a detail grid -->
}

Razor VB

@Code
Html.DevExtreme().DataGrid() _
.KeyExpr("ID") _
.DataSource(MasterGridDataSource, key:= "ID") _
.MasterDetail(Sub(md) md _
.Enabled(True) _
.Template(Sub()
@<text>
@(Html.DevExtreme().TabPanel() _
.Items(Sub(items)
items.Add() _
.Title("Tab 1") _
.Option("tabExtras", New With {.masterKey = New JS("key")}) _
.Template(New TemplateName("tab1Template"))
End Sub)
)
</text>
End Sub)
) _
.Render()
End Code

@Using (Html.DevExtreme().NamedTemplate("tab1Template"))
' Use tabExtras.masterKey to configure a detail grid
End Using

DataGrid 控件綁定到以下數據源：

C#

object[] MasterGridDataSource = new[] {
new { ID = 1, Name = "John" },
new { ID = 2, Name = "Jane" }
};

VB

Dim MasterGridDataSource = {
New With {.ID = 1, .Name = "John"},
New With {.ID = 2, .Name = "Jane"}
}

DevExtreme | 下載試用

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序。從Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和響應式UI小部件集合，可在傳統Web和下一代移動應用程序中使用。 該套件附帶功能齊全的數據網格、交互式圖表小部件、數據編輯器等。

DevExpress技術交流群6：600715373      歡迎一起進群討論