位置: 编程技术 - 正文

Bootstrap 树控件使用经验分享(图文解说)(bootstrap-treeview.js)

编辑:rootadmin

推荐整理分享Bootstrap 树控件使用经验分享(图文解说)(bootstrap-treeview.js),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:bootstrap treetable,bootstrap树形控件,bootstrap-treeview.js,bootstrap treetable,bootstrap树形控件,bootstrap tree,bootstrap tree,bootstrap tree,内容如对您有帮助,希望把文章链接给更多的朋友!

jquery 树形控件

jquery 树形控件是一款基于jquery+bootstrap、完全通过js和样式手写出来的非常轻量级的控件,它功能简单、用户体验不错。对于一些简单的层级关系展示比较实用。

前言:很多时候我们在项目中需要用到树,有些树仅仅是展示层级关系,有些树是为了展示和编辑层级关系,还有些树是为了选中项然后其他地方调用选中项。不管怎么样,树控件都是很多项目里面不可或缺的组件之一。今天,博主打算结合自己的使用经历和网上找到的一些不错的树控件在这里做一个分享,希望能帮大家找到最合适的控件。还是那句话:控件没有最好,只有最合适。

一、JQuery树形控件

Jquery树形控件是一款基于JQuery+bootstrap、完全通过js和样式手写出来的非常轻量级的控件,网上很多地方都能看到它的影子。它功能简单、用户体验不错。对于一些简单的层级关系展示比较实用,但对于节点的增删改实现起来就不容易了,如果非要做,可能需要自己去封装。

1、一睹初容

全部收起

展开一级

全部展开

2、代码示例

Bootstrap 树控件使用经验分享(图文解说)(bootstrap-treeview.js)

此控件实现起来也非常简单,只需要引用jQuery和bootstrap组件即可。

这些代码都是直接从网上down下来的,节点上面的图标可以通过样式修改,图标样式也是基于bootstrap的。如果需要动态添加节点,可以自己封装组件去拼html,实现起来应该也比较简单。由以上可知此组件的轻量级,如果你需要对节点作增删改或者选择等操作,不要急,下面的控件可能比较适用。

二、文件树编辑插件Treed

这个组件是从网上找到的,最初演示,组内成员一致觉得效果很赞。因为它通过树形展示,方便的提供了节点的增删改。节点的伸缩效果也比较好。好了来看看。Demo以及下载地址: 直接在界面显示文本框

需要引用的js和css文件

页面html 

Js初始化

3.2 默认隐藏,触发某个事件的时候出现树。这种场景在项目里面非常常见,一般用于选择树节点。所以博主把这个也单独拿出来说下吧。

div默认是隐藏的。

在js里面初始化树以及注册showMenu()方法

由于以上都是静态数据,如果需要从后台取数据动态加载树节点,可以去后台构造zNodes这种结构的数组即可。

四、总结

以上三种树形组件,各有千秋,可以根据需求选用不同的组件。

以上所述是小编给大家介绍的Bootstrap 树控件使用经验分享(图文解说),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对积木网网站的支持!

JS实现分页浏览横向图片(类轮播)实例代码 昨天朋友问我怎么用js实现分页浏览横向图片功能,其实实现代码很简单的,下面小编给大家带来了具体实现代码,代码如下所示:common.jsfunction$(id){retu

浅谈mint-ui 填坑之路 近期上手vue的移动端项目,舍弃了之前自己相对熟悉的mui框架,改为用饿了么团队为了vue量身定做的mint-ui框架。之前开发的时候觉得mui的文档就足够坑

React Native使用百度Echarts显示图表的示例代码 Echarts是百度推出的免费开源的图表组件,功能丰富,涵盖各行业图表。相信很多同学在网页端都使用过。今天我就来介绍下在ReactNative中如何使用Echarts

标签: bootstrap-treeview.js

本文链接地址:https://www.jiuchutong.com/biancheng/369739.html 转载请保留说明!

上一篇:解决option标签selected="selected"属性失效的问题(option标签的作用)

下一篇:JS实现分页浏览横向图片(类轮播)实例代码(js分页逻辑)

  • 小规模纳税人开专票税率是1%还是3%
  • 税务专业是什么学位
  • 其他债权投资的交易费用计入哪里
  • 食堂辅助帐怎么记帐
  • 季报利润表本月金额和本年累计金额
  • 文化创意服务的税率
  • 搭赠的商品怎么开票
  • 哪些类型的合同无效
  • 会计科目的设置
  • 预收款项增值税
  • 商业房产出租和租赁区别
  • 暂估入库产品行程影响所得税汇算清缴吗
  • 法律责任的具体内容
  • 普票6个点怎么算
  • 关于企业所得税若干优惠政策的通知
  • 冲减增值税销项税额
  • 原材料总分类账怎么写
  • 购入土地使用权增值税税率
  • 法定盈余公积是留存收益吗
  • 公司汽车保养费用怎么做账
  • 冲抵货款销售返利会计分录怎么写?
  • 应收账款贷方余额怎么调平
  • 公司注销清算企业所得税申报表怎么填
  • 计征所得税会计分录怎么做?
  • 如何解决蓝屏错误代码0x000007B问题
  • 电脑上不了网怎么安装网卡驱动
  • 资产负债比和资产负债率
  • 增值税红字发票开具
  • 软件开发公司账务怎么做
  • windows 7无线开关在哪里
  • windows缺失
  • ajax无刷新技术
  • 银行对公账户收款码手续费多少
  • 累计折旧额怎么计算公式
  • 电力行业增值税率
  • 税收变动作用
  • 爬虫基本原理有哪些
  • 短信php源码
  • 加工行业增值税负率一般控制在多少?
  • 托盘账务处理
  • 银行手续费发票未到怎样做账
  • 企业向合伙企业分红怎么交税
  • 企业发生的现金溢余如果无法查明原因
  • 企业所得税不能税前扣除项目
  • 修理费用的会计怎么做账
  • 去年多交所得税今年怎么处理
  • 上年度多提财务费用
  • 发票开错没有作废可以红字冲销吗?
  • 事业单位外出参观培训心得
  • 融资租赁取得的机器设备的账务处理
  • 收到股权认购款怎么做账
  • 公司报税金额和实际发的不一致可以去告吗?
  • 长期借款的利息费用计入什么科目
  • 现代服务业包括哪些项目
  • 进项跟销项金额一样是否可行
  • 复利终值与现值的关系
  • explain分析sql效率的方法
  • win8系统如何关机
  • debian8安装
  • WZCSLDR.exe - WZCSLDR是什么进程
  • wordpress怎么安装插件
  • 如何给windowsXP磁盘加密码
  • win10安装office2016无法注册字体可以忽略吗?
  • bootstrap媒体查询写法
  • ExtJS 2.0实用简明教程之应用ExtJS
  • jquery简单例子
  • apk防止反编译
  • 解读css发展历史简述
  • perl常用函数
  • js调用方法什么时候要加括号
  • 网页制作css怎么用
  • python常用的安装扩展
  • 在js里写html
  • 深入php面向对象、模式与实践第5版 电子书
  • Struts2+jquery.form.js实现图片与文件上传的方法
  • 电子税务局辽宁省
  • 东莞办理房产证在哪里预约
  • 水资源税征收标准2023
  • 广西残疾人保障金比例
  • 农业企业制造费用包括哪些
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设