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


Posted in Javascript onNovember 28, 2016

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.主页面展示:

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

2.tree展示:

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

小结

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

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

Javascript 相关文章推荐
jQuery UI AutoComplete 自动完成使用小记
Aug 21 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
Dec 28 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 Javascript
JS图片无缝滚动(简单利于使用)
Jun 17 Javascript
zTree插件之单选下拉菜单实例代码
Nov 07 Javascript
jQuery中get和post方法传值测试及注意事项
Aug 08 Javascript
DOM基础教程之模型中的模型节点
Jan 19 Javascript
JQ实现新浪游戏首页幻灯片
Jul 29 Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 Javascript
详解vue 组件之间使用eventbus传值
Oct 25 Javascript
JavaScript中立即执行函数实例详解
Nov 04 Javascript
用POSTMAN发送JSON格式的POST请求示例
Sep 04 Javascript
基于JavaScript实现右键菜单和拖拽功能
Nov 28 #Javascript
JavaScript实现图片懒加载(Lazyload)
Nov 28 #Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 #Javascript
JS实现页面跳转参数不丢失的方法
Nov 28 #Javascript
String字符串截取的四种方式总结
Nov 28 #Javascript
localStorage实现便签小程序
Nov 28 #Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 #Javascript
You might like
基于php导出到Excel或CSV的详解(附utf8、gbk 编码转换)
2013/06/25 PHP
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
详解WordPress中调用评论模板和循环输出评论的PHP函数
2016/01/05 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
在Linux上用forever实现Node.js项目自启动
2014/07/09 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
JavaScript表单验证实现代码
2017/05/22 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
浅析Vue 和微信小程序的区别、比较
2018/08/03 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
浅谈vue限制文本框输入数字的正确姿势
2019/09/02 Javascript
JS原型prototype和__proto__用法实例分析
2020/03/14 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
2020/04/08 Javascript
Python多线程编程(一):threading模块综述
2015/04/05 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
python版DDOS攻击脚本
2019/06/12 Python
django实现用户注册实例讲解
2019/10/30 Python
Python class的继承方法代码实例
2020/02/14 Python
CSS3实现千变万化的文字阴影text-shadow效果设计
2016/04/26 HTML / CSS
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
微软英国官方网站:Microsoft英国
2016/10/15 全球购物
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
解释i节点在文件系统中的作用
2013/11/26 面试题
国际商务系学生个人的自我评价
2013/11/26 职场文书
文明青少年标兵事迹材料
2014/01/28 职场文书
业务员工作态度散漫检讨书
2014/11/02 职场文书
2014年党风廉政工作总结
2014/12/03 职场文书
微信早安问候语
2015/11/10 职场文书
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis