聊聊OrgChart 使用,优雅的方式为你展现舒服的组织架构图,

前言

闲来无事写一个多级用户关系层,于是就存在展示的问题。这时OrgChart就派上了用场。

在用的过程中,有一耐耐的小问题,咔咔就借着问题点,给大家介绍这款插件的使用。

最终效果如下


当然咔咔最终需要实现的效果肯定不是这个样子了,这个只是这个插件可以实现出来的效果。看了这个图你就知道适不适合自己的项目了。

一、接入OrgChart

下载地址咔咔提供不了,会提示广告的,如果找不到评论区见。

这是下载后的文件,文件夹中除了css、js、font其它的文件夹都是不同类型的组织架构图。


这里咔咔使用的是第一种ajax-datasource

将需需要的文件放到资源目录下即可


在ajax-datasource文件夹下有个index.html,里边附带的有案例

这个时候我们就需要将这份代码复制到项目中需要展示的页面中,也就是简单的配置css、js的加载路径而已。

嗯呐!就这样,很是简单吧!着实很简单。

来看看效果呗!

这时有没有疑问,这些数据是哪里来的,那就一起找找呗!

数据原来在这里,那咱们就需要把这段js代码复制到自己需要展示的地方了。但是数据肯定不是固定的,是后台传过来的。嗯,对,没错


这个时候先别着急,下看看它的数据结构,里边有name、title。

那么试想一下, 我们把这几个值修改一下,还会正常显示吗?



果不其然,凉透透了,为什么要修改这个键值呢!因为你的数据库字段不可能跟这个是完全符合的啊!

这个时候就需要看文档了,咔咔这里直接给出解决方法。

只需要在加一行代码即可,其余的参数还是需要大家去查看文档解决哈!


好了,这个时候一切工作准备就绪,只需要从后台传入数据就ok了,终于就剩最后一步了。

咔咔把数据保存到了input中,然后获取出来,终于完成了。


来吧!展示!纳尼!怎么是这个样子,有一个值怎么是空的。


这个时候二话没说,打开后台打印一下数据看看什么情况。数据一切安好。

二、分析问题

针对上面出现的问题,不得不在回到演示案例中。

其实在这个数据结构中,可以清楚的看明白,那就是键值都是带引号的。


不信的话来测试一下,自定义一份数据,然后检测一下。



经过验证这样的数据是可以的,那么在来试一下业务中的真实数据。

经过一番验证,相信伙伴们都已经了解这个问题了

三、解决问题

先看一下数据库给的数据类型为int,这里为什么使用int就不提了哈!项目需要,嗯呐!不多做解释了

此时就需要进行类型的转换了,打开TP框架的文档,瞅一眼

经过查询,目前TP框架只支持这几种类型的转换。


既然这条路通不了,那么就寻找其它的路,条条大路通Bug对吧!

在MySQL中有俩个函数可以处理类型转换, CAST、 CONVERT这俩个函数都可以。

但咔咔今天给大家说一种新的方式,这种方式大家都见过,那就是PHP中函数rtrim。

你是不是会说,不是吧!这都可以,rtirm都知道是处理右侧空白字符串或者预定义字符的

但是来看一下技术细节,返回的是修改的字符串,真好!


整起,修改查询方式。


来吧!看一下效果,这就很是nice

四、总结

  • 学习并使用OrgChart
  • 了解TP框架的类型转换
  • 学习并使用MySQL的类型转换
  • 对rtirm函数学习

坚持学习、坚持写博、坚持分享是咔咔从业以来一直所秉持的信念。希望在偌大互联网中咔咔的文章能带给你一丝丝帮助。我是咔咔,下期见。

最需要的时候遇见你OrgChart相关推荐

  1. orgchart php,最需要的时候遇见你OrgChart

    聊聊OrgChart 使用,优雅的方式为你展现舒服的组织架构图, 前言 闲来无事写一个多级用户关系层,于是就存在展示的问题.这时OrgChart就派上了用场. 在用的过程中,有一耐耐的小问题,咔咔就借 ...

  2. 当莎士比亚遇见Google Flax:教你用​字符级语言模型和归递神经网络写“莎士比亚”式句子...

    作者 | Fabian Deuser 译者 | 天道酬勤 责编 | Carol 出品 | AI科技大本营(ID:rgznai100) 有些人生来伟大,有些人成就伟大,而另一些人则拥有伟大. -- 威廉 ...

  3. Nibiru Open Day,OZO 遇见 DigiArtist 国际数字艺术展

    ChinaJoy 首日,Nibiru 带着 OZO 在上海记录了一场有气质.有内涵的艺术展. 中国国际数码互动娱乐展览会(简称:ChinaJoy)于 27 日在上海隆重举办.NibiruOpen Da ...

  4. [转]ghost手动备份及遇见的问题

    昨天才发现在网上广为流传的ghost居然是赛门铁克开发的,百度百科资料介绍硬盘分区魔法大师也是出自之手,这家公司真是了得啊! ghost自动备份那个比较简单,手动备份的教程请参考:手动备份 GHOST ...

  5. OrgChart 组织架构与PHP结合使用

    一.OrgChart下载地址: https://github.com/dabeng/OrgChart 二.组织架构的表设计 CREATE TABLE `org_info` ( `id` int(11) ...

  6. 遇见你们,真好 ---致我的舍友

    浮生一梦,落地尘埃.遇见你们,是我最美丽的意外. 一年前,因命运的机缘巧合,我们组建了这个新的宿舍.一年间,和着四季的旋律,我们嬉闹着相伴走过.一年后,伴着毕业的节奏,我们也许四散天涯.今夜无眠,写下 ...

  7. 当Elasticsearch遇见Kafka

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由michelmu发表于云+社区专栏 Elasticsearch作为当前主流的全文检索引擎,除了强大的全文检索能力和高扩展性之外,对多种 ...

  8. 计算机音乐刚好遇见你乐谱,《刚好遇见你》曲谱_刚好遇见你乐谱

    求刚好遇见你 李玉刚简谱 <刚好遇见你>简谱如下: <刚好遇见你>是由高进作词.作曲,李玉刚演唱的歌曲,收录于李玉刚2017年4月6日发行的专辑<刚好遇见你>中.2 ...

  9. Angular学习个人遇见的问题分享

    个人遇见的一些问题 写完app-heros遇见的报错 Failed to compile.src/app/app.component.html:2:1 - error NG8001: 'heroes' ...

最新文章

  1. 功能测试常用6种方法_建筑管道常用的8种连接方法
  2. 浅析网站流量出现异常情况应怎样解决?
  3. PyTorch官方权威教程书来了,LeCun力荐!意外的通俗易懂
  4. android system_server中的dump_SystemServer进程
  5. MySQL版本升级到5.7.21
  6. 怎样学好c语言程序设计这门,初学C语言程序设计的基本方法和技巧
  7. 【UVA514】+【HDOJ1022]:出栈序列的可能性问题
  8. GPU — NVIDIA GPU 架构发展史
  9. 渲染用计算机功耗,【IT之家评测室】满功耗 RTX 3060 笔记本 GPU 表现如何?拯救者 R9000P 实测...
  10. DAY15:尚学堂高琪JAVA(129~131)队列,Enumeration和Hashtable
  11. linux系统缺少perl组建中的Data::Dumper模块
  12. 肺疫面前,段子手出动,但是玩笑也要分场合
  13. 快速图像视频标注软件:SuperAnnotate Desktop
  14. CRC-16 CCITT
  15. js判断手机,邮箱格式是否正确
  16. 改变 ListBox Item 被点击后的蓝色背景
  17. 信息收集之基础端口扫描《诸神之眼——Nmap网络安全审计技术揭秘》总结一
  18. 深入剖析Android中最简单的数据存储方式:SharedPreferences
  19. 【Java】将数字金额转换为大写中文金额
  20. geokit无法适用计算机怎么弄,使用Rails 3和Geokit-rails3位置gem(Using Rails 3 with Geokit-rails3 location gem)...

热门文章

  1. 值得收藏,PADS转Allegro详解
  2. 电商-----测试用例
  3. Wincc RT Professional第三讲-两台电脑通信
  4. Arm cortex 性能天梯图
  5. 【Python零基础入门篇 · 24】:面向对象的多态、静态方法和类方法
  6. Windows系统:驱动器发现错误的解决方法
  7. 鸿蒙应用开发-可穿戴设备
  8. 地理信息科学家——David M. Mark
  9. kaldi基于GMM的单音素模型 训练部分
  10. win7系统怎么分区【系统天地】