(原创) 工作流程图的树形展示-使用qunee插件实现

阅读更多

        实际工作中遇到一个问题，在html页面以树形节点的方式展示工作流程图。
        echarts2的树形图可以实现，但是页面样式不够灵活。架构师从网上找来qunee插件，大致能满足客户要求。
        qunee是"一套基于HTML5的网络图组件"，详情可以去官网http://qunee.com查看。

        这里只介绍如何用qunee来实现树形图。

        在qunee的demo里找到
        Treelayouter Demo (http://demo.qunee.com/#TreeLayouter Demo)

        和Work Flow Demo中的

        development guide (http://demo.qunee.com/#Development Guide)
        本例需要将两者的效果结合。

        流程图结构如下(局部放大)：

        

        流程图结构如下(完整)：

       

 

        节点数据是json格式，举例如下：

var test = {
	"children": [{
		"children": [{
			"children": null,
			"codeDescription": "2级节点",
			"nodeLevel": 2,
			"nodeName": "test1_1",
			"nodeOrder": 0
		}],
		"codeDescription": "1级节点",
		"nodeLevel": 1,
		"nodeName": "test1",
		"nodeOrder": 0
	}],
	"codeDescription": "根节点",
	"nodeLevel": 0,
	"nodeName": "test0",
	"nodeOrder": 0
}

 

 

        完整的html代码，每一部分都有较详细的注释。

 

 附件有完整的代码和数据供测试用。

• qunee_demo_workflow_as_tree_0801.zip (126.4 KB)
• 下载次数: 40

• 
• 大小: 28 KB

• 
• 大小: 24 KB

• 查看图片附件