公有属性：ID，Name,Text,Type,OnClick
1.button按钮：
@(Html.DevExtreme().Button())
2.popup弹窗：
@(Html.DevExtreme().Popup())
3.DataGrid
@(Html.DevExtreme().DataGrid<Model>())
.Columns(columns => {columns.Add().Type(GridCommandColumnType.Selection).Width(40); })//添加字段列
4.Form
@(Html.DevExtreme().Form<Model>().ID("form1").ColCount(1).Items(items =>
{
items.AddGroup().Caption("") .ColCount(2).Items(groupItems =>
{
groupItems.AddSimpleFor(m => m.BizContactTitle).Editor(e =>e.TextBox().ID("BizContactTitle").Width(200).MaxLength(200));
});
}).ReadOnly(true)
)
5.TreeList
@(Html.DevExtreme().TreeList<vLaborSummary>()
.ID("")
.DataSource(d => d.Mvc()
.Controller("")
.LoadAction("")
.Key(""))
.ItemsExpr("")
.DataStructure(TreeListDataStructure.Tree)
.ShowBorders(true)
.Columns(columns =>
{
columns.AddFor(m => m.LaborSummaryTitle).Width(200).Fixed(true);
columns.Add().Caption("金").Columns(a => { a.AddFor(m => m.Day01).Width(50); });
})
.Paging(paging => paging.PageSize(15))
.ShowRowLines(true)
.ShowBorders(true)
.ColumnAutoWidth(true)
.Height(320)
)
JS的DevExpress的用法
1. DataGrid的绑定
$("#gridContainer").dxDataGrid({
dataSource: data,
keyExpr: "ID",
showBorders: true
});
2. TextBox取值
$("#tName ").dxTextBox("instance").option("value")
3. SelectBox下拉选框取值
sState ").dxSelectBox("instance").option("value")
4. $("#获取DataGrid选中数据
function btnBizContactDetail_Click() {
var data = GetDataGridInstance().getSelectedRowsData();
}
注：获取的是数组取,第一个值为data[0]
取字段是data[0].字段名
5. Popup
var popup = $("#vBizContactContentDetail-popup").dxPopup("instance");
popup.option("contentTemplate", $("#popup-template-2"));
popup.show(); //显示弹窗
popup.colse();
注：如果是复选框选中弹窗，弹窗关闭后，DataGrid会有选中状态要清除，否则弹窗第二次使用不弹
清除DataGrid选中状态 GetDataGridInstance().clearSelection();