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数据源
                
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Dev Express for Delphi 10.3(Dev Express)是一套专为Delphi语言开发者设计的开发工具包。安装Dev Express需要以下步骤: 1. 下载:首先,您需要从Dev Express官方网站上下载适用于Delphi 10.3的安装包。请确保您选择了与您当前开发环境匹配的本。 2. 解压缩:下载完成后,将安装包解压缩到您选择的目标文件夹中。 3. 运行安装程序:在解压后的目标文件夹中,找到并运行Dev Express的安装程序。运行此程序将启动Dev Express的安装向导。 4. 许可协议:在安装向导的第一步中,您将需要确认您已阅读并同意Dev Express的许可协议。 5. 选择安装目录:在安装向导的下一步中,您可以选择安装Dev Express的目标文件夹。如果您没有特殊要求,建议使用默认设置。 6. 选择组件:在接下来的步骤中,您可以选择要安装的Dev Express组件。Dev Express提供了各种不同的组件,用于开发不同类型的应用程序。根据您的需求,选择要安装的组件并继续安装向导。 7. 安装:完成组件选择后,点击“安装”按钮,开始安装Dev Express。安装过程可能需要一些时间,具体取决于您的计算机性能和选择的组件数量。 8. 完成:安装完成后,您将在屏幕上看到安装成功的消息。您可以选择启动Dev Express的示例项目,并通过运行它们来验证安装是否成功。 总之,安装Dev Express for Delphi 10.3相对简单,并且能够为Delphi开发提供丰富的功能和工具,提高开发效率并增强应用程序的外观和功能。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值