C# Gooflow+layer弹出层 全js代码

这里是将gooflow的代码简单的改造一下，点击线、点、图标、区域的时候弹出新窗口，在新窗口中可以添加设置更多的信息。总页面如下：

文件的目录，这里吧Gooflow的一套东西都放在GooFlow文件夹下面，文件夹是我自己分的，大家可以按照自己的习惯去调整，放到一起便于管理和修改。

code：放置的是弹出的属性页面，里面建了几个文件，预备和数据库操作相关联，不过例子中并没有写代码，这些代码可以根据你建的数据库和三层自己写添删改查。

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

demo.html:流程设计器的主页面，使用的时候直接调用。

javaScript/layer：存放的是弹出层的js和css，这是一个独立的控件，它有自己官网，有兴趣的可以自己研究。

主要修改的是GooFlow.js,你可以通过查找alert去看我写的一些备注，里面关于图标点击、移动等事件都标注出来了。

Demo.html代码

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