DevExtreme v21.2正式版下載

本系列文章將為大家介紹如何實(shí)現(xiàn)和應(yīng)用模板，模板允許您自定義控件部分（標(biāo)題、單元格、項(xiàng)目等）的呈現(xiàn)方式。

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

• DataGridColumnBuilder.CellTemplate - 為DataGrid控件中的列單元格指定模板。
• ListBuilder.ItemTemplate - 為 List 控件中的項(xiàng)目指定模板。
• PopupBuilder.ContentTemplate - 為 Popup 控件的內(nèi)容指定模板。

嵌套控件

您可以在模板中使用 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

彈出窗口應(yīng)如下所示：

注意：

• 由于 Razor 只允許一個(gè)級(jí)別的 @<text> 標(biāo)記，因此您不能在另一個(gè)模板中定義模板，使用外部模板進(jìn)行高級(jí)嵌套。
• 如果在 ItemTemplate 或 CellTemplate 模板中使用DevExtreme控件，請(qǐng)確保在嵌套控件的 ID 選項(xiàng)中指定唯一 ID，或者不要指定此選項(xiàng)。在這種情況下，嵌套控件實(shí)例會(huì)獲得自動(dòng)生成的 ID。

將嵌套控件綁定到模板參數(shù)

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

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

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

注意：

如果處理程序很短，則不需要將其提取到外部函數(shù) - 您可以使用簡(jiǎn)短的內(nèi)聯(lián)函數(shù)，例如：

.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

示例：主從網(wǎng)格

將嵌套控件綁定到模板參數(shù)的一個(gè)常見(jiàn)用例是主從網(wǎng)格。 在以下代碼中，詳細(xì)信息部分嵌套了另一個(gè) 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

多嵌套控件

在某些情況下，模板參數(shù)應(yīng)通過(guò)中間控件傳遞。 例如，如果您將明細(xì) DataGrid 放置在 TabPanel 中，則此 DataGrid 可以訪問(wèn) Tab 模板的參數(shù)，但看不到主 DataGrid 的明細(xì)模板的參數(shù)。 要解決這種情況，請(qǐng)將 tabExtras 自定義選項(xiàng)附加到 Tab，然后您可以在 tab1Template 模板中訪問(wèn)它：

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 控件綁定到以下數(shù)據(jù)源：

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小部件集合，使您可以利用現(xiàn)代Web開(kāi)發(fā)堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構(gòu)建交互式的Web應(yīng)用程序。從Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和響應(yīng)式UI小部件集合，可在傳統(tǒng)Web和下一代移動(dòng)應(yīng)用程序中使用。 該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

DevExpress技術(shù)交流群6：600715373      歡迎一起進(jìn)群討論