MVC用DevExpress的一些学习经验

公有属性：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.字段名).Editor(e =>e.TextBox().ID("").Width(200).MaxLength(200));

              });

        }).ReadOnly(true)

) 

5.TreeList

  @(Html.DevExtreme().TreeList<Model>()

        .ID("")

        .DataSource(d => d.Mvc()

        .Controller("")

        .LoadAction("")

        .Key(""))

        .ItemsExpr("")

        .DataStructure(TreeListDataStructure.Tree)

        .ShowBorders(true)

        .Columns(columns =>

        {

            columns.AddFor(m => m.字段名).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 = $("#ContentDetail-popup").dxPopup("instance");

        popup.option("contentTemplate", $("#popup-template-2"));

       popup.show();   //显示弹窗

       popup.colse();

注：如果是复选框选中弹窗，弹窗关闭后，DataGrid会有选中状态要清除，否则弹窗第二次使用不弹

清除DataGrid选中状态 GetDataGridInstance().clearSelection();