dhtmlxSuite v7.0新版本发布,新增带有新的分页小部件和CSS小部件模板

DHTMLX Suite是一个用JavaScript建立的富客户端开发框架。它是一个JavaScript UI库,用于建立一个完整的具有Ajax能力的前台组件。用户可以使用它建立一个企业级的跨浏览器Web应用和移动应用程序,它能提供优秀的性能和更丰富的用户体验。

DHTMLX开发团队一直在努力开发Suite JavaScript小部件库的主要版本。因此,DHTMLX Suite在7.0版中获得了许多全新的功能。

满足主要更新的重点:

  • 分页小部件
  • 将Suite窗口小部件与Node.js结合使用的代码示例
  • 用于样式化小部件的CSS模板
  • 触摸设备上的完美作品
  • 重新设计了布局,表单和标签栏

DHTMLX分页[PRO]

JavaScript分页-DHTMLX小部件

与数据进行交互是用户在Web应用程序中面临的最大挑战之一。当表中的数据行分布在许多页面上时,必须为用户提供适当的导航控件。从v7.0开始,DHTMLX Suite附加了JavaScript Pagination小部件,用于在DHTMLX Grid,TreeGrid,Tree,List和DataView中导航内容。

DHTMLX分页使最终用户可以借助输入字段和导航按钮快速搜索必要的信息。它可以直接使用,但也可以根据Web应用程序的要求进行调整。一系列的API属性可用于控制输入宽度,每页显示的项目数以及定义初始页面。与窗口小部件一起使用的API方法与事件侦听器一起使用,可为最终用户确保交互式和用户友好的体验。

请注意,DHTMLX分页仅在PRO版本中可用。

Node.js演示

应DHTMLX客户端的要求,我们准备了如何使用Node.js作为后端实现DHTMLX小部件的代码示例。这些示例展示了如何在DHTMLX网格,树,窗体,DataView,列表,图表和SimpleVault小部件中获取,编辑,删除和发送数据。您可以在GitHub上访问和浏览Node.js演示。

CSS窗口小部件模板

我们的主要目标之一是加速Web开发。为了实现这一目标,我们在分步指南“如何使用JavaScript创建用户友好的应用程序”中列出了成功应用程序的核心设计原则。在那里,我们揭示了方便导航,数据编辑,过滤和样式设置的关键点。

我们还提供了一种使用CSS模板在Web应用程序中样式化DHTMLX小部件的新颖方法。现在,您可以选择所需的小部件外观,从摘录中复制CSS样式,然后将其应用到您的应用中。这是一个深色工具栏的示例:

深色工具栏CSS

完美的触控支持

从现在开始,DHTMLX Suite在触摸设备上提供所有UI窗口小部件的流畅工作,使最终用户可以在任何设备上使用您的应用程序享受真正的原生体验。单击和双击触发的所有事件都将保留,并将照常触发。您可以通过以下链接在移动设备上测试DHTMLX小部件:https ://snippet.dhtmlx.com/q3cu6x1a?mode=mobile

重做布局

在v7.0中,与以前的版本相比,DHTMLX Layout提供了一种在页面上排列小部件的新方法。

首先,我们添加了许多预期的API属性来管理Layout单元的大小,例如宽度和高度,以自动调整到内容大小maxHeight,maxWidth,minHeight和minWidth。现在,gravity属性用于指定一个单元相对于同一行中一个父级中其他单元的权重。

其次,我们介绍了布局单元之间的三种边界类型:“空间”,“宽”和“线”。这些是“布局”单元格的类型配置属性的值。具有“空格”类型的单元格周围具有较大的空间。“宽”类型添加了单元格边框,仅在同级单元格之间留有宽阔的空间。“ line”类型仅向单元格添加边框。

DHTMLX空间布局

如果未指定自己的类型,则子单元格将继承其父代的边框类型。因此,您可以快速应用必要的布局配置并定义所需的边框类型,以在视觉上将单元格彼此分离。

DHTMLX的JS混合布局

返工表格

我们的开发团队重塑了DHTMLX Form的事件系统,以增强交互性。我们创建了新的Form事件以及各个控件的事件。

在v7.0中,我们还引入了一种新型的表单控件– CheckboxGroup。它代表在一个块中排列在一起的一组复选框。CheckboxGroup拥有自己的API,其中包含用于控制其外观的方法和属性。

复选框组-DHTMLX表单

此外,DHTMLX表单中还出现了一个新的Spacer元素。它可以通过占用控件之间的空间来分离控件。了解有关Spacer及其API的更多信息>

minlength,maxlength,min和max这样的HTML属性现在可用于Input和Textarea控件。

我们添加了一个新属性,用于在RadioGroup控件中指定初始值。

此外,v7.0还提供了借助新API方法setFocus和focus()将焦点设置在指定的Form控件上的功能。

标签栏:大小,对齐方式,内容溢出

DHTMLX Tabbar获得了用于控制标签大小的新API属性。从v7.0开始,您可以在tabWidth和tabHeight属性的帮助下定义每个选项卡的大小。此外,现在可以通过tabAutoWidth和tabAutoHeight属性将标签的宽度和高度自动调整为容器的大小。

DHTMLX JS标签栏-自动宽度

在v7.0中,您可以借助tabAlign属性轻松地将选项卡左,中或右对齐。

DHTMLX标签栏-右对齐

如果容器溢出了选项卡中的内容,则用户可以在外观漂亮的箭头的帮助下在选项卡之间切换,并平滑地滚动选项卡。

DHTMLX标签栏中的滚动标签

Grid和TreeGrid:隐藏和显示行

v7.0中另一个备受期待的功能是能够在DHTMLX Grid和TreeGrid中隐藏和显示行。为此,我们添加了新的API方法:showRow()和hideRow()。

拖放事件

V7.0在DHTMLX DataView,Grid,List,Tree和TreeGrid中提供了新的拖放事件。现在,所有最终用户操作都可以包含特定事件,这些事件使您可以完全控制Web应用程序的功能。V7.0包括事件监听器,用于诸如开始和结束拖放行之类的用户操作。您可以在文档中熟悉每个小部件的新事件。

其他更新

v7.0中的新功能和更新列表还远远没有完成。让我们简要介绍一下其他新颖性和增强功能。

  • 改进了DataCollection的排序和筛选方法。每当数据集更改时,就会出现新的smartSorting方法来对数据进行排序。
  • 事件集合已更新,并丰富了Form,TimePicker,Tree和TreeGrid小部件。DataView,Grid和List小部件可以将事件侦听器添加到项目的自定义模板中。
  • Selection API已在Tree,List,DataView和Grid小部件中更新。
  • 例如,可以访问和操作Grid标头中的过滤器,从而专注于您选择的过滤器,进行更改或清除。
  • 在菜单,工具栏和功能区小部件中创建了用于操纵项目选择的新API方法。
  • 在小部件初始化期间用于设置初始值的属性值已添加到ComboBox和TimePicker小部件中。

我们期待收到您的反馈。在下面的讨论中留下您的评论!

下载免费试用版【慧都网】
当前的客户可以在其客户区域中访问最新版本的DHTMLX Suite 。

 
posted @ 2020-12-21 17:07  roffey  阅读(237)  评论(0编辑  收藏  举报