Devexpressweb版的使用总结

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

项目：asp.net core

层级：三层架构 MVC

Dev express JS 官方文档 DevExtreme Demos (devexpress.com)

Dev express ASP.NET CORE 官方文档 ASP.NET Core Control Demos | DevExpress

上面两个呢，是我用的最多的，我个人推荐使用 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使用

<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数据源