浅析使用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 相关文章推荐
javascript 传统事件模型构造的事件监听器实现代码
May 31 Javascript
有关javascript的性能优化 (repaint和reflow)
Apr 12 Javascript
基于jquery实现等比缩放图片
Dec 03 Javascript
js跨域请求数据的3种常用的方法
Dec 01 Javascript
Bootstrap每天必学之折叠
Apr 12 Javascript
js提交form表单,并传递参数的实现方法
May 25 Javascript
JS留言功能的简单实现案例(推荐)
Jun 23 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
Feb 20 Javascript
解决Mac安装thrift因bison报错的问题
May 17 Javascript
ES6 对象的新功能与解构赋值介绍
Feb 05 Javascript
JS回调函数深入理解
Oct 16 Javascript
JavaScript 事件捕获冒泡与捕获详情
Nov 11 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
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
PHP获取用户的浏览器与操作系统信息的代码
2012/09/04 PHP
分享下PHP register_globals 值为on与off的理解
2013/09/26 PHP
PHP 使用memcached简单示例分享
2015/03/05 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
鼠标经过tr时,改变tr当前背景颜色
2014/01/13 Javascript
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
浅析AngularJS中的指令
2016/03/20 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
vue实现todolist单页面应用
2017/04/11 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
layui select动态添加option的实例
2018/03/07 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
2020/02/17 Javascript
[42:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS OpTic
2018/03/31 DOTA
Python基于twisted实现简单的web服务器
2014/09/29 Python
python实现调用其他python脚本的方法
2014/10/05 Python
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
python图书管理系统
2020/04/05 Python
Python退火算法在高次方程的应用
2018/07/26 Python
浅析NumPy 切片和索引
2020/09/02 Python
详解如何在css3打包后自动追加前缀插件:autoprefixer
2018/12/18 HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
2019/09/05 HTML / CSS
客服专员岗位职责范本
2013/11/29 职场文书
2014年党员自我评议总结
2014/09/23 职场文书
大学生学习新党章思想汇报
2014/10/25 职场文书
干部作风建设工作总结
2014/10/29 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
党校党性分析材料
2014/12/19 职场文书
部队个人年终总结
2015/03/02 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python