浅析使用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 相关文章推荐
关于递归运算的顺序测试代码
Nov 30 Javascript
jQuery动画animate方法使用介绍
May 06 Javascript
用JavaScript实现动画效果的方法
Jul 20 Javascript
JavaScript中的fontsize()方法使用详解
Jun 08 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
第九篇Bootstrap导航菜单创建步骤详解
Jun 21 Javascript
利用vue写todolist单页应用
Dec 15 Javascript
Bootstrap Table使用整理(五)之分页组合查询
Jun 09 Javascript
MUI实现上拉加载和下拉刷新效果
Jun 30 Javascript
详解angular笔记路由之angular-router
Sep 12 Javascript
vue+Element实现搜索关键字高亮功能
May 28 Javascript
详解Jest结合Vue-test-utils使用的初步实践
Jun 27 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
如何删除多级目录
2006/10/09 PHP
php数组函数序列之in_array() - 查找数组中是否存在指定值
2011/11/07 PHP
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
PHP以指定字段为索引返回数据库所取的数据数组
2013/06/30 PHP
php对数组排序的简单实例
2013/12/25 PHP
PHP输出两个数字中间有多少个回文数的方法
2015/03/23 PHP
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
Package.js  现代化的JavaScript项目make工具
2012/05/23 Javascript
window.open打开页面居中显示的示例代码
2013/12/27 Javascript
关于Javascript加载执行优化的研究报告
2014/12/16 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
2017/02/27 Javascript
js使用generator函数同步执行ajax任务
2017/09/05 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
vue实现微信获取用户信息的方法
2019/03/21 Javascript
微信小程序搭建自己的Https服务器
2019/05/02 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
python二分法实现实例
2013/11/21 Python
在Python中使用__slots__方法的详细教程
2015/04/28 Python
Python中if __name__ == '__main__'作用解析
2015/06/29 Python
python django 访问静态文件出现404或500错误
2017/01/20 Python
利用python求解物理学中的双弹簧质能系统详解
2017/09/29 Python
python并发编程多进程之守护进程原理解析
2019/08/20 Python
python Dijkstra算法实现最短路径问题的方法
2019/09/19 Python
高三自我评价
2014/02/01 职场文书
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
3的组成教学反思
2014/04/30 职场文书
文明礼仪倡议书
2015/04/28 职场文书
2015年小学远程教育工作总结
2015/07/28 职场文书
生日宴会家属答谢词
2015/09/29 职场文书
redis数据结构之压缩列表
2022/03/21 Redis
微信小程序 WeUI扩展组件库的入门教程
2022/04/21 Javascript
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS