gojs实现流程图（含绑定某数据）
首先引用go-debug.js https://download.csdn.net/download/qq_37528703/12038175
html示例1：
Draggable Link
java部分
controller
@RequestMapping("/saveLct")
@ResponseBody
public Map saveLct(@RequestParam Map map){ return szyaService.saveLct(map); } service
//查询流程图
Map queryLct(Map map);
//保存流程图
Map saveLct(Map map); serviceimpl
@Override
public Map queryLct(Map map){
Map resMap = new HashMap();
Map posMap = new HashMap();
List> nodeList = szyaDao.queryNodeList(map);
List> linkList = szyaDao.queryLinkList(map);
if(nodeList.size()!=0) {
for (int i = 0; i < nodeList.size(); i++) {
if (nodeList.get(i).get("size") == null) {
nodeList.get(i).remove("size");
}
nodeList.get(i).put("key", nodeList.get(i).get("key1"));
}
posMap.put("position", nodeList.get(0).get("position"));
resMap.put("modelData",posMap);
}
if(linkList.size()!=0) {
for (int i = 0; i < linkList.size(); i++) {
String[] pointsArry = null;
String pointsString = (String) linkList.get(i).get("points");
pointsArry = pointsString.split(",");
Double[] pointsDArray = new Double[pointsArry.length];
for (int j = 0; j < pointsArry.length; j++) {
pointsDArray[j] = Double.parseDouble(pointsArry[j]);
}
linkList.get(i).put("points", pointsDArray);
linkList.get(i).put("from", linkList.get(i).get("from1"));
linkList.get(i).put("to", linkList.get(i).get("to1"));
if (linkList.get(i).get("text") == null) {
linkList.get(i).remove("text");
}
linkList.get(i).put("visible",linkList.get(i).get("visible").equals("true")?true:false);
}
}
resMap.put("class","GraphLinksModel");
resMap.put("linkFromPortIdProperty","fromPort");
resMap.put("linkToPortIdProperty","toPort");
resMap.put("nodeDataArray",nodeList);
resMap.put("linkDataArray",linkList);
return resMap;
}
@Override
public Map saveLct(Map map){
Map resMap = new HashMap();
resMap.put("msg","保存成功！");
JSONArray jsonArray = JSONArray.fromObject(map.get("linkString"));
List> linkList=(List>)JSONArray.toCollection(jsonArray, Map.class);
JSONArray jsonArray2 = JSONArray.fromObject(map.get("nodeString"));
List> nodeList=(List>)JSONArray.toCollection(jsonArray2, Map.class);
try {
szyaDao.removeNodeList(map);
for (Map m : nodeList) {
m.put("position",(String)map.get("position"));
m.put("yaid", map.get("yaid"));
szyaDao.saveNodeList(m);
}
szyaDao.removeLinkList(map);
for (Map m : linkList) {
m.put("yaid", map.get("yaid"));
String str="";
List dlist = (List)m.get("points");
for(int i=0;i dao
List> queryNodeList(Map map);
List> queryLinkList(Map map);
void saveLinkList(Map map);
void saveNodeList(Map map);
void removeLinkList(Map map);
void removeNodeList(Map map); daoimpl
@Override
public List> queryNodeList(Map map){
StringBuffer sql = new StringBuffer();
sql.append("select * from szya_lct_node where yaid = #{yaid}");
return this.queryForList(sql.toString(),map);
}
@Override
public List> queryLinkList(Map map){
StringBuffer sql = new StringBuffer();
sql.append("select * from szya_lct_link where yaid = #{yaid}");
return this.queryForList(sql.toString(),map);
}
@Override
public void saveNodeList(Map map){
StringBuffer sql = new StringBuffer();
map.put("id",Md5Util.UUID());
if (ObjectUtils.isEmpty(map.get("size"))) {
map.put("size1",null);
}
map.put("size1",map.get("size"));
sql.append("insert into szya_lct_node (id,text,figure,fill,key1,size,loc,position,yaid) ");
sql.append("values(#{id},#{text},#{figure},#{fill},#{key},#{size1},#{loc},#{position},#{yaid})");
this.update(sql.toString(),map);
}
@Override
public void saveLinkList(Map map){
StringBuffer sql = new StringBuffer();
map.put("id",Md5Util.UUID());
if (ObjectUtils.isEmpty(map.get("text"))) {
map.put("text",null);
}
if (ObjectUtils.isEmpty(map.get("fromPort"))) {
map.put("fromPort",null);
}
if (ObjectUtils.isEmpty(map.get("toPort"))) {
map.put("toPort",null);
}
if (ObjectUtils.isEmpty(map.get("visible"))) {
map.put("visible","false");
}else{
map.put("visible","true");
}
sql.append("insert into szya_lct_link (id,text,visible,points,from1,to1,fromPort,toPort,yaid) ");
sql.append("values(#{id},#{text},#{visible},#{points},#{from},#{to},#{fromPort},#{toPort},#{yaid})");
this.update(sql.toString(),map);
}
@Override
public void removeNodeList(Map map){
StringBuffer sql = new StringBuffer();
sql.append("delete from szya_lct_node where yaid=#{yaid}");
this.update(sql.toString(),map);
}
@Override
public void removeLinkList(Map map){
StringBuffer sql = new StringBuffer();
sql.append("delete from szya_lct_link where yaid=#{yaid}");
this.update(sql.toString(),map);
} 示例1效果图
html示例2
Flowchart
The FlowChart sample demonstrates several key features of GoJS,
namely Palettes,
Linkable nodes, Drag/Drop behavior,
Text Editing, and the use of
Node Template Maps in Diagrams.
Mouse-over a Node to view its ports.
Drag from these ports to create new Links.
Selecting Links allows you to re-shape and re-link them.
Selecting a Node and then clicking its TextBlock will allow
you to edit text (except on the Start and End Nodes).
Diagram Model saved in JSON format:
示例2代码根据1代码适当修改
示例2效果图
相关表设计
