生活随笔
收集整理的這篇文章主要介紹了
gooflow学习笔记
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
前端jqury腳本實(shí)現(xiàn)流程設(shè)計(jì)，兼容目前主流瀏覽器?
gooflow 默認(rèn)屬性節(jié)點(diǎn)只有：id,name,top,left,width,height,type （各個(gè)版本不同，屬性節(jié)點(diǎn)有所增加），但是這些都是和流程設(shè)計(jì)器本身有關(guān)的?
實(shí)現(xiàn)自定義屬性字段：
1、在節(jié)點(diǎn)數(shù)據(jù)對(duì)象上加上自己的定義屬性字段（我自定義了一個(gè)data 屬性字段）
2、修改的時(shí)候把屬性字段填充到對(duì)應(yīng)的對(duì)象屬性字段中
var focusLine = demo.getItemInfo(focusId, "node");
focusLine.data = $("#ele_data").val();
<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>流程圖DEMO</title>
<!--[if lt IE 9]>
<?import namespace="v" implementation="#default#VML" ?>
<![endif]-->
<link rel="stylesheet" type="text/css" href="../codebase/GooFlow.css"/>
<style>
.myForm{display:block;margin:0px;padding:0px;line-height:1.5;border:#ccc 1px solid;font: 12px Arial, Helvetica, sans-serif;margin:5px 5px 0px 0px;border-radius:4px;}
.myForm .form_title{background:#428bca;padding:4px;color:#fff;border-radius:3px 3px 0px 0px;}
.myForm .form_content{padding:4px;background:#fff;}
.myForm .form_content table{border:0px}
.myForm .form_content table td{border:0px}
.myForm .form_content table .th{text-align:right;font-weight:bold}
.myForm .form_btn_div{text-align:center;border-top:#ccc 1px solid;background:#f5f5f5;padding:4px;border-radius:0px 0px 3px 3px;}
#propertyForm{float:right;width:260px}
</style>
<script type="text/javascript" src="child.js"></script>
<script type="text/javascript" src="../plugin/jquery.min.js"></script>
<script type="text/javascript" src="../codebase/GooFunc.js"></script>
<script type="text/javascript" src="../plugin/json2.js"></script>
<link rel="stylesheet" type="text/css" href="default.css"/>
<script type="text/javascript" src="../codebase/GooFlow.js"></script>
<script type="text/javascript" src="../codebase/GooFlow.color.js"></script>
<script type="text/javascript">
var property={width:1072,height:600,toolBtns:["start round","end round","task round","node","chat","state","plug","join","fork","complex mix"],haveHead:true,headBtns:["new","open","save","undo","redo","reload"],//如果haveHead=true，則定義HEAD區(qū)的按鈕haveTool:true,haveGroup:true,useOperStack:true
};
var remark={cursor:"選擇指針",direct:"結(jié)點(diǎn)連線",start:"入口結(jié)點(diǎn)","end":"結(jié)束結(jié)點(diǎn)","task":"任務(wù)結(jié)點(diǎn)",node:"自動(dòng)結(jié)點(diǎn)",chat:"決策結(jié)點(diǎn)",state:"狀態(tài)結(jié)點(diǎn)",plug:"附加插件",fork:"分支結(jié)點(diǎn)","join":"聯(lián)合結(jié)點(diǎn)","complex mix":"復(fù)合結(jié)點(diǎn)",group:"組織劃分框編輯開(kāi)關(guān)"
};
var demo;
$(document).ready(function(){demo=$.createGooFlow($("#demo"),property);demo.setNodeRemarks(remark);demo.onItemDel=function(id,type){if(confirm("確定要?jiǎng)h除該單元嗎?")){this.blurItem();return true;}else{return false;}}demo.loadData(jsondata);demo.onItemFocus=function(id,model){console.info(this.$nodeData);$("#ele_model").val(model);$("#ele_id").val(id);if(model=="line"){obj=this.$lineData[id];$("#ele_type").val(obj.M);$("#ele_left").val("");$("#ele_top").val("");$("#ele_width").val("");$("#ele_height").val("");$("#ele_from").val(obj.from);$("#ele_to").val(obj.to);$("#ele_data").val(obj.data);}else if(model=="node"){obj=this.$nodeData[id];$("#ele_type").val(obj.type);$("#ele_left").val(obj.left);$("#ele_top").val(obj.top);$("#ele_width").val(obj.width);$("#ele_height").val(obj.height);$("#ele_from").val("");$("#ele_to").val("");$("#ele_data").val(obj.data);}$("#ele_name").val(obj.name);return true;};demo.onItemBlur=function(id,model){document.getElementById("propertyForm").reset();return true;};
});
var out;
function Export(){document.getElementById("result").value=JSON.stringify(demo.exportData());
}function backConChoose(focusId) {var focusNode = demo.getItemInfo(focusId, "node");focusNode.data = $("#ele_data").val();document.getElementById("result").value=JSON.stringify(demo.exportData());}</script>
</head>
<body style="background:#EEEEEE">
<div id="demo" style="margin:5px;float:left"></div>
<form class="myForm" id="propertyForm">
<div class="form_title">屬性設(shè)置</div>
<div class="form_content"><table><tr><td class="th">Id：</td><td><input type="text" style="width:120px" id="ele_id"/></td></tr><tr><td class="th">Name：</td><td><input type="text" style="width:120px" id="ele_name"/></td></tr><tr><td class="th">Type：</td><td><input type="text" style="width:120px" id="ele_type"/></td></tr><tr><td class="th">Model：</td><td><input type="text" style="width:120px" id="ele_model"/></td></tr><tr><td class="th">Left-r：</td><td><input type="text" style="width:120px" id="ele_left"/></td></tr><tr><td class="th">Top-r：</td><td><input type="text" style="width:120px" id="ele_top"/></td></tr><tr><td class="th">Width：</td><td><input type="text" style="width:120px" id="ele_width"/></td></tr><tr><td class="th">Height：</td><td><input type="text" style="width:120px" id="ele_height"/></td></tr><tr><td class="th">From：</td><td><input type="text" style="width:120px" id="ele_from"/></td></tr><tr><td class="th">To：</td><td><input type="text" style="width:120px" id="ele_to"/></td></tr><tr><td class="th">Data：</td><td><input type="text" style="width:120px" id="ele_data"/></td></tr></table>
</div>
<div class="form_btn_div"><input type="reset" value="重置"/><input type="button" value="確定" οnclick="backConChoose(demo.$focus)"/>
</div>
</form>
<div style="clear:both">
<input id="submit" type="button" value='導(dǎo)出結(jié)果' οnclick="Export()"/>
<textarea id="result" row="6"></textarea>
</div>
</body>
</html>
?
? ?其特點(diǎn)：
1、跨瀏覽器，可兼容IE7--IE11， FireFox， Chrome， Opera等幾大內(nèi)核的瀏覽器，且不需要瀏覽器再加裝任何控件。 （IE7-IE8時(shí)，使用VML；IE9以上，FF，OPERA，CHROME，SAFARI上使用SVG）?
2、 多系統(tǒng)兼容性、可移植性:由于只包括前臺(tái)UI,因此二次開(kāi)發(fā)者可很方便將本插件用在任何一種需要流程圖的B/S系統(tǒng)應(yīng)用上，流程圖的詳細(xì)實(shí)現(xiàn)邏輯完全交于后臺(tái)程序開(kāi)發(fā)者自己實(shí)現(xiàn);對(duì)于后臺(tái),只要能返回/接收能被本插件解析的JSON格式數(shù)據(jù)即可.所以本插件可用于不同的服務(wù)器語(yǔ)言建立的后臺(tái)上.?
3、跨領(lǐng)域:流程圖設(shè)計(jì)器不止用在電信領(lǐng)域,在其它需要IT進(jìn)行技術(shù)支持的領(lǐng)域中都有重大作用.?
以下從純技術(shù)實(shí)現(xiàn)層面具體描述:?
1、 頁(yè)面頂部欄、左邊側(cè)邊欄均可自定義；?
2、當(dāng)左邊的側(cè)邊欄設(shè)為不顯示時(shí)，為只讀狀態(tài)，此時(shí)的視圖區(qū)可當(dāng)作是一個(gè)查看器而非編輯器。?
3、側(cè)邊工具欄除了基本和一些流程節(jié)點(diǎn)按鈕外，還自定義新的節(jié)點(diǎn)按鈕，自定義節(jié)點(diǎn)都可以有自有的圖標(biāo)、類(lèi)型名稱(chēng)，定義后在使用可可在工作區(qū)內(nèi)增加這些自定義節(jié)點(diǎn)。?
4、頂部欄可顯示流程圖數(shù)據(jù)組的標(biāo)題，也可提供一些常用操作按鈕。?
5、 頂部欄的按鈕，除了撤銷(xiāo)、重做按鈕外，其余按鈕均可自定義點(diǎn)擊事件。?
6、 可畫(huà)直線、折線；折線還可以左右/上下移動(dòng)其中段。?
7、 具有區(qū)域劃分功能，能讓用戶更直觀地了解哪些節(jié)點(diǎn)及其相互間的轉(zhuǎn)換，是屬于何種自定義區(qū)域內(nèi)的。?
8、 具有標(biāo)注功能，用橙紅色標(biāo)注某個(gè)結(jié)點(diǎn)或者轉(zhuǎn)換線，一般用在展示流程進(jìn)度時(shí)。?
9、 能直接雙擊結(jié)點(diǎn)、連線、分組區(qū)域中的文字進(jìn)行編輯?
10、 在對(duì)結(jié)點(diǎn)、連線、分組區(qū)域的各種編輯操作，如新增/刪除/修改名稱(chēng)/重設(shè)樣式或大小/移動(dòng)/標(biāo)注時(shí)，均可捕捉到事件，并觸發(fā)自定義事件，如果自定義事件執(zhí)行的方法返回FALSE，則會(huì)阻止操作。?
11、 具有操作事務(wù)序列控制功能，在工作區(qū)內(nèi)的各種有效操作都能記錄到一個(gè)棧中，然后可以進(jìn)行撤銷(xiāo)（undo()）或重做（redo()），像典型的C/S軟件一樣。?
gooflow 官網(wǎng)：https://gooflow.xyz/docs/index.html#methods
? ? ?感謝博主：https://www.cnblogs.com/tangxf/p/4227639.html
https://files.cnblogs.com/files/itclw/GooFlow1.1.zip
轉(zhuǎn)載于:https://www.cnblogs.com/itclw/p/9951728.html
總結(jié)
以上是生活随笔為你收集整理的gooflow学习笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
