位置: 编程技术 - 正文

Bootstrap树形组件jqTree的简单封装(bootstrap 树)

编辑:rootadmin

推荐整理分享Bootstrap树形组件jqTree的简单封装(bootstrap 树),希望有所帮助,仅作参考,欢迎阅读内容。

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

一、组件效果预览其实效果和之前的那个差不多,博主只是在之前的基础上加了一个选中的背景色。

全部收起

展开

全部展开

二、代码示例其实效果很简单,重点来看看代码是如何实现封装的。还是老规矩,将已经实现的代码贴出来,然后再来一步一步讲解。

1、封装说明,来简单看看以上代码(1)使用 (function ($) {})(jQuery) 这种匿名函数声明并立刻执行的方式的作用是向jquery对象里面增加一个自定义的方法,如果对这种写法不懂的可以看看上篇说明JS组件系列——封装自己的JS组件,你也可以。这样封装以后,我们可以直接通过 $("#id").jqtree({}); 这种写法来初始化该树形组件。

(2)定义默认参数后,用户可以只传自己需要传递的参数,对于不需要的参数,直接使用默认值就好。这也就是为什么很多bootstrap组件都有一个默认参数列表这么一个东东的原因。

(3)封装后的组件同时支持两种传递数据的方式,如果用户直接传递了data参数,就直接使用data参数初始化,否则,就同url发送ajax请求去后台取数据。

Bootstrap树形组件jqTree的简单封装(bootstrap 树)

(4)如果是url方式取数据,用户可以在组件加载前和加载完成后自定义事件处理方法。对应的是上面的onBeforeLoad和onLoadSuccess。onLoadSuccess事件的参数对应着ajax请求的data数据。有时需要在组件加载完成之后做一些特殊处理,可以在这个方法里面写。

(5)可以自定义节点的click事件处理方法,对应的是上面的onClickNode。参数传递的是当前点击节点的jquery对象。

2、组件调用说了这么多,那么该如何使用呢?

首先我们html只需要一个空的ul标签

上面说了,组件可以同时支持两种调用方式:

1)直接传Json数组;

2)通过URL远程获取数据:后台C#请求方法,构造上面data格式的数据类型。

前端调用

onLoadSuccess事件调试看看

onClickNode事件调试看看,selector对应着当前的点击的节点的jquery对象。

三、小结

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

标签: bootstrap 树

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

上一篇:javascript实现2016新年版日历

下一篇:JS组件Form表单验证神器BootstrapValidator(js进行表单验证的目的是什么)

  • 税务硕士是什么学位类别
  • 租地建厂房房产税谁交
  • 现代服务包含哪些服务
  • 管家婆软件记账流程
  • 资产处置损益在借方表示赚还是赔?
  • .申报表税源编码怎么填
  • 自产自销农产品企业所得税
  • 季度所得税申报表怎么申报
  • 消费税的应纳税额的计算
  • 初期厂房监理费怎么做账?
  • 酒店租金计入什么会计科目
  • 银行本票通俗
  • 企业租车费用怎么处理方法
  • 微信红包税前扣除
  • 通用机打发票没写税额
  • 互联网税务行动计划五大板块
  • 基金会可以投资企业吗
  • mac电脑安装了windows
  • 运输发票备注规定
  • 小规模纳税人安装费税率
  • 电脑记事本在哪里打开
  • 编制竣工决算的主要依据
  • 向银行借入长期借款50万元
  • 被辞退有补助金吗
  • 收到的担保费如何记账
  • 融资租赁账务处理实例承租方
  • vite搭建项目
  • 实际缴纳消费税计算公式
  • 应付职工薪酬会产生暂时性差异吗
  • 企业所得税营业外收入
  • vue3.0用法
  • 微信支付开发者平台
  • php返回上一级
  • 发票 加工费
  • 应收代垫款
  • 私人打款到对公账户要交税吗
  • 税前扣除 发票
  • 新设立的企业如何办理开业税务登记
  • 企业研发支出的最佳占比
  • 法人章两个字的怎么印
  • 公司名下商品房过户给公司需要交过户费
  • 货物出库入库怎么记账
  • 公司股票买卖账务处理
  • 开票人是管理员可以报销吗
  • 固定资产清理账户借方
  • mysql监控sql性能
  • mysql命令行工具是什么
  • 网上商城功能
  • 每月随工资扣的房费缴纳个税吗怎么算
  • 小规模纳税人开专票需要交税吗
  • 缴纳房产税如何做账务处理
  • 付给外包公司的垃圾处理费会计分录
  • 企业给员工租的公寓
  • 母公司与子公司关系
  • 发票丢失记账联入账
  • vmware img镜像
  • 电脑安装了安卓系统没用
  • windowxp系统升级
  • 1sass.exe是什么程序
  • linux 桌面系统
  • 怎么取消桌面右下角图标隐藏
  • centos设置双网卡
  • win8的开始
  • 使用linux的电脑
  • linux查找文件语句
  • 前端 插件
  • 使用jquery实现的项目
  • perl语句
  • nodejs中的shell命令是什么意思
  • 基于python的游戏
  • vue实现标签页效果
  • python迭代算法举例
  • python连接Oracle数据库
  • jquery插件免费下载
  • 用js做表单验证
  • python utils模块
  • 湖南国家电子税务局企业所得税申报进不去
  • 国家税务总局公告2017年第21号
  • 监察室主任岗位职责
  • 新疆皮山县概况
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设