layui 第三方组件平台

返回首页 发布组件

有关流程类的自由拼装

更新:2019-3-25 创建:2019-4-2

文档

Layui-FlowChart
预览地址 https://corgitea.github.io/Layui-FlowChart/index.html

基于Layui开发,公司之前用到这个功能,自己用的散装代码...
这次重新梳理了一下。
emm...慢慢修复优化。[钟]
:)

> 版本 V1.0
第一个版本 :) 图标用的是图片

> 注意[囧]
图标用的是图片,需要指定图片,格式:
menu_1.png
menu_h1.png

功能描述
+ 右键点击选择编辑
+ 选择下方按钮填写(快捷键:跳转到的URL)后确定
+ 在虚线操作区域拖拽移动位置
+ 双击某图标开启滚轮旋转
+ 右键保存

> 调用

layui.config({
base: 'layui_exts/'
}).extend({
FlowChart: 'FlowChart/FlowChart'
}).use(['element','FlowChart'], function () {

var FlowChart = layui.FlowChart;
var arr = [
{
"left": "596px",
"top": "58px",
"url": "so",
"indexno": "",
"text": "销售单",
"img": "layui_exts/FlowChart/image/nav_icon_1.png",
"sta": "new"
},
{
"left": "777px",
"top": "57px",
"url": "OD",
"indexno": "",
"text": "送货",
"img": "layui_exts/FlowChart/image/nav_icon_2.png",
"sta": "new"
},
{
"left": "686px",
"top": "83px",
"url": "",
"indexno": "",
"text": "自定义",
"img": "layui_exts/FlowChart/image/line_1.png",
"sta": "new"
}
];
var urlstr = "layui_exts/FlowChart/image/";
FlowChart.render({
elem:'#box'
/*AJAX请求地址*/
,url :'/main/getajax'
,ImageURL:[
urlstr + "nav_icon_1.png",
urlstr + "nav_icon_2.png",
urlstr + "nav_icon_3.png",
urlstr + "nav_icon_4.png",
urlstr + "nav_icon_5.png",
urlstr + "nav_icon_6.png",
urlstr + "nav_icon_7.png",
urlstr + "nav_icon_8.png",
urlstr + "line_1.png",
urlstr + "line_6.png",
urlstr + "line_12.png",
urlstr + "line_13.png",
]
// 赋值渲染
,data:arr
// 保存到缓存测试
,chartTest:false
// 保存提示信息
,saveMsg:"保存中.."
// 保存后回调
,callBack:function (data) {
console.log(data)
}
// 点击当前图标的回调 ,编辑状态下无法跳转
,link:function (elem) {
console.log(elem)
}
// 页面唯一识别 默认数据中的,我原来的业务使用到,可以删除,并Savedata自定义
,PageIndex:"so"
/*
*自定义提交数据结构 已有data,尽量使用其他
* 默认数据
* obj.action = MOD_NAME;
* obj.menucode = _config.PageIndex;
* obj.data = [];
*/
,Savedata:{
"a":123,
"b":456,
}
});
})

下载

去 GitHub 下载
该扩展组件由第三方用户主动投递,并由其自身进行维护,本站仅做收集。