位置: 编程技术 - 正文

Bootstrap树形控件使用方法详解(bootstrap 树形菜单)

编辑:rootadmin

推荐整理分享Bootstrap树形控件使用方法详解(bootstrap 树形菜单),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:bootstrap树形下拉框,bootstrap树形下拉框,bootstrap 树形,bootstrap树状分级菜单,bootstrap tree,bootstrap 树,bootstrap tree,bootstrap 树,内容如对您有帮助,希望把文章链接给更多的朋友!

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

1、一睹初容

全部收起

展开一级

全部展开

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

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

二、文件树编辑插件Treed

这个组件是从网上找到的,最初演示,组内成员一致觉得效果很赞。因为它通过树形展示,方便的提供了节点的增删改。节点的伸缩效果也比较好。好了来看看。

1、初见Treed

默认展开一级

点击左边的“+”号和右边的节点都会去展开子节点

多级展开

在左边可以编辑节点名称

按Enter键换行新增兄弟节点,同样删除换行就可以删除节点。

按Enter键后再按下Tab键可以新增子节点

很强大有木有。审核元素可知它使用的是html5的svg标签来实现的,所以对浏览器有一定的要求。

Bootstrap树形控件使用方法详解(bootstrap 树形菜单)

三、通用树形控件——zTree

ztree是一个传统的树形组件,其强大的功能决定他在树形控件界的地位。不管是树形展示,还是编辑,又或者是节点单选和多选,它都提供了强大的功能API。但是,由于它界面效果不太好看,所以很多公司使用它的时候都会有一定的犹豫。所幸,至从出了扁平化风格后,ztree也做了一定的美化,比如它的Metro风格的组件和bootstrap风格就非常相像。今天就来结合Metro风格的ztree来介绍下这个组件的一些用法。

1、组件使用

此组件可直接通过Nuget去添加。

2、组件效果

节点全部收起

节点展开

节点选中,当然如果需要可以变成单选。

可以增删改节点

点击文本框出现树

3、代码示例3.1 直接在界面显示文本框

需要引用的js和css文件

页面html  

Js初始化

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

div默认是隐藏的。

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

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

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程 Bootstrap插件使用教程

以上三种树形组件,各有千秋,可以根据需求选用不同的组件,希望本文所述对大家学习树形控件有所帮助。

最近新补充的一系列bootstrap基础教程,欢迎大家学习。

js+css绘制颜色动态变化的圈中圈效果 本文实例讲述了js+css绘制颜色动态变化的圈中圈效果。分享给大家供大家参考,具体如下:运行效果截图如下:具体代码如下:htmlheadtitlecircle/titlestylety

封装属于自己的JS组件 一、扩展已经存在的组件1、需求背景很多时候,我们使用jquery.ajax的方式向后台发送请求,型如$.ajax({type:"post",url:"/User/Edit",data:{data:JSON.stringify(postdata)},

不用一句js代码初始化组件 最近使用bootstrap组件的时候发现一个易用性问题,很多简单的组件初始化都需要在JS里面写很多的初始化代码,比如一个简单的select标签,因为仅仅只是

标签: bootstrap 树形菜单

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

上一篇:window.onerror()的用法与实例分析

下一篇:js+css绘制颜色动态变化的圈中圈效果(用js设置颜色)

  • 计提的增值税
  • 筹建期间发生的开办费计入什么科目
  • 扣非净利润为什么比净利润低
  • 金税盘显示已到锁死期,未到汇总期是什么原因
  • 发票章盖金额上去了
  • 应收款项出售的分录怎么处理
  • 租赁负债的计量
  • 出口的商品交消费税吗
  • 小规模纳税人报销会计分录
  • 契税印花税的会计分录怎么写
  • 差旅费报销单属于什么凭证?
  • 不在境内劳务是否付企业所得税
  • 银行结汇汇兑损益的会计分录怎么写?
  • 不能抵扣的普通发票
  • 企业所得税扣除凭证
  • 银行利息回单怎么打印
  • 建筑工程项目的全生命周期包括
  • 基本生产车间领用周转材料会计分录
  • 给员工交的重大医疗保险怎么做分录?
  • 收回委托加工物资的实际成本
  • 奖励积分换取商品会计处理
  • 工厂采购原材料销售给外贸公司
  • 缴纳补充公积金的外企
  • 高速公路通行费专用发票可以抵扣吗
  • 餐饮业一般纳税人企业所得税税率
  • 年终一次性奖金个税计算
  • 如何确定旧机器的折旧年限?
  • 工会筹备金和工会经费金额一样吗
  • 工资年终奖金扣多少税
  • 建筑业简易征收进项税额转出
  • 利润的三个计算口径
  • 企业收到收入会计分录
  • 外国企业代表处企业所得税
  • 如何在Windows10中打开命令提示符?
  • 收到空头支票解释怎么写
  • 无票收入科目
  • 腾讯电脑管家浏览器保护在哪
  • 怎么安装win7系统后怎么安装驱动
  • win11wifi功能消失了
  • 企业所得税汇算清缴调增的项目有哪些
  • rk3328 sdk
  • 收回贷款本息是包含本金吗
  • 3d沙盒游戏推荐
  • phpcms生成html
  • SQLite数据库常用语句及MAC上的SQLite可视化工具MeasSQLlite使用方法
  • 11-ElementUI
  • 深入浅出embedding pdf
  • 普通发票的后续怎么开
  • 有形动产经营性租赁光租业务是什么意思
  • 印花税怎么用
  • 只要有销售收入就能赚钱
  • 残保金申报方式改变时间
  • 专用发票丢失怎么入账
  • 房地产企业进项税抵扣的时间
  • 企业注销时实收资本怎么处理
  • 未开票的收入如何确认分录
  • 公司法人往来款账务处理
  • 预支报销怎么做账
  • 按最低标准买社保30年退休后每个月领多少钱
  • 工商营业执照变更网上怎么操作
  • 房地产公司支付工程款账务处理
  • 计提坏账准备需要哪些资料
  • 建账及账务处理步骤
  • 应收账款的账户余额
  • 利用pt-heartbeat监控MySQL的复制延迟详解
  • win7系统如何打开
  • ubuntu20.04.2
  • 将哪一linux文件系统引入
  • ubuntu的sudo
  • win10预览版好吗
  • Windows tips小技巧
  • js提交表单,如果为空出现红色文字
  • javascript中
  • js中匿名函数的作用
  • python在设计领域的应用
  • 又一枚精彩的弹幕效果jQuery实现
  • 个体加油站税务怎么申报
  • 如何办理清税证书
  • 广东省国家税务总局稽查局局长
  • 长春税务局待遇如何
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设