一种基于组件式开发前端界面控件实现方法

摘要

本发明公开了一种基于组件式开发前端界面控件系统，包括主框架布局器，用于将div按照指定位置进行布局，主要位置有上、下、左、右、中，并可以选择设置每个div的折叠及数据加载形式；CRUD空间，为表格的行内编辑服务，通过点击行或者单元格，并在光标附近位置弹出div层展示单元格指定数据；表单控件，将input、button、select元素进行包装并组合成展现形式丰富多彩的小控件，提高表单的执行效率及用户体验性；表格控件，采用div分层展示形式并结合table元素将数据组织在表格中；本发明将常用的页面生成页面模板，通过平台的页面自动生成的功能进行快速高效的web项目开发。

说明书

技术领域

本发明涉及一种基于组件式开发前端界面控件实现方法。

背景技术

随着业务内容的丰富化程度越来越高，用户对于数据的展现形势也越来越高。基本的页面元素已不能满足现有需求。

要按照用户要求开发出丰富的页面展示效果，对开发人员要求也相应提高，很多项目组可能不具有页面前端的开发能力，前端开发缓慢，代码杂乱，且浏览器兼容性不够。

现有的前端框架专业性强，虽然元素丰富但加载缓慢，并且对自主研发的开发平台接入难度高，开发困难。

发明内容

本发明为了解决上述问题，提出了一种基于组件式开发前端界面控件实现方法，该方法以jquery为底层开发脚本，实现大部分页面通用组件，并在其功能上进行拓展，满足多场景、多功能需求的组件效果，组件功能丰富、易于配置使用，满足国内需求。

为了实现上述目的，本发明采用如下技术方案：

一种基于组件式开发前端界面控件系统，包括主框架布局器、CRUD控件、表单控件、表格控件、树形控件、导航控件和窗体控件；其中：

所述主框架布局器，用于将div按照指定位置进行布局，主要位置有上、下、左、右、中，并可以选择设置每个div的折叠及数据加载形式；

所述CRUD空间，为表格的行内编辑服务，通过点击行或者单元格，并在光标附近位置弹出div层展示单元格指定数据；

所述表单控件，将input、button、select元素进行包装并组合成展现形式丰富多彩的小控件，提高表单的执行效率及用户体验性；

所述表格控件，采用div分层展示形式并结合table元素将数据组织在表格中；

所述树形控件，用于实现树形结构的展示；

所述窗体控件，用于使div的展现形式类似于应用程序中的窗体，并为div层自动附加窗体的一般功能属性。

所述主框架布局器，为页面框架的布局设计，将div按照指定位置进行布局，主要位置有上、下、左、右、中，并可以选择设置每个div的折叠及数据加载形式，通过jquery获取指定div并控制div的位置属性，使目标div通过指定position的属性值，通过lnui.js的相应方法使相关div定位在页面的指定位置，并加载默认属性及用户指定属性。

所述position的属性值包括left、right、top、center和bottom属性。

所述CRUD控件，为表格的行内编辑服务，包括单元格编辑、行编辑、表单编辑与弹出框编辑。

所述单元格编辑包括点击某单元格时，按照单元格给定数据格式显示要修改数据，如下拉列表选项和时间控件。

所述表格控件，将table与div进行结合，通过对其样式的控制以达到类似于excel的灵活操控，区别于单一的table对数据的展现形式，整个表格采用div分层展示形式并结合table元素将数据组织在表格中。

所述表格控件的功能包括表格列大小的拖拽、表格列位置互换、列显示/隐藏、表格列锁定和表格内数据过滤。

所述表格控件的展示形式包括表格行内编辑、详细行数据、树形数据展示、数据分组展示以及数据分页展示。

基于上述控件系统的实现方法，包括以下步骤：

1.开发人员通过函数调用指定类型的组件；

2.Lnui.js以jquery为底层开发脚本，通过jquery的选择器获取目标元素；

3.按照指定类型组建选择该功能常用元素进行包装及组合，重新定义元素样式及属性值；

4.组装上述元素，形成独立的可配置的展现单元，每个组件都封装有自身特有的属性及事件，并支持用户自定义扩展事件；将组建写入目标元素中。

本发明的有益效果为：

1.可以将常用的页面生成页面模板，通过平台的页面自动生成的功能进行快速高效的web项目开发；

2.代码简单易读，扩展性强，开发效率高，代码规范整洁。

附图说明

图1为本发明的框架示意图；

图2为本发明的流程示意图。

具体实施方式：

下面结合附图与实施例对本发明作进一步说明。

如图1-图2所示，一种基于组件式开发前端界面控件实现方法，包括以下步骤：

1.开发人员通过函数调用指定类型的组件。

2.Lnui.js以jquery为底层开发脚本，通过jquery的选择器获取目标元素。

3.按照指定类型组建选择该功能常用元素进行包装及组合，重新定义元素样式及属性值。

4.组装上述元素，形成独立的可配置的展现单元(组件)，每个组件都封装有自身特有的属性及事件，并支持用户自定义扩展事件。

5.将组建写入目标元素中。

该框架采用div+css的设计模式，用户可根据实际需要更换样式表(lnui.css文件)。该框架主要有两个文件，也是开发者必须引入的包：lnui.js、lnui.css以及必要的资源包resources(主要存放图片等资源)；

lnui.js为框架主体脚本，主要通过jquery的选择器查找目标元素，并跟据不同事件控制目标元素的属性值，以及子元素的属性，该过程相当于对页面拼装，开发人员只需要填写相应的属性即可在页面显示相应内容，省却了开发人员开发页面的工作。

该框架主要分为七类：

一、主框架布局器

1、该模块主要为页面框架的布局设计，可以将div按照指定位置进行布局，主要位置有上、下、左、右、中，并可以选择设置每个div的折叠及数据加载形式(立即加载/懒加载)。

2、框架页面布局图如下：

该功能主要通过jquery获取指定div并控制div的位置属性，使目标div通过指定position的属性值(left、right、top、center、bottom)以及其它属性，通过lnui.js的相应方法使相关div定位在页面的指定位置，并加载默认属性及用户指定属性。

二、CRUD控件

主要为表格的行内编辑服务，主要类型有单元格编辑(点击某单元格时，按照单元格给定数据格式显示要修改数据，如下拉列表选项、时间控件)、行编辑、表单编辑、弹出框编辑。

该功能主要通过点击行或者单元格，并在光标附近位置弹出div层展示单元格指定数据、当前行数据、表单数据或者更多明细数据，展现形式类似于卡片。

三、表单控件

该功能主要是将input、button、select等元素进行包装并组合成展现形式丰富多彩的小控件，提高了表单的执行效率及用户体验性，并增加了前段的数据验证。比如：将input的text元素与button和div的结合可以组合出时间控件、多样式的下拉列表控件、弹出窗空间、属性选择控件等。

该功能主要将基础元素进行封装，成为常用的易于体验的控件类型，使开发人员能够直接调用并操控数据，减少了开发人员自己开发控件的过程，并增加了用户体验。

四、表格控件

该功能主要将table与div进行结合，通过对其样式的控制以达到类似于excel的灵活操控。该功能区别于单一的table对数据的展现形式，整个表格采用div分层展示形式并结合table元素将数据组织在表格中，通过该种形式可以实现table元素所不能实现的功能，比如表格列大小的拖拽、表格列位置互换、列显示/隐藏、表格列锁定、表格内数据过滤等。

此外还扩展了表格数据的展示形式，比如：表格行内编辑、详细行数据、树形数据展示、数据分组展示以及数据分页展示。

五、树形控件

该功能主要实现了树形结构的展示，包括基本的树形展示、多选树/单选树、节点拖拽投放、过滤树。

六、导航控件

该功能主要分为菜单、菜单按钮、选项卡、手风琴样式的折叠面板组，折叠菜单，折叠树。

该功能主要通过操控列表元素，并按照不同类型加载默认属性值，使列表控件形成丰富多彩的展现形式。

七、窗体控件

该功能主要封装div的样式，使div的展现形式类似于应用程序中的窗体，并为div层自动附加窗体的一般功能属性(比如：最小化按钮、最大化按钮、关闭按钮、窗体标题、窗体icon图标、窗体大小的拖拽、窗体位置的拖拽)

上述控件外还提供了很多通用的工具类函数，比如数据的格式化(货币格式、大小写转换、数据过滤、以及支持自定义的正则表达式的数据格式化操作)；

由于底层由jquery的引用，对于大部分主流浏览器都兼容，并且使用通用的样式表，对于样式的切换相对比较容易。

可以将常用的页面生成页面模板，通过平台的页面自动生成的功能进行快速高效的web项目开发。代码简单易读，扩展性强，开发效率高，代码规范整洁。

上述虽然结合附图对本发明的具体实施方式进行了描述，但并非对本发明保护范围的限制，所属领域技术人员应该明白，在本发明的技术方案的基础上，本领域技术人员不需要付出创造性劳动即可做出的各种修改或变形仍在本发明的保护范围以内。