web设计器--设计流程图（raphael）（二）

这里介绍一下如何新增删除按钮：

如上图：右侧属性表格中有个“”删除“”按钮，可以进行删除节点。

解决方法：

1.打开myflow.js文件，该文件被压缩了，你需要格式化一下js，可以通过网上“格式化js”进行格式一下，这样看着就明显多了。

2.找到如下图的位置，搜索生成“属性”表格代码：e.append("<tr><th>" + m[l].label + '</th><td><div id="p' + l + '" class="editor"></div></td></tr>');

在for循环外边增加一个tr标签里边新增删除按钮，代码如下：

e.append('<tr id="myflowDelTR"><th>删除</th><td><input type="button" value="删除" οnclick="if(confirm(\'确认删除？！\'))jQuery(document).trigger(\'keydown\',true);"/></td></tr>');

3.搜索“i.keyCode == 46”找到这个函数，这个是使用键盘删除节点的，我需要加一个点击按钮删除时间也调用这个方法即可，在后面加|byButton。

代码如下：

 b(document).keydown(function (i,byButton) {
            if (!a.config.editable) {
                return
            }
            if (i.keyCode == 46||byButton) {//
                var j = b(y).data("currNode");
                if (j) {
                    if (j.getId().substring(0, 4) == "rect") {
                        b(y).trigger("removerect", j)
                    } else {
                        if (j.getId().substring(0, 4) == "path") {
                            b(y).trigger("removepath", j)
                        }
                    }
                    b(y).removeData("currNode")
                }
            }
        });

这样就可以增加删除按钮功能了。

Demo下载地址：http://download.csdn.net/detail/lilinoscar/9604226