【技术实现步骤摘要】
本申请属于web前端，特别是基于jquery开源框架开发的扩展插件。
技术介绍
1、jquery(https://jquery.com/)是目前国内市场占有率排名前三的javascript前端框架。自2006年推出后，经受住了时间考验，最近还在保持逐年增长。jquery树形结构插件是非常常用的插件，在web开发领域应用非常广泛，其功能性、稳定性及访问量持续上升，发展趋势也是随着信息时代的不断发展而发展，预期未来会有更多功能丰富的树形结构插件出现，以满足不同业务不断发展的需求。因此jquery树形结构插件的扩展能很好的满足用户和企业的web开发效率。
2、市场上常见的有fancytree、jstree、jquery.treeview等树形结构插件，针对垂直向下扩展的树形结构提供了丰富的功能。一些现有技术的树形结构插件，基于html的<table>、<tr>与<td>标签构造图形化的树形结构作为树形结构插件。<tr>标签作为html表格<table>的一行，具有在图形界面内向下排列的特性，从而易于构建垂直向下扩展的树形结构插件。然而，现有技术的树形结构插件对于树形结构的横向扩展(将具有横向扩展能力的树形结构也称为横向树)支持并不好，甚至没有横向扩展功能。因此本申请旨在提供一种横向树形结构插件以解决现有web
中存在的问题。
3、html中通过<select>标签提供可选项，呈现为例如图形界面上的下拉菜单。现有技术中也没有将可选项与横
技术实现思路
1、针对web
，特别是jquery插件库缺少带可选项的横向树形结构插件现有现状，本申请的目的在于设计一种基于jquery核心库代码开发的可扩展、可配置<select>标签选项的、优异性能、可灵活配置的多功能“横向树形结构插件”。
2、根据本申请的第一方面，提供了第一构造横向树插件的方法，包括：获取用于横向树的节点的节点数据；根据横向树的根节点的节点数据生成代表根节点的包括第一<ul>标签与第一<li>标签的html片段，其中第一<ul>标签容纳第一<li>标签；根据除根节点之外的其他节点生成html片段，其中以获取根节点为第一层父节点，获取其每个子节点的节点数据，再以子节点为父节点并获取其每个子节点的节点数据，以此类推，直到获取了所有其他节点的节点数据；针对每个具有子节点的父节点，生成包括第二<ul>标签与至少一个第二<li>标签的html片段，其中，第二<ul>标签容纳所述至少一个第二<li>标签，第二<li>标签与当前父节点的每个子节点一一对应；其中，在生成html片段时，将生成的<ul>标签的display属性设置为“inline-table”；其中，每个代表横向树的节点的<li>标签容纳<span>标签以及<img>标签；<span>标签用来展示其所属节点的添加节点/删除节点按钮；<img>标签用来展示其所属节点的连接线；若节点是其父节点的第一个子节点，其<img>标签代表形状为“--”的连接线；若节点是其父节点的非第一个子节点，且不是其父节点的最后一个子节点，其<img>标签代表形状为“l”的连接线以及竖线；若节点是父节点的最后一个子节点，且不是其父节点的第一个子节点，其<img>标签代表形状为“l”的连接线；将横向树的各节点的节点数据添加到节点数据集合；将代表横向树的各节点的html片段添加到代表横向树插件的dom元素中。
3、根据本申请的第一方面的第二构造横向树插件的方法，还包括：响应于监听到通过点击添加节点按钮产生的向所述横向树插件添加节点事件，为被添加的节点生成html片段与节点数据，将代表被添加节点的html片段添加到代表横向树插件的dom元素中，将被添加节点的节点数据添加到节点数据集合；其中，依据产生事件的添加节点按钮所属的<li>标签，确定被添加节点的父节点；标记被添加节点是否为其父节点的第一个子节点；为被添加的节点生成的html片段包括<li>标签，该<li>标签<span>标签以及<img>标签；<span>标签用来展示其所属节点的添加节点/删除节点按钮；<img>标签用来展示其所属节点的连接线；若被添加节点是其父节点的第一个子节点，其<img>标签代表形状为“--”的连接线；若被添加节点是其父节点的非第一个子节点，其<img>标签代表形状为“l”的连接线。
4、根据本申请的第一方面的第三构造横向树插件的方法，其中，若被添加节点是其父节点的非第一个子节点，且与被添加节点相邻的兄弟节点不是其父节点的第一个子节点，还修改该兄弟节点的<img>标签，使得代表形状为“l”的连接线以及形状为竖线的连接线。
5、根据本申请的第一方面的第四构造横向树插件的方法，其中，形状为“--”的连接线，用于连接父节点与其第一个子节点；形状为竖线的连接线，用于连接其所属节点的连接线的下边缘与其所属节点的下一个兄弟节点的形状为“l”的连接线的起点；形状为“l”的连接线的用于连接其所属节点的上一个兄弟节点的连接线的下边缘与其所属节点的边缘；以及形状为竖线的连接线的长度，依赖于其所属节点的子节点数量。
6、根据本申请的第一方面的第五构造横向树插件的方法，还包括：响应于监听到通过点击删除节点按钮产生的从所述横向树插件删除节点事件，依据产生节点删除事件的删除节点按钮所属的<li>标签，确定被删除节点；从代表横向树插件的dom元素中移除代表被删除节点的html片段，其中被已删除节点的html片段包括被删除节点的所有子节点的html片段，从节点数据集合移除所有被删除节点的节点数据。
7、根据本申请的第一方面的第六构造横向树插件的方法，其中，若被删除节点的父节点包括至少2个子节点，被删除节点是其父节点的最后一个子节点，且被删除节点的相邻的兄弟节点不是其父节点的第一个子节点，还修改被删除节点的相邻的兄弟节点的<img>标签，使得代表形状不包括竖线；若被删除节点的父节点包括至少2个子节点，被删除节点是其父节点的第一个子节点，还修改被删除节点的相邻的兄弟节点的<img>标签，使得代表形状为“--”的连接线；若被删除节点是其父节点的唯一子节点，还修改其父节点的<li>标签，删除其中容纳的代表下一层级的<ul>标签。
8、根据本申请的第一方面的第七构造横向树插件的方法，其中代表节点的<li>标签还容纳<本文档来自技高网...
【技术保护点】
1.构造横向树插件的方法，包括：
2.根据权利要求1所述的方法，还包括：
3.根据权利要求2所述的方法，其中，
4.根据权利要求3所述的方法，其中，
5.根据权利要求1-4之一所述的方法，还包括：
6.根据权利要求5所述的方法，其中，
7.根据权利要求6所述的方法，其中
8.根据权利要求7所述的方法，所述方法还包括：
9.根据权利要求所述的方法，其中，
10.一种计算设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现根据权利要求1-9之一所述的方法。
【技术特征摘要】
1.构造横向树插件的方法，包括：
2.根据权利要求1所述的方法，还包括：
3.根据权利要求2所述的方法，其中，
4.根据权利要求3所述的方法，其中，
5.根据权利要求1-4之一所述的方法，还包括：
6.根据权利要求5所述的方法，其中，
【专利技术属性】
技术研发人员：常丽娜，宋敏，牟小坤，杜一杰，
申请(专利权)人：北京中科海讯数字科技股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。