Dev express web版的使用总结

前言：国内用Devexpress 插件的几乎都是围绕着winform转的，因为项目的特殊，公司针对老系统搞了一个web版的。照搬了一份，我把自己的使用心得整理一份放在这里吧

项目：asp.net core
层级：三层架构 MVC

Dev express JS 官方文档

Dev express ASP.NET CORE 官方文档

上面两个呢，是我用的最多的，我个人推荐使用 JS 的，便于定制化控制， ASP版本的约束性太强，过于死板，不好拓展，后期维护成本很高

1. DropDownBox 带 Template
   

可以把常用的控件封装成一个公共方法，

@using DevExtreme.AspNet.Mvc
@(
    Html.DevExtreme().DropDownBox()
    .ID("ddID")
    .Width(25)
    .TabIndex(1)
    .ContentTemplate("ddIDTemplate")
    .DropDownOptions(options => options.Width(370))
    .OnValueChanged(Model.OnValueChange)
    .InputAttr("style", "visibility: hidden;padding: 2px 0px 2px;")
    .OnKeyUp("deleteValues")
)

Template代码：
datasource 是js传过来的

@using DevExtreme.AspNet.Mvc
@model ComponentBaseViewModel
@using (Html.DevExtreme().NamedTemplate("ddIDTemplate"))
{
    @(
        Html.DevExtreme().DataGrid()
        .ID(Model.Id)
        .DataSource(new JS(@"数据源传入即可，DataTable、List、Array都可以"))
        .Columns(columns =>
        {
            columns.Add().DataField("ID").Width(200).Caption("我是编码");
            columns.Add().DataField("NAME").Width(100).Caption("我是名称");
        })
        .HoverStateEnabled(true)
        .Scrolling(s => s.Mode(GridScrollingMode.Infinite))
        .Height(345)
        .Selection(s => s.Mode(SelectionMode.Single))
        .OnRowClick(@<text>
                        function rowClick(selectedItems) {
                            component.close();//选中关闭
                        }
                    </text>)
        .OnSelectionChanged(@<text>
                                function(selectedItems) {
                                    var datas = selectedItems.selectedRowsData;
                                    if(datas&&datas.length>0){
                                        component.option("value", datas);
                                        component.close();//选中关闭
                                    }
                                }
                            </text>)
    )
}

<script>
    function deleteValues(e) {
        var keyCode = e.event.keyCode;
    }
</script>

前端使用：

                @{await Html.RenderPartialAsync("前面封装的控件路由", ComponentBaseViewModel.Create(Id: "ddId", TabIndex: 60, Template: "ddIDTemplate"));}

2、Grid使用

<!-- html代码 -->
<div id="order_lwh">
    @(Html.DevExtreme().DataGrid()
                        .ID("gridID")
                        .Editing(editing =>
                        {
                            editing.Mode(GridEditMode.Cell);
                            editing.RefreshMode(GridEditRefreshMode.Reshape);
                            editing.AllowUpdating(true);
                            editing.AllowAdding(true);
                            editing.AllowDeleting(true);
                            editing.StartEditAction(GridStartEditAction.Click);
                        })
                        .RepaintChangesOnly(true)
                        //.Width(524)
                        .Height(300)
                        .FocusedRowEnabled(true)
                        .FocusedRowKey(117)
                        .ColumnAutoWidth(true)
                        .ShowBorders(true)
                        .AllowColumnReordering(true)
                        .AllowColumnResizing(true)
                        .ColumnFixing(c => c.Enabled(true))
                        .ShowRowLines(true)
                        //.RemoteOperations(true) 分页功能
                        .Columns(c =>
                        {
                            c.Add().DataField("ID").Caption("我是ID").DataType(GridColumnDataType.String).Width(120);
                                                        c.Add().DataField("NAME").Caption("我是NAME"].Value).DataType(GridColumnDataType.String).Width(120);


                        }))        .Paging(paging =>
        {
            paging.PageSize(5);
            paging.Enabled(true);
        })
        .Pager(pager =>
        {
            pager.ShowInfo(true);
            pager.Visible(true);
        })
</div>

                    $("#gridID").dxDataGrid({
                        dataSource: //你的数据源,
                        keyExpr: "主键",
                        showBorders: true,
                        paging: {
                            enabled: false
                        },
                        onEditingStart: function (e) {
                            logEvent(e, "EditingStart");
                        },
                        onInitNewRow: function (e) {
                            logEvent("InitNewRow");
                        },
                        onRowInserting: function (e) {
                            logEvent("RowInserting");
                        },
                        onRowInserted: function (e) {
                            logEvent("RowInserted");
                        },
                        onRowUpdating: function (e) {
                            logEvent("RowUpdating");
                        },
                        onRowUpdated: function (e) {
                            logEvent("RowUpdated");
                        },
                        onRowRemoving: function (e) {
                            logEvent("RowRemoving");
                        },
                        onRowRemoved: function (e) {
                            logEvent("RowRemoved");
                        }
                    });
    function logEvent(e, oType) {
        if (oType == "RowRemoved") {

        }
        if (oType == "Saved") {
 
        }
    }

重要代码：

//js代码
 $("#gridID").dxDataGrid("instance").getController("data")._items;  //获取grid中所有的数据行 原本存在的，新增未保存的都可以取到
$("#gridID").dxDataGrid("instance").refresh(); // 刷新grid
$("#sboxId").dxSelectBox("option", "text"); //获取SelectBox数据源
 $("#ddbId").dxDropDownBox("option", "text");//获取DropDownBox数据源
 $("#dbId").dxDateBox("option", "text");//获取DateBox数据源