浅析使用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 寻址,闭包,对象模型和相关问题
Apr 27 Javascript
jquery uaMatch源代码
Feb 14 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
Javascript数组循环遍历之forEach详解
Nov 07 Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
js实现本地图片文件拖拽效果
Jul 18 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
Sep 06 Javascript
把vue-router和express项目部署到服务器的方法
Feb 21 Javascript
Vue自定义指令实现checkbox全选功能的方法
Feb 28 Javascript
JavaScript继承定义与用法实践分析
May 28 Javascript
vue v-for 使用问题整理小结
Aug 04 Javascript
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
基于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中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
PHP新建类问题分析及解决思路
2015/11/19 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
PHP水印类,支持添加图片、文字、填充颜色区域的实现
2017/02/04 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
javascript基于DOM实现省市级联下拉框的方法
2015/05/14 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
JavaScript SHA1加密算法实现详细代码
2016/10/06 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
Nodejs中使用puppeteer控制浏览器中视频播放功能
2019/08/26 NodeJs
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
2020/10/27 Javascript
[50:04]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第二局
2016/02/28 DOTA
python多进程操作实例
2014/11/21 Python
python获取本机外网ip的方法
2015/04/15 Python
用Python实现web端用户登录和注册功能的教程
2015/04/30 Python
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
python爬虫使用正则爬取网站的实现
2020/08/03 Python
Python接口自动化测试的实现
2020/08/28 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
CSS3截取字符串实例代码【推荐】
2018/06/07 HTML / CSS
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
一名毕业生的自我鉴定
2013/12/04 职场文书
应聘文员自荐信范文
2014/03/11 职场文书
询价采购方案
2014/06/09 职场文书
庆七一活动总结
2014/08/27 职场文书
德能勤绩廉个人总结
2015/02/14 职场文书
社区公民道德宣传日活动总结
2015/03/23 职场文书
观看建国大业观后感
2015/06/01 职场文书
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS