這里是將gooflow的代碼簡單的改造一下，點擊線、點、圖標、區域的時候彈出新窗口，在新窗口中可以添加設置更多的信息。總頁面如下：

文件的目錄，這里吧Gooflow的一套東西都放在GooFlow文件夾下面，文件夾是我自己分的，大家可以按照自己的習慣去調整，放到一起便于管理和修改。

code：放置的是彈出的屬性頁面，里面建了幾個文件，預備和數據庫操作相關聯，不過例子中并沒有寫代碼，這些代碼可以根據你建的數據庫和三層自己寫添刪改查。

codebase和js：放置的gooflow用的js和css。

demo.html:流程設計器的主頁面，使用的時候直接調用。

javaScript/layer：存放的是彈出層的js和css，這是一個獨立的控件，它有自己官網，有興趣的可以自己研究。

主要修改的是GooFlow.js,你可以通過查找alert去看我寫的一些備注，里面關于圖標點擊、移動等事件都標注出來了。

Demo.html代碼

流程圖DEMOrel="stylesheet" type="text/css" href="js/default.css" />rel="stylesheet" type="text/css" href="codebase/GooFlow2.css" /><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/GooFunc.js"></script><script type="text/javascript" src="js/son2.js"></script><script type="text/javascript" src="codebase/GooFlow.js"></script><script src="../../JavaScript/layer/layer.js"></script><script type="text/javascript">var hight = $(window).height() - 20;var width = $(window).width() - 40;var demo;$(document).ready(function () {var haveEdit = true;var Title = "Title";var property = {width: width,height: hight,toolBtns: ["start round", "end", "task", "node", "chat", "state", "plug", "join", "fork", "complex mix"],haveHead: haveEdit,headBtns: ["new", "save", "undo", "redo", "reload"],//如果haveHead=true，則定義HEAD區的按鈕 headBtns: ["new", "open", "save", "undo", "redo", "reload"]haveTool: haveEdit,haveGroup: true,useOperStack: true,initLabelText: Title};var remark = {cursor: "選擇指針",direct: "轉換連線",start: "開始結點",end: "結束結點",task: "任務結點",node: "自動結點",chat: "決策結點",state: "狀態結點",plug: "附加插件",fork: "分支結點","join": "聯合結點",complex: "復合結點",group: "組織劃分框編輯開"}demo = $.createGooFlow($("#demo"), property);demo.setNodeRemarks(remark);demo.onItemDel = function (id, type) {layer.closeAll();return true;// return confirm("確定要刪除該單元嗎?");}var jsondata = { "title": Title, "nodes": { "demo_node_1": { "name": "node_1", "left": 90, "top": 59, "type": "start round", "width": 24, "height": 24, "alt": true }, "demo_node_2": { "name": "node_2", "left": 115, "top": 284, "type": "end", "width": 86, "height": 24, "alt": true }, "demo_node_3": { "name": "node_3", "left": 412, "top": 46, "type": "task", "width": 86, "height": 24, "alt": true }, "demo_node_7": { "name": "node_7", "left": 640, "top": 56, "type": "task", "width": 86, "height": 24, "alt": true } }, "lines": { "demo_line_4": { "type": "sl", "from": "demo_node_1", "to": "demo_node_3", "name": "line_4", "alt": true }, "demo_line_5": { "type": "tb", "from": "demo_node_3", "to": "demo_node_2", "name": "line_5", "alt": true, "M": 295 }, "demo_line_8": { "type": "sl", "from": "demo_node_3", "to": "demo_node_7", "name": "line_8", "alt": true }, "demo_line_9": { "type": "tb", "from": "demo_node_7", "to": "demo_node_2", "name": "line_9", "alt": true, "M": 305 } }, "areas": {}, "initNum": 10 };demo.loadData(jsondata);demo.onBtnNewClick = function () { alert("新建"); demo.clearData(); };demo.onBtnOpenClick = function () { alert("打開"); };demo.onBtnSaveClick = function () { alert("保存"); alert(JSON.stringify(demo.exportData())); };demo.onFreshClick = function () {alert("重載"); demo.clearData(); demo.loadData(jsondata);};});var out;function Export() {document.getElementById("result").value = JSON.stringify(demo.exportData());}//this.$workArea.delegate(".ico + td" 文字雙擊var Editid = "0"; var Editindex = "-1"; var Editnode = "";function ShowEdit(id, Type) {if (Editid != id) {Editid = id;layer.closeAll();//alert(Type + "ShowEdit" + id);var nodeTitle = "";var nodeUrl = "";Editnode = demo.getItemInfo(id, Type);if (Editnode.name != null) {if (Type == "line") {var nodeStr = "";nodeTitle = Editnode.name + "線編輯";nodeUrl = 'code/UpdateLine.aspx?node=' + nodeStr + "&_" + Math.random();}else if (Type == "node") {//name: 節點的顯示名稱//left: 節點相對于工作區的左邊距//top: 節點相對于工作區的頂距//width: 節點寬度//height: 節點高度//type: 節點類型//marked: 布爾值, 表示是否已被用橙色標注//alt: 布爾值, 表示在編輯模式下是否被用戶變更過, 默認都是undefined未變更var nodeStr = Editid + "," + Editnode.name + "," + Editnode.left + "," + Editnode.top + "," + Editnode.width + "," + Editnode.height + "," + Editnode.type + "," + Editnode.marked + "," + Editnode.alt;nodeTitle = Editnode.name + "節點編輯";nodeUrl = 'code/UpdateNode.aspx?node=' + encodeURI(nodeStr) + "&_" + Math.random();}else if (Type == "area") {nodeTitle = Editnode.name + "區域編輯";nodeUrl = 'code/UpdateArea.aspx?node=' + nodeStr + "&_" + Math.random();}layer.open({title: nodeTitle,type: 2,area: ['400px', (hight - 20) + 'px'],fixed: true, //不固定closeBtn: 0,maxmin: true,offset: 'rt', //右下角彈出shade: 0,content: nodeUrl,//btn: ['確定保存'],//yes: function (index, layero) {// var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe頁的窗口對象，執行iframe頁的方法：// iframeWin.Save();//},success: function (layero, index) {Editindex = index;}, cancel: function (index, layero) {layer.close(index);return false;}});}}}function SaveNode(Flag, Value, Type) {if (Type == "line") {demo.setName(Editid, Value, "line");}else if (Type == "node") {if (Flag == 1)//name{demo.setName(Editid, Value, "node");}else if (Flag == 2)//Top{demo.moveNode(Editid, Editnode.left, Value);}else if (Flag == 3)//left{demo.moveNode(Editid, Value, Editnode.top);}else if (Flag ==4)//width{demo.resizeNode(Editid, Value, Editnode.height);}else if (Flag == 5)//height{demo.resizeNode(Editid, Editnode.width, Value);}var node = demo.getItemInfo(Editid, Type);var Savenode = node.name + "," + node.left + "," + node.top + "," + node.width + "," + node.height + "," + node.type + "," + node.marked + "," + node.alt;// alert(Savenode);//ajax保存數據}else if (Type == "area") {demo.setName(Editid, name, "area");}}</script>
demo代碼講解： 根據屏幕顯示編輯區域的大小 var hight = $(window).height() - 20;
?var width = $(window).width() - 40;
初始化編輯器 $(document).ready(function ()
初始化數據json：jsondata，?demo.loadData(jsondata);這個通過ajax從數據庫獲得。
左上角的操作按鈕事件接口： demo.onBtnNewClick = function () { alert("新建"); demo.clearData(); };
? ? ? ? ? ? demo.onBtnOpenClick = function () { alert("打開"); };
? ? ? ? ? ? demo.onBtnSaveClick = function () { alert("保存"); alert(JSON.stringify(demo.exportData())); };
? ? ? ? ? ? demo.onFreshClick = function () {
? ? ? ? ? ? ? ? alert("重載"); demo.clearData(); demo.loadData(jsondata);
? ? ? ? ? ? };

顯示編輯窗口js方法： function ShowEdit(id, Type)

layer.open彈出窗口

實現保存： SaveNode(Flag, Value, Type)，只提供簡單的接口代碼。

例如，在在UpdateNode.aspx頁面，也是使用js，先根據傳遞的節點信息賦值，然后save是保存，調用父頁面的方法SaveNode： <script type="text/javascript">
? ? ? ? var node = '<%=Request["node"]%>';
? ? ? ? $(function () {
? ? ? ? ? ? $("input[id$='txtName']").val(node.split(',')[1]);
? ? ? ? ? ? $("input[id$='txtLeft']").val(node.split(',')[2]);
? ? ? ? ? ? $("input[id$='txtTop']").val(node.split(',')[3]);
? ? ? ? ? ? $("input[id$='txtWidth']").val(node.split(',')[4]);
? ? ? ? ? ? $("input[id$='txtHeight']").val(node.split(',')[5]);
? ? ? ? })
? ? ? ? function Save(Type, This) {
? ? ? ? ? ? var Value = $(This).val();
? ? ? ? ? ? parent.SaveNode(Type, Value, "node");
? ? ? ? }
? ? </script>

遺留問題 demo.moveNode(Editid, Editnode.left, Value);
使用此方法后連線會變亂,點一下節點的突變就會正常，不知道什么原因，個人覺得大小和寬高在設計器中設置方便，此方法可以不用。如果有哪位伙伴知道原因，也可以留言告知，謝謝.
在例子中也提供有設計器的API文檔： http://download.csdn.net/detail/xumengmeng_xu/9809276

總結

以上是生活随笔為你收集整理的C# Gooflow+layer弹出层 全js代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。