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标签里边新增删除按钮，代码如下：

[javascript]  view plain  copy

1. 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。

代码如下：

[javascript]  view plain  copy

1. b(document).keydown(function (i,byButton) {  
2.            if (!a.config.editable) {  
3.                return  
4.            }  
5.            if (i.keyCode == 46||byButton) {//  
6.                var j = b(y).data("currNode");  
7.                if (j) {  
8.                    if (j.getId().substring(0, 4) == "rect") {  
9.                        b(y).trigger("removerect", j)  
10.                    } else {  
11.                        if (j.getId().substring(0, 4) == "path") {  
12.                            b(y).trigger("removepath", j)  
13.                        }  
14.                    }  
15.                    b(y).removeData("currNode")  
16.                }  
17.            }  
18.        });  

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

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