From 4646d43e3b8cb6c6202f2b8213c7d0838939e924 Mon Sep 17 00:00:00 2001 From: zhengyingying Date: Tue, 18 Mar 2014 18:32:45 +0800 Subject: [PATCH] modify plugin-new.js plugin.css plugin.jsp,add pluginModel.js --- .../web/model/PluginMethodListModel.java | 27 ++ src/main/webapp/bench4q-css/plugin.css | 9 +- src/main/webapp/plugin.jsp | 61 +--- src/main/webapp/script/plugin-new.js | 345 +++++++++--------- src/main/webapp/script/pluginModel.js | 45 +++ 5 files changed, 260 insertions(+), 227 deletions(-) create mode 100644 src/main/java/org/bench4q/web/model/PluginMethodListModel.java create mode 100644 src/main/webapp/script/pluginModel.js diff --git a/src/main/java/org/bench4q/web/model/PluginMethodListModel.java b/src/main/java/org/bench4q/web/model/PluginMethodListModel.java new file mode 100644 index 00000000..ab4283a9 --- /dev/null +++ b/src/main/java/org/bench4q/web/model/PluginMethodListModel.java @@ -0,0 +1,27 @@ +package org.bench4q.web.model; + +import java.util.List; + +public class PluginMethodListModel { + + private String pluginName; + private List methodList; + + public PluginMethodListModel(String pluginName,List methodList){ + this.pluginName=pluginName; + this.methodList=methodList; + } + + public String getPluginName() { + return pluginName; + } + public void setPluginName(String pluginName) { + this.pluginName = pluginName; + } + public List getMethodList() { + return methodList; + } + public void setMethodList(List methodList) { + this.methodList = methodList; + } +} diff --git a/src/main/webapp/bench4q-css/plugin.css b/src/main/webapp/bench4q-css/plugin.css index f9052fab..bd7f695d 100644 --- a/src/main/webapp/bench4q-css/plugin.css +++ b/src/main/webapp/bench4q-css/plugin.css @@ -8,7 +8,7 @@ .scroll{ overflow-x: hidden; - overflow-y: scroll; + overflow-y: auto; } a:hover { @@ -68,4 +68,11 @@ table, th, td,thead,tbody border:solid thin #F0ECE0; margin-left:5px; outline-style:inset; +} + +.pluginChoosedList{ + border-bottom:1px solid #F0ECE0 ; + color: #4E9BCB ; + width:220px; + height:32px; } \ No newline at end of file diff --git a/src/main/webapp/plugin.jsp b/src/main/webapp/plugin.jsp index f8d19032..b614b75c 100644 --- a/src/main/webapp/plugin.jsp +++ b/src/main/webapp/plugin.jsp @@ -103,10 +103,7 @@ body {
- - - -
+
@@ -117,7 +114,7 @@ body {

+ id="removePlugin" onClick="removePlugin();">Remove

@@ -301,6 +257,7 @@ body { + diff --git a/src/main/webapp/script/plugin-new.js b/src/main/webapp/script/plugin-new.js index b5b05942..29f8b841 100644 --- a/src/main/webapp/script/plugin-new.js +++ b/src/main/webapp/script/plugin-new.js @@ -1,7 +1,12 @@ -var html = ""; -$(document).ready(function() { - var pluginList = new Array(); +$(document).ready(function() { + loadPluginList(); +}); +// plug-in-list（全部数组） +var pluginList = new Array(); +var pluginMethodList=new Array(); + +function loadPluginList() { $.post("loadPlugin", {}, function(data) { if (!data.success) { alert(data.failedMessage); @@ -11,166 +16,158 @@ $(document).ready(function() { for (var i = 0; i < data.length; i++) { pluginList.push(data[i]); } - - for (var j = 0; j < pluginList.length; j++) { - var textNode = document.createTextNode(pluginList[j]); - var divNode = document.createElement("div"); - var inputNode = document.createElement("input"); - var brNode = document.createElement("br"); - inputNode.setAttribute("type", "radio"); - inputNode.setAttribute("name", "radio"); - inputNode.setAttribute("class", "chooseOnePlugin"); - inputNode.setAttribute("value", pluginList[j]); - divNode.appendChild(inputNode); - divNode.appendChild(textNode); - divNode.appendChild(brNode); - html += $(divNode).html() + "
"; - } }); -}); +} function addPlugin() { loadPluginList(); + var html = ""; + for (var j = 0; j < pluginList.length; j++) { + var textNode = document.createTextNode(pluginList[j]); + var divNode = document.createElement("div"); + var inputNode = document.createElement("input"); + var brNode = document.createElement("br"); + inputNode.setAttribute("type", "radio"); + inputNode.setAttribute("name", "radio"); + inputNode.setAttribute("class", "chooseOnePlugin"); + inputNode.setAttribute("value", pluginList[j]); + divNode.appendChild(inputNode); + divNode.appendChild(textNode); + divNode.appendChild(brNode); + html += $(divNode).html() + "
"; + } + document.getElementById("choosePlugin").innerHTML = html; $('#myModal_Plugin').modal('show'); $("input:radio").click(function() { $(this).attr("checked", "checked"); }); } - -function loadPluginList() { - document.getElementById("choosePlugin").innerHTML = html; -} - +// 选中的plug-in list +var pluginChoosedList = new Array(); var num = 0; -var data; function pluginFinish() { $('#myModal_Plugin').modal('hide'); + var data; var item = $("input[name='radio']:checked").val(); data = item + "_" + num; + pluginChoosedList.push(data); num++; - // 显示到pluginAreaTable中 - var newTrNode = document.createElement("tr"); - var newTdNode1 = document.createElement("td"); - var newTdNode2 = document.createElement("td"); - var i = document.createElement("i"); - i.setAttribute("class", "icon-ok-sign"); - i.setAttribute("style", "cursor:pointer"); - i.setAttribute("onClick", "showInsertPlugin(this)"); + var div = document.createElement("div"); + var p = document.createElement("p"); var textNode = document.createTextNode(data); + p.setAttribute("class", "pluginChoosedList");// 样式设计 + p.setAttribute("onClick", "showInsertPlugin(this)");// 引入的plugin + p.setAttribute("style", "cursor:pointer;float:left;"); + p.appendChild(textNode); + div.appendChild(p); - newTrNode.setAttribute("id", data); - newTdNode1.setAttribute("style", "width:40px;"); - newTdNode1.appendChild(textNode); - newTdNode2.appendChild(i); - newTrNode.appendChild(newTdNode1); - newTrNode.appendChild(newTdNode2); - document.getElementById("pluginAreaTable").appendChild(newTrNode); - + document.getElementById("pluginArea").innerHTML += $(div).html(); +} + +function removePlugin() { + pluginChoosedList.pop(); + var last = document.getElementById("pluginArea").lastChild; + document.getElementById("pluginArea").removeChild(last); } function insertPlugin() { + document.getElementById("pluginMethod").innerHTML = ""; $('#myModal_Behavior').modal('show'); - var table = $('#pluginAreaTable').html(); + var table = $('#pluginArea').html(); document.getElementById("insertPluginAreaPlugins").innerHTML = table; } function showInsertPlugin(selectNode) { $('#behaviorFinish').attr('disabled', true); - var textNode = selectNode.parentNode.previousSibling.firstChild; + var textNode = selectNode.firstChild; var methodData = textNode.nodeValue; // 请求master获取其method方法 getMethodList(methodData); } - - +// plug-in.method列表 function getMethodList(methodData) { - - var methodList = new Array(); var methodHtml = ""; - + var methodList = new Array(); + var plugin_method_List = new Array(); + var plugin_method_List_count = 0; // 得到_前的内容 var type = methodData.split("_"); var plugin = type[0]; - $ - .post( - "loadMethod", - { - pluginName : plugin - }, - function(data) { - if (!data.success) { - alert(data.failedMessage); - return; - } - data = data.data;// List methodList - for (var i = 0; i < data.length; i++) - methodList.push(data[i]); - for (var j = 0; j < methodList.length; j++) { - /* - methodHtml += "" - + methodList[j] - + "";*/ - - methodHtml += "" - + methodList[j] - + ""; - } - document.getElementById("pluginMethod").innerHTML = methodHtml; - var behaviorData = methodData + "." + method; - loadMethodParams(behaviorData, plugin, method); - }); -} -function show(){ - $('#myModal_Behavior').modal('hide'); - $("#httpPlugin_post").attr("class",""); -} + $.post("loadMethod", { + pluginName : plugin + }, function(data) { + if (!data.success) { + alert(data.failedMessage); + return; + } + data = data.data;// List methodList + for (var i = 0; i < data.length; i++) { + plugin_method_List.push(methodData + "." + data[i]);// httpPlugin_0.post + plugin_method_List_count++; + methodList.push(data[i]); + } + for (var j = 0; j < methodList.length; j++) { + var hideTextNode = document.createTextNode(plugin_method_List + .valueOf(j)); + var hideNode = document.createElement("p"); + hideNode.setAttribute("class", "hide"); + hideNode.appendChild(hideTextNode); + + methodHtml += "
" + + methodList[j] + "

" + + plugin_method_List.valueOf(j) + "

"; + } + document.getElementById("pluginMethod").innerHTML = methodHtml; + }); +} +function show(selectedNode) { + var node = selectedNode.nextSibling.firstChild; + var behaviorData = node.nodeValue; -function showMethod(methodData, plugin, method){ $('#myModal_Behavior').modal('hide'); - var behaviorData = methodData + "." + method; // 显示到showBehaviorsTable中 - var newTrNode = document.createElement("tr"); - var newTdNode1 = document.createElement("td"); - var p=document.createElement("p"); - var textNode=document.createTextNode(behaviorData); + var div = document.createElement("div"); + var a = document.createElement("a"); + var textNode = document.createTextNode(behaviorData); + a.setAttribute("class", "pluginChoosedList");// 样式设计 + a.setAttribute("onClick", "showMethodDocument(this)");// loadMethodParams + a.setAttribute("style", "cursor:pointer;float:left;"); + a.appendChild(textNode); + div.appendChild(a); - p.setAttribute("onClick", "showMethodDocument("+behaviorData+","+plugin+","+mehtod+");"); - newTrNode.setAttribute("id", data); - newTdNode1.setAttribute("style", "width:40px;"); - newTdNode1.appendChild(p); - p.appendChild(textNode); - newTrNode.appendChild(newTdNode1); - document.getElementById("showBehaviorsTable").appendChild(newTrNode); + document.getElementById('behaviorArea').innerHTML += $(div).html(); } -function showMethodDocument(behaviorData, plugin, method) { - +function showMethodDocument(selectedNode) { + var behaviorData = selectedNode.firstChild.nodeValue; + var flag = false; - var length=document.getElementById("showPluginMethod").childNodes.length; - for (var j = 0; j < length; j++) { - if ($($('#showPluginMethod').children()[j]).attr("id") == behaviorData) { - // 该文档已经生成 - //document.getElementById("showPluginMethod").childNodes[j].getAttributeNode("id").nodeValue==behaviorData; - flag = true; - break; + var length = document.getElementById("showPluginMethod").childNodes.length; + + if (length == 0) { + flag = false; + } else { + for (var j = 0; j < length; j++) { + if ($($('#showPluginMethod').children()[j]).attr("id") == behaviorData) { + // 该文档已经生成 + // document.getElementById("showPluginMethod").childNodes[j].getAttributeNode("id").nodeValue==behaviorData; + flag = true; + break; + } } } + if (flag == false) { // 文档没有生成过，需要调用函数生成该文档 - loadMethodParams(behaviorData, plugin, method); + loadMethodParams(behaviorData); document.getElementById("showPluginMethod") .appendChild($(behaviorData)); } @@ -185,51 +182,15 @@ function showMethodDocument(behaviorData, plugin, method) { } } -// 创建一个MethodParamModel对象 -function MethodParamModel(name, label, paramTypeModel) { - this.name = name; - this.label = label; - this.paramTypeModel = paramTypeModel; -} -// 创建一个ParamTypeModel对象 -function ParamTypeModel(type, valueSeperator, fieldSeperator) { - this.type = type; - this.valueSeperator = valueSeperator; - this.fieldSeparator = fieldSeperator; -} -// 创建一个Field对象 -function Field(size, type, valueSeperator, fieldSeperator) { - this.size = size; - this.type = type; - this.valueSeperator = valueSeperator; - this.fieldSeparator = fieldSeperator; -} -// 创建一个MultiField对象 -function MultiField(size, type, valueSeperator, fieldSeperator) { - this.size = size; - this.type = type; - this.valueSeperator = valueSeperator; - this.fieldSeparator = fieldSeperator; -} -// 创建一个Table对象 -function Table(cols, type, valueSeperator, fieldSeperator) { - this.cols = cols; - this.type = type; - this.valueSeperator = valueSeperator; - this.fieldSeparator = fieldSeperator; -} -// 创建一个CheckBox对象 -function CheckBox(rows, type, valueSeperator, fieldSeperator) { - this.rows = rows; - this.type = type; - this.valueSeperator = valueSeperator; - this.fieldSeparator = fieldSeperator; -} var methodParams = new Array(); var fieldHTML = ""; var temp; -function loadMethodParams(behaviorData, plugin, method) { +function loadMethodParams(behaviorData) { + var temp = behaviorData.split('.'); + var plugin = temp[0].split('_')[0]; + var method = temp[1]; + $ .post( "loadMethodParameters", @@ -379,24 +340,23 @@ function upload(uploadBehavior) { // 创建一个Table域 function createTable(methodParamModel) { + var name = methodParamModel.name; var label = methodParamModel.label; var table = methodParamModel.paramTypeModel; var cols = table.cols; var table_content = cols.split(table.valueSeperator); + /* + * var divNode = document.createElement("div"); var p = + * document.createElement("p"); var div = document.createElement("div"); var + * addCol = document.createElement("button"); var removeCol = + * document.createElement("button"); var tableNode = + * document.createElement("table"); var br1 = document.createElement("br"); + * var br2 = document.createElement("br"); var labelNode = + * document.createTextNode(label); var nameNode = + * document.createTextNode(name); + */ - var divNode = document.createElement("div"); - var p = document.createElement("p"); - var div = document.createElement("div"); - var tableNode = document.createElement("table"); - var br = document.createElement("br"); - var labelNode = document.createTextNode(label); - var nameNode = document.createTextNode(name); - - // divNode.setAttribute("class","sample_frame"); - divNode.setAttribute("class", "Table"); - divNode.setAttribute("id", name); - div.setAttribute("class", "sample_sub_frame"); var th = document.createElement("th"); var tr_content = document.createElement("tr"); for (var i = 0; i < table_content.length; i++) { @@ -411,18 +371,55 @@ function createTable(methodParamModel) { tr_content.appendChild(td_content); } - tableNode.appendChild(tr); - tableNode.appendChild(tr_content); - p.appendChild(labelNode); - div.appendChild(nameNode + ":"); - div.appendChild(br); - div.appendChild(tableNode); - divNode.appendChild(p); - divNode.appendChild(div); - - return divNode; + var tableHead = th.innerHTML + tr_content.innerHTML; + var tableHtml = "

" + + label + + "

" + + name + + ":

" + + tableHead + "
"; + /* + * // divNode.setAttribute("class","sample_frame"); + * divNode.setAttribute("class", "Table"); divNode.setAttribute("id", name); + * div.setAttribute("class", "sample_sub_frame"); + * addCol.setAttribute("type", "submit"); addCol.setAttribute("onClick", + * "addCol(this);");// 添加一行 tableNode.setAttribute("class", + * "operateTableCols");// 便于为该Table添加删除行 removeCol.setAttribute("type", + * "submit"); removeCol.setAttribute("onClick", "removeCol();");// 删除一行 + * + * tableNode.appendChild(tr); tableNode.appendChild(tr_content); + * p.appendChild(labelNode); div.appendChild(nameNode + ":"); + * div.appendChild(br1); div.appendChild(addCol); + * div.appendChild(removeCol); div.appendChild(br2); + * div.appendChild(tableNode); divNode.appendChild(p); + * divNode.appendChild(div); + * + * return divNode; + */ + return tableHtml; } + +function addCol(selectedNode) { + var table = selectedNode.nextSibling.nextSibling.nextSibling; + var length = $(table).find("th").find("tr").length; + var tr = document.createElement("tr"); + for (var i = 0; i < length; i++) { + var td = document.createElement("td"); + var text = document.createTextNode(""); + td.appendChild(text); + tr.appendChild(td); + } +} + +function removeCol(selectedNode) { + var table = selectedNode.nextSibling.nextSibling; + var removeNode = table.lastChild; + table.removeChild(removeNode); +} + // 创建一个CheckBox域 function createCheckBox(methodParamModel) { var name = methodParamModel.name; @@ -570,7 +567,7 @@ function removeField() { } $('#removeAllPlugin').click(function() { - document.getElementById('pluginAreaTable').innerHTML = ""; + document.getElementById('pluginArea').innerHTML = ""; }); $('#pluginCancel').click(function() { diff --git a/src/main/webapp/script/pluginModel.js b/src/main/webapp/script/pluginModel.js new file mode 100644 index 00000000..d2b1b7da --- /dev/null +++ b/src/main/webapp/script/pluginModel.js @@ -0,0 +1,45 @@ +// 创建一个MethodParamModel对象 +function MethodParamModel(name, label, paramTypeModel) { + this.name = name; + this.label = label; + this.paramTypeModel = paramTypeModel; +} +// 创建一个ParamTypeModel对象 +function ParamTypeModel(type, valueSeperator, fieldSeperator) { + this.type = type; + this.valueSeperator = valueSeperator; + this.fieldSeparator = fieldSeperator; +} +// 创建一个Field对象 +function Field(size, type, valueSeperator, fieldSeperator) { + this.size = size; + this.type = type; + this.valueSeperator = valueSeperator; + this.fieldSeparator = fieldSeperator; +} +// 创建一个MultiField对象 +function MultiField(size, type, valueSeperator, fieldSeperator) { + this.size = size; + this.type = type; + this.valueSeperator = valueSeperator; + this.fieldSeparator = fieldSeperator; +} +// 创建一个Table对象 +function Table(cols, type, valueSeperator, fieldSeperator) { + this.cols = cols; + this.type = type; + this.valueSeperator = valueSeperator; + this.fieldSeparator = fieldSeperator; +} +// 创建一个CheckBox对象 +function CheckBox(rows, type, valueSeperator, fieldSeperator) { + this.rows = rows; + this.type = type; + this.valueSeperator = valueSeperator; + this.fieldSeparator = fieldSeperator; +} +//创建一个PluginMethodListModel +function PluginMethodListModel(pluginName,methodList){ + this.pluginName=pluginName; + this.methodList=methodList; +} \ No newline at end of file