浅析使用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插件实现灵活配置快递模板，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • BootStrap TreeView使用实例详解

    本文实例为大家分享了BootStrap TreeView使用代码,供大家参考,具体内容如下 <html> <head> <title></title> <link href="/Scripts/bootstrap/css/bootstrap.css" rel="stylesheet"> <link href="/Scripts/bootstrap/css/bootstrap-treeview

  • 基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合

    在上篇给大家介绍了基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串.list集合. 这种方式其实还是利用list集合的方式传给前台,只不过在前台做了一些小小的变化,而控制器代码也进行了部分的优化,值的一提的是:没用的ajax前后台交互舍弃掉了. 控制器代码如下: //实例化公共静态字典表集合 public static List<TC_DictionaryInfo> DInfo = new List<TC_DictionaryInfo

  • bootstrap插件treeview实现全选父节点下所有子节点和反选功能

    bootstrap插件treeview实现全选父节点下所有子节点和反选功能

    项目需要实现权限管理,使用前端框架bootstrap,所以就直接选用了bootstrap的treeview扩展插件.先上图: 选中父节点时,父节点下所有子节点也都全部选中,看代码 1.HTML代码 <h2>TreeView Checkable</h2> <div id="treeview-checkable"></div> 2.Json数据 function getTvStateData() { var defaultData = [ {

  • 基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合

    本文支持两种方式的数据,一种为List集合,一种为json字符串. 先来介绍一下后台返回list集合(推荐使用此方法): 控制器代码如下: public static List<TC_DictionaryInfo> DInfo = new List<TC_DictionaryInfo>(); /// <summary> /// TreeView视图 /// </summary> /// <returns></returns> publ

  • JS树形菜单组件Bootstrap TreeView使用方法详解

    JS树形菜单组件Bootstrap TreeView使用方法详解

    简要介绍: 之前手头的一个项目需要去做一个左侧的树形菜单,右侧则是一个整体的iframe,从而构成一个整体的网站.一开始是打算用bootstrap的tree-view插件,直接把菜单的数据传过去就好了,结果后来项目又改了需求,菜单的内容和图表都是后台动态生成的,所以只能放弃使用bootstrap插件,自己着手写了一个树形菜单.本文主要分两部分讲,一个是对于bootstrap的treeview的实践,另一部分是介绍自己写的树形菜单. bootstrap-treeview: 组件介绍:http://

  • Bootstrap树形菜单插件TreeView.js使用方法详解

    Bootstrap树形菜单插件TreeView.js使用方法详解

    jQuery多级列表树插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树.列表树等等. 实用Bootstrap树形菜单特效插件Bootstrap Tree View,非常不错的Bootstrap插件,现在很多Bootstrap制作的页面都需要此功能,此插件需要Bootstrap3版本以及jQuery 2.0极以上版本支持,支持众多参数自定义功能,颜色.背景色.图标.链接等,还是很不错的. 效果图: 具体使用方法: 插件依赖 Bootstrap v3.0.

  • bootstrap-treeview自定义双击事件实现方法

    bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树.列表树等等.但是不知为什么这个插件没有自带双击事件. 经过多次测试,使用方法$('#tree').dblclick( function () {})和方法$('#tree').on('dblclick',function(){})都不起作用!百思不得其解.最后救助大神,问题解决了,但是

  • 浅析BootStrap Treeview的简单使用

    浅析BootStrap Treeview的简单使用

    bootstrap-treeview.js1是一款强大的树菜单插件,本文给大家介绍bootstrap treeview的简单使用. 废话不多说,直接上干干货. 1.bootstrap-treeview Github网址: https://github.com/jonmiles/bootstrap-treeview 2.使用要求: <!-- 样式表 --> <link href="~/Content/bootstrap.css" rel="stylesheet

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

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

    bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树.列表树等等. 开发条件: 安装bootstrap-treeview插件,具体操作见: bootstrap-treeview 实现功能: 1.一个模板可指定子模板(包含多个地区.价格等) 2.编辑子模板地区时,动态改变tree的地区(其他子模板选中的地区disabled,此模板之前选中的

  • bootstrap时间插件daterangepicker使用详解

    本文实例为大家分享了bootstrap时间插件daterangepicker的具体代码,供大家参考,具体内容如下 插件下载地址:https://github.com/dangrossman/bootstrap-daterangepicker 头部引入文件: <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <link

  • bootstrap fileinput 插件使用项目总结(经验)

    bootstrap fileinput 插件使用项目总结(经验)

    基础的定义及使用方法网上有很多不再概述,这儿主要写本人所使用项目时碰到的一些问题及解决方案 注:本人使用此插件主要用来上传图片之用,插件其他上传文件没有涉及 一.上传最小数量问题  通过查阅其他资料可知配置中有两个方法 minFileCount:4,//表示允许同时上传的最小文件个数  maxFileCount: 10, //表示允许同时上传的最大文件个数 这两个方法都可在插件官网的api里查到,不过有个问题 minFileCount在使用其自带上传方法时才会出现提示 maxFileCount在

  • BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤

    BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤

    bootstrap-fileinput源码:https://github.com/kartik-v/bootstrap-fileinput bootstrap-fileinput在线API:http://plugins.krajee.com/file-input bootstrap-fileinput Demo展示:http://plugins.krajee.com/file-basic-usage-demo 这个插件主要是介绍如何处理图片上传的处理操作,原先我的Excel导入操作使用的是Upl

  • 扩展Bootstrap Tooltip插件使其可交互的方法

    扩展Bootstrap Tooltip插件使其可交互的方法

    本文实例讲述了扩展Bootstrap Tooltip插件使其可交互的方法.分享给大家供大家参考,具体如下: 最近在公司某项目开发中遇见一特殊需求,请笔者帮助,因此有了本文的插件.在前端开发中tooltip是一个极其常用的插件,它能更好向使用者展示更多的文档等帮助信息.它们通常都是一些静态文本信息.但同事他们的需求是需要动态交互,在文本信息中存在帮助网页的链接.如果使用常规tooltip,则在用户移出tooltip依赖DOM节点后,tooltip panel则将被隐藏.所以用户没有办法点击到这些交

  • bootstrap treeview 扩展addNode方法动态添加子节点的方法

    bootstrap treeview 扩展addNode方法动态添加子节点的方法

    bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树.列表树等等. 本文只是详细说明对bootstrap-treeview添加子节点的扩展方法(addNode),如了解bootstrap-treeview所有用法请看官方API 官方api  https://www.npmjs.com/package/bootstrap-treeview 

  • Bootstrap treeview实现动态加载数据并添加快捷搜索功能

    写在前面: jQuery多级列表树插件基于Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树.列表树等. 实用Bootstrap树形菜单特效插件Bootstrap Tree View,非常不错的Bootstrap插件,现在很多Bootstrap制作的页面都需要此功能,此插件需要Bootstrap3版本以及jQuery 2.0极以上版本支持,支持众多参数自定义功能,颜色.背景色.图标.链接等,还是很不错的. 具体效果请暂时移步: http://jonmiles.github.io

  • bootstrap日期插件daterangepicker使用详解

    bootstrap日期插件daterangepicker使用详解

    今天用的了bootstrap日期插件感觉搜索的资料不是很多在此写下一些使用的心得: 插件开源地址:daterangepicker日期控件, 插件使用只要按照开源中的文档信息来就好先包括以下引用: <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="moment.js"

随机推荐