怎么利用js加html结构图,利用js实现组织架构流程图插件myflow.

怼烎@ 2022-10-06 11:51 256阅读 0赞

特效描述：利用js实现 组织架构 流程图 插件myflow.。利用js实现组织架构流程图插件myflow.

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

# 日程事件导出 #

事件ID员工ID标题URL开始时间

$(document).ready(function()\{

var xx=\[

id: 1,

emptyid:"1",

title: '早班',

start: '2018-03-01'

\},

id: 2,

emptyid:"2",

title: '中班',

start: '2018-03-07'

\},

id: 3,

emptyid:"3",

title: '晚班',

start: '2018-03-09'

\},

id: 4,

emptyid:"4",

title: '其他',

start: '2018-03-16'

\},

id: 5,

emptyid:"5",

title: '早班',

start: '2018-03-11',

\},

id: 6,

emptyid:"6",

title: '晚班',

start: '2018-03-12'

\},

id: 7,

emptyid:"7",

title: '中班',

start: '2018-03-12'

\},

id: 8,

emptyid:"8",

title: '其他',

start: '2018-03-12'

\},

id: 9,

emptyid:"9",

title: '早班',

start: '2018-03-12'

\},

id: 11,

emptyid:"10",

title: '其他',

start: '2018-03-13'

\},

id: 12,

emptyid:"11",

title: '晚班',

url: 'http://www.baidu.com/',

start: '2018-03-28'

\},

id: 13,

emptyid:"1",

title: '晚班',

// url: 'http://baidu.com/',

start: '2018-02-28'

\},

id: 14,

emptyid:"1",

title: '早班',

start: '2018-04-01'

\},

id: 15,

emptyid:"2",

title: '中班',

start: '2018-04-07'

\},

id: 16,

emptyid:"3",

title: '晚班',

start: '2018-04-09'

\},

id: 17,

emptyid:"4",

title: '其他',

start: '2018-04-16'

\},

id: 18,

emptyid:"5",

title: '早班',

start: '2018-04-11',

\},

id: 19,

emptyid:"6",

title: '晚班',

start: '2018-04-12'

\},

id: 20,

emptyid:"7",

title: '中班',

start: '2018-04-12'

\},

id: 21,

emptyid:"8",

title: '其他',

start: '2018-04-12'

\},

id: 22,

emptyid:"9",

title: '早班',

start: '2018-04-12'

\},

id: 23,

emptyid:"10",

title: '其他',

start: '2018-04-13'

\},

id: 24,

emptyid:"11",

title: '晚班',

url: 'http://www.baidu.com/',

start: '2018-04-28'

\},

id: 25,

emptyid:"1",

title: '晚班',

// url: 'http://baidu.com/',

start: '2018-04-28'

\];

for(i=0;i

var html="

"+xx\[i\].id+""+xx\[i\].emptyid+""+xx\[i\].title+""+xx\[i\].url+""+xx\[i\].start+"";

$("\#example tbody").append(html);

$('\#example').DataTable( \{

dom: 'Bfrtip',

language: \{

emptyTable: '没有数据',

loadingRecords: '加载中...',

processing: '查询中...',

search: '检索:',

lengthMenu: '每页 \_MENU\_ 件',

zeroRecords: '没有数据',

paginate: \{

'first': '第一页',

'last': '最后一页',

'next': '下一页',

'previous': '上一页'

\},

info: '第 \_PAGE\_ 页 / 总 \_PAGES\_ 页',

infoEmpty: '没有数据',

infoFiltered: '(过滤总件数 \_MAX\_ 条)',

\},

buttons: \[

extend: 'copyHtml5',

\},

extend: 'excelHtml5',

title: 'Data export'

\},

extend: 'pdfHtml5',

title: 'Data export'

\},

extend: 'csvHtml5',

title: 'Data export'

\},

extend:'print',

\} );

$(".buttons-copy").text('复制');

$(".buttons-excel").text('导出到excel');

$(".buttons-pdf").text('导出到pdf');

$(".buttons-csv").text('导出到csv');

$(".buttons-print").text('打印');

\});

怎么利用js加html结构图,利用js实现组织架构流程图插件myflow.

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关利用html-js实现简单的轮播图

相关利用chrome浏览器reses插件拦截指定js并替换为本地js

相关 js组织架构

相关 html4音频插件,js音频插件audio.js

相关怎么利用js加html结构图,利用js实现组织架构流程图插件myflow.

相关 html中利用js实现简单图片轮换效果

相关利用JS实现图片切换

相关 vue拓扑图、组织结构图插件使用(orgChart.js)

相关 js利用HTML5的拖拽API做流程图

相关利用js实现自定义右键菜单插件