jquery.orgchart.js 简单demo,自定义内容，自定义事件

orgchart简单demo

GIT地址： https://github.com/Vlovely/orgchartDemo.git

预览图

代码示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>Organization Chart Plugin</title><link rel="icon" href="img/logo.png"><link rel="stylesheet" href="css/jquery.orgchart.css"><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" href="font/iconfont.css"><style>/* 取消默认箭头 不标准。官网给出的用js修改class类名方法*/.edge{display: none;}</style>
</head>
<body><div id="chart-container"></div><script type="text/javascript" src="font/iconfont.js"></script><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/jquery.orgchart.js"></script><script type="text/javascript" src="js/jquery.mockjax.min.js"></script><script type="text/javascript">$(function() {// 模拟请求数据$.mockjax({url: '/orgchart/children',contentType: 'application/json',responseTime: 1000,responseText: { 'children': [{ 'id': 'id6', 'title': '二2-三1', 'type': '2' },{ 'id': 'id7', 'title': '二2-三2', 'type': '2' }]}});// 默认数据var datascource = {'id': 'id1','title': '一','type': '1','relationship': '001', //第一个字符代表当前节点是否具有父节点；//第二个字符代表当前节点有同级节点；//第三个字符代表当前节点是否有子节点。'children': [{'id': 'id2', 'title': '二1', 'type': '2' , 'children': [{'id': 'id3','title': '二1-三1','type': '3'}]},{'id': 'id4', 'title': '二2', 'type': '2' },{'id': 'id5', 'title': '二3', 'type': '2' },]};// HTML模板var nodeTemplate = function(data) {let iconNameif (data.children && data.children.length > 0) {iconName = 'icon-suoxiao'} else {iconName = 'icon-fangda'}return `<img src="./img/avatar/${data.type}.jpg" style="width:100%" title="${data.title}"/><span>${data.title}</span><i class="iconfont ${iconName}" style="width:14px;height:14px;top:-4px;left:-4px;position:absolute;"></i>`;};// 初始化const oc = $('#chart-container').orgchart({'data' : datascource,'visibleLevel': '3', // 它表示在最开始的orgchart扩展到的级别。'nodeTemplate': nodeTemplate,'nodeId': 'id'});// 绑定点击事件$('#chart-container').delegate('.icon-suoxiao', 'click', function() {$(this).removeClass('icon-suoxiao').addClass('icon-fangda');$(this).parent().parent().parent().siblings().hide()})$('#chart-container').delegate('.icon-fangda', 'click', function() {if ($(this).parent().parent().parent().siblings().length > 0) {$(this).parent().parent().parent().siblings().show()$(this).removeClass('icon-fangda').addClass('icon-suoxiao');} else if ($(this).parent().attr('id') === 'id4') {let that = this$.post("/orgchart/children", function(res) {oc.addChildren($(that).parent(), res.children)$(that).removeClass('icon-fangda').addClass('icon-suoxiao');});}})});</script></body>
</html>

jquery.orgchart.js 简单demo,自定义内容，自定义事件相关推荐

jquery.orgchart.js
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
flot.js ajax,jquery.flot.js简单绘制折线图用法示例
本文实例讲述了jquery.flot.js简单绘制折线图用法.分享给大家供大家参考,具体如下: 1.完整实例代码: 折线图 $(function() { AlPriceQuery(); }); fun ...
jquery.inputmask.js 输入框input输入内容格式限制插件
今天使用的就是这几行代码. 利用 jquery.inputmask.js 下载地址(如果打不开的话请FQ http://plugins.jquery.com/jquery.inputmask/) ...
组织结构图OrgChart.js的简单使用,实现树状图结构
OrgChart.js是什么? 基于ES6的组织结构图插件. 特征支持本地数据和远程数据(JSON). 基于CSS3过渡的平滑扩展/折叠效果. 将图表对齐为4个方向. 允许用户通过拖放节点更改组织结 ...
jQuery表单校验jquery.validate.js的使用
jQuery是一个快速.简洁的js库,为网站的快速开发简化了HTML文档遍历,事件处理,动画,以及Ajax交互.使用jQuery将极大的提高编写javascript代码的效率, 让写出来的代码更加优雅 ...
JavaScript-Tool：jquery.qrcode.js
ylbtech-JavaScript-Tool:jquery.qrcode.js 1.返回顶部 1. 插件描述:jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jqu ...
orgChart的简单使用,实现树状图结构
还不知道这个插件的小伙伴可以先去官网下载,orgchart官网链接呐,下载下来就是这样的: 我们把他解压出来: 点进去以后,直接找到index.html文件用浏览器打开,就是这样的啦: 这1--24 ...
orgChart的简单使用,实现树状图、组织结构图结构
还不知道这个插件的小伙伴可以先去官网下载,orgchart官网链接呐,下载下来就是这样的: 我们把他解压出来: 点进去以后,直接找到index.html文件用浏览器打开,就是这样的啦: 这1--24 ...
jquery.cycle.js
jquery.cycle.js简单用法实例样式: a{text-decoration: none;} *{margin:0; padding:0;} /*容器设置*/ .player { width ...

jquery.orgchart.js 简单demo,自定义内容，自定义事件

orgchart简单demo

GIT地址： https://github.com/Vlovely/orgchartDemo.git

预览图

代码示例

jquery.orgchart.js 简单demo,自定义内容，自定义事件相关推荐

最新文章

热门文章