发布了一个组织机构图展示插件,需要展示组织机构的兄弟信可以进来看看

分享 未结 7 1506
雨时节
雨时节 2018-9-17
悬赏:20飞吻
第三方插件传送门: https://fly.layui.com/extend/orgChart/
因为最近项目的需要,要做一个组织机构图展示,在网上找了很多的代码.发现都不太好,echarts是画布,很多东西不可控,而且这个部门间的连线是弯的,看着太丑,而且部门名字如果太长,基本上不会有好的展示,其它的一些jquery的插件也不太好,分的层级太多的时候,特别的丑,找了好久,终于有一个插件的效果图,让我眼前一亮:

对于组织机构来说,肯定是从上至下的关系,所以从左到右肯定不合适,而且这个插件很有意思,第二级部门为横向排列,二级后的部门为树形排列,而且左右的间距会在子节点打开的时候进行调整,我下下来看了下,发现这个部门结构图还可以进行拖动展示,所以这也比较好的避免了第二级部门太多超出页面大小的问题,毕竟能拖动的情况下,都能展示出来.
不过这个插件中有很多其它的东西,比如部门正面显示了一些其它的东西.我看了下源码,都是后来渲染的,不过总的架构,我还是觉得很不错的.所以还是拿来用了稍微的改了下bug就好了.
修改后的纯部门展示图片:

这里.其实也可以写成像上面的那个样子.每个节点的渲染都是自定义的,我这里只是展示部门名称.所以比较简单.大家想像上面那样展示更多的部门内容,自己修改一下渲染与结点宽度就可以了.
第三方插件传送门: https://fly.layui.com/extend/orgChart/
回帖
  • 可以的大兄弟
    0 回复
  • 这个不错阿
    0 回复
  • 雨时节
    2018-9-17
    @丶剑气近 @我是小俊俊 谢谢支持,我也是找了很久的.
    0 回复
  • 呃430
    2018-9-27
    这文件放在哪啊
    0 回复
  • 雨时节
    2018-9-28
    单页版,请直接在github下载https://github.com/xieyushi/layuiadmin-yushijie
    这里面的文件怎么放,你就怎么放.直接就能用.[微笑]
    0 回复
  • 蓬蒿er
    2018-10-29
    layui.link("../../css/orgChart/orgChart.css");
    这样引用有问题吗?控制台一直404[衰]
    0 回复
  • 雨时节
    2018-11-8
    兄弟.你这个路径.要看你自己到底是怎么弄的.你在console上看看到底是不是这个路径呀...404肯定就是不对.你得自己换呀. ..
    0 回复