DevExtreme UI框架在可视化应用程序Nvisual中的实践应用

DevExtreme 是一款跨平台的UI框架，具有开发迅速、性能稳定、组件丰富等优势，在国际有非常高的知名度，并实际应用到众多浏览器应用程序中，开发者可通过jQuery、Vue、React等主流前端库、框架进行快速开发。

在本次项目开发中，我们选用Vue框架以数据网格作为主要开发内容，并依赖DevExtreme中其他组件（浮动弹窗、分页、表单组件、本地存储组件等），对可视化管理软件Nvisual的模型库完成数据网格式的管理并允许用户进行增删改查等操作，并提供多种技术选项，实现排序、过滤、导出Excel的功能。

示例，Nvisual模型库

创造一个最基础的Dev dataGrid 数据网格组件只需要引入DxDataGrid 在Vue的组件中插入即可，当你完成这样的操作之后，最简单的数据网格就生成完成了。之后，可以在组件中使用Vue动态或静态数据对数据网格进行基本的配置与数据的引入：

1. 若想引入数据，需要配置dataSource ，这是组件数据的来源，它可以传入一个数组，也可以使用dev内置的数据配置组件一步到位：使用ODataSource 直接连接OData数据库，无需后台接口即可迅速配置。同样，开发者可以选择本地数据源localStore、集成式远程数据源DataSourceStore、自定义数据开发源customStore等，可以适应任何情况下的数据来源。本次开发，我们使用集成式数据源开发组件，完成数据的增删改查过滤。

2. 配置数据源方法，在不同的数据源中要想完成复杂的数据响应，需要载入多个方法来引入数据

a) Load // 数据加载方法

b) Update // 数据更新方法

c) Insert // 数据新增方法

d) Remove // 数据删除方法

3. 引入数据源接口，测试完成,在我们完成数据与接口的引入后，我们只需要插入
   下面展示一些

DxEditing(
     :allowUpdating="true"
     :allowDeleting="true"
     :allowAdding="true"
     :useIcons="true"
     mode="popup")
     

组件，即可在网格中生成特殊的一列，可以此时数据网格便拥有了增删改查的功能。之后，若需要对大量数据进行分页或指定单页数据量时，插入DxPaging 与DxPager 即可，在大量数据涌入网格中，组件会智能根据数据进行分页处理，在不同数据量的情况下智能分配单页数据量。

列的展示：在默认情况下，列的展示会以数据为基准，将传入的JSON以Key:Value的形式进行逐列显示，并可以为网格配置columnAutoWidth 来使单元格数据适应屏幕，若需要自定义列，则需要引入DxColumn，开发者可以通过传入参数控制列的类型，样式，数据格式等，或者传入配置文件对单个列进行自定义数据的传入等

列数据过滤与排序：在列生成时如果不传入数据类型，将会自适应判断当前行的数据类型，当我们需要进行过滤个排列时，需引入DxFilterRow和DxSorting来实现过滤和排序，组件会智能判断当前的数据类型，搭配输入框，选择框提供给用户进行筛选，提供数字的大小、等于过滤条件与文本的全等包含不包含等与布尔值中true和False的过滤与排序条件，支持多选过滤与多方式排序等，满足用户在实际使用中几乎所有条件

数据导出：当用户需要对数据进行导出时，前端开发的常规方式是将需要导出的数据传入服务器，由服务器进行数据转换与文件的提供，但在devExtreme中，数据网格拥有纯前端导出的方式，具有速度快，无网络影响的优点，可以快速对数据进行导出。首先，要引入DxExport组件，这个组件会自动生成导出插件，提供导出选中与导出所有两种选项，瞬息之间即可生成Excel表格

至此完成devExtreme数据网格的搭建，通常情况下，开发一个系统数据模块需要多至数十张或更多的表格组成，devExtreme可以进行通用格式的快速开发，通过对数据的多层封装，快速开发、一键生成，使之成为前端开发的优势类库之一