当前位置: 首页 > 编程笔记 >

浅析使用BootStrap TreeView插件实现灵活配置快递模板

燕智
2023-03-14
本文向大家介绍浅析使用BootStrap TreeView插件实现灵活配置快递模板,包括了浅析使用BootStrap TreeView插件实现灵活配置快递模板的使用技巧和注意事项,需要的朋友参考一下

bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树、列表树等等。

开发条件:

安装bootstrap-treeview插件,具体操作见:

bootstrap-treeview

实现功能:

1.一个模板可指定子模板(包含多个地区、价格等)

2.编辑子模板地区时,动态改变tree的地区(其他子模板选中的地区disabled,此模板之前选中的地区默认选中)

3.tree选择时,父级和子集的联动(如父级选中子集全部选中,取消一个子集的时候,父级也取消)

4.维护子模板数据(展示选中的地区格式 如(安徽、北京(昌平 回龙观)) 存储选中节点)

其他说明

数据源格式:[{text:'展示名称1',nodes:[{text:'子级'}]},{text:'展示名称2'}]

bootstrap-trview会动态的为数据源添加nodeId,parentId这两个属性(很重要的属性),可自定义添加其他属性用来标记当前节点

编辑过程中维护的数据

数组对象templates包含:

1.模板的名称

2.每个子模板对应的 价格 件数 排序

3.子模板的地区Id、节点id、展示名称

实现上述数据需要维护的数组和对象

var templates = []; //保存最终储存的数据
var selectedNodeId = []; //用来存储单个模板选择的nodeId 用于展示
var editingTemplate = null; //用于标记正在处理的是第几个地区模板
var selectedAreaId = []; //保存当前选择的地区
var selectedAreaName = []; //保存当前选中的地区名称用于展示
var defaultData = [];//数据源

实现功能一

一个模板指定多个子模板

主要是维护templates[]数组 push进入多个template即可 下面会详细讲解如何维护template

实现功能二(动态修改tree)

原理:通过维护的templates和editingTemplate 拿到当前编辑的子模板数据和其他子模板数据,将当前模板的node默认选中,其他的数据置为disabled

编辑子模板

uncheckAll方法:$('#tree').treeview('uncheckAll', { silent: true });

disAbled方法:$('#tree').treeview('disableNode', [ nodeId, { silent: true } ]);

默认选中的方法$('#tree').treeview('checkNode', [ template.nodeIds[i], { silent: true } ]);

实现功能三:父级和子级的联动(主要操作在点击选中和取消选中上面 来分析两种情况)

第一种 选中

1.选择父节点 将子节点全部选中

根据父节点返回的nodes得到所有的子节点 并且将子节点全部选中

选中的方法$('#tree').treeview('checkNode', [ nodeId, { silent: true } ]);

可以封装为一个方法selectAllChildren()

2.如果选中的为子节点

判断父节点中的子节点是否全部选中如果全部选中则将父节点选中

第二种 取消

1.选中的为父节点,将所有的子节点取消选中

取消选中的方法$('#tree').treeview('uncheckNode', [ nodeId, { silent: true } ]);

2选中的为子节点,判断父节点中的子节点是否选中 如果选中 则取消选中

判断是否选中的方法

$('#tree').treeview('selectNode', [ nodeId, { silent: true } ]);

根据获取到元素获取是否选中

实现功能四(维护template数据)

1.正在编辑的editingTemplate

2.当前层级选中的所有selectedNodeId

3.展示需要的字符串数组selectedNodeName

3.存储字符串数组selectedAreaId对应数据库中的areaId

4.将上面的三个数组存入template,并将template push进入templates

逻辑

1.获取到所有的被选中的元素

2.遍历所有的元素 判断当前节点是否有nodes(即子元素),如果有则直接操作,并改变index,将其子元素全部跳过,将节点名称保存进areaNames,如"安徽"

3.遍历所有的元素 如果没有子元素,取出父级元素如"北京(",将node元素添加至后面,如"北京(昌平区",判断下一个元素的父节点是否发生改变,如果发生改变则结束维护字符串为"北京(昌平区)",并将其添加至areaNames,继续遍历下一个节点

4.其他三个数组在遍历的同时维护
实现结果展示:

1.主页面展示:

2.tree展示:

小结

本文提供简单的实现方案思路,具体的代码根据业务实现,不足之处不能动态处理数据源,优点bootstrap开放的api接口较多,可自定义实现。

以上所述是小编给大家介绍的使用BootStrap TreeView插件实现灵活配置快递模板,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!

 类似资料:
  • 本文向大家介绍浅析Spring配置文件,包括了浅析Spring配置文件的使用技巧和注意事项,需要的朋友参考一下 Spring的配置文件概述 简介 Spring的配置文件是用于指导Spring工厂进行Bean生成、依赖关系注入及Bean示例分发的”图纸”,他是一个或多个标砖的XML文档,J2EE程序员必须学会灵活应用这份”图纸”,准确的表达自己的”生成意图”。 Spring配置文件的示例 Sprin

  • 本文向大家介绍Android抢红包插件实现原理浅析,包括了Android抢红包插件实现原理浅析的使用技巧和注意事项,需要的朋友参考一下 抢红包,先看效果图~ 实现自动抢红包,解决问题有两点: 一:如何实时监听发红包的事件 二:如何在红包到来的时候自动进入页面并自动点击红包 一、如何获取红包到来的事件 为了获取红包到来状态栏的变化,我们要用到一个类:Accessibility 许多Android使用

  • 本文向大家介绍Python配置文件解析模块ConfigParser使用实例,包括了Python配置文件解析模块ConfigParser使用实例的使用技巧和注意事项,需要的朋友参考一下 一、ConfigParser简介 ConfigParser 是用来读取配置文件的包。配置文件的格式如下:中括号“[ ]”内包含的为section。section 下面为类似于key-value 的配置内容。 中括号“

  • 本文向大家介绍灵活使用asp.net中的gridview控件,包括了灵活使用asp.net中的gridview控件的使用技巧和注意事项,需要的朋友参考一下 gridview是asp.net常用的显示数据控件,对于.net开发人员来说应该是非常的熟悉了。gridview自带有许多功能,包括分页,排序等等,但是作为一个.net开发人员来说熟练掌握利用存储过程分页或者第三方自定义分页十分重要,这不仅是项

  • 本文向大家介绍浅析python内置模块collections,包括了浅析python内置模块collections的使用技巧和注意事项,需要的朋友参考一下 collections是Python内建的一个集合模块,提供了许多有用的集合类。 1、namedtuple python提供了很多非常好用的基本类型,比如不可变类型tuple,我们可以轻松地用它来表示一个二元向量。 >>> v = (2,3)

  • 本文向大家介绍浅谈使用Python内置函数getattr实现分发模式,包括了浅谈使用Python内置函数getattr实现分发模式的使用技巧和注意事项,需要的朋友参考一下 本文研究的主要是使用Python内置函数getattr实现分发模式的相关问题,具体介绍如下。 getattr 常见的使用模式是作为一个分发者。举个例子,如果你有一个程序可以以不同的格式输出数据,你可以为每种输出格式定义各自的格式