modify plugin-new.js plugin.css plugin.jsp,add pluginModel.js

2014-03-18 18:32:45 +08:00 · 2014-03-18 18:32:45 +08:00 · 4646d43e3b
parent 605878b351
commit 4646d43e3b
5 changed files with 260 additions and 227 deletions
--- a/src/main/java/org/bench4q/web/model/PluginMethodListModel.java
+++ 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<String> methodList;
+	
+	public PluginMethodListModel(String pluginName,List<String> methodList){
+		this.pluginName=pluginName;
+		this.methodList=methodList;
+	}
+	
+	public String getPluginName() {
+		return pluginName;
+	}
+	public void setPluginName(String pluginName) {
+		this.pluginName = pluginName;
+	}
+	public List<String> getMethodList() {
+		return methodList;
+	}
+	public void setMethodList(List<String> methodList) {
+		this.methodList = methodList;
+	}
+}
--- 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;
 }
--- a/src/main/webapp/plugin.jsp
+++ b/src/main/webapp/plugin.jsp
@ -103,10 +103,7 @@ body {
 									<div class="operatePlugins  center">
 										<div class="span8" style="float: left;">
 											<div id="pluginArea">
-												<table id="pluginAreaTable">
-													<!-- 显示选中的plugin -->
-
-												</table>
+											
 											</div>
 										</div>
 										<div class="pluginButton">
@ -117,7 +114,7 @@ body {

 											<p>
 												<button type="submit" class="btn btn-inverse"
-													id="removePlugin" onClick="#">Remove</button>
+													id="removePlugin" onClick="removePlugin();">Remove</button>
 											</p>
 											<p>
 												<button type="submit" class="btn btn-inverse"
@ -149,10 +146,7 @@ body {
 									<div class="operatePlugins center">
 										<div class="span8 behavior" style="float: left;">
 											<div id="behaviorArea">
-												<table id="showBehaviorsTable">
-													<!-- 显示选中过的behavior内容 -->
-
-												</table>
+												
 											</div>
 										</div>
 										<div class="behaviorButton">
@ -174,38 +168,6 @@ body {

 						<div id="showPluginMethod">
 							<!-- 显示方法文档，开始动态生成 ,只显示一个-->
-							<div id="httpPlugin_post" class="hide">
-
-								<div class="span10 showPluginDetails box">
-									<div class="box-header well " data-original-title>
-										<i class="icon-pencil" style="float: left;"></i>
-										<h2>
-											sample: <i id="sampleName">httpPlugin.post</i>
-										</h2>
-										<div class="box-icon">
-											<a href="#" class="btn btn-setting btn-round"><i
-												class="icon-plus"></i></a> <a href="#" class="btn btn-round"><i
-												class="icon-list"></i></a> <a href="#"
-												class="btn btn-minimize btn-round"><i
-												class="icon-chevron-up"></i></a>
-										</div>
-									</div>
-
-									<div class="box-content">
-										<div id="Id" class="sample_frame">
-											<div class="sample_sub_frame">
-												id:<input type="text" />
-											</div>
-										</div>
-										<div class="sample_frame">
-											<p>Configure the sample</p>
-											<div class="sample_sub_frame">
-												URI(required):<input type="text" id="uri" />
-											</div>
-										</div>
-									</div>
-								</div>
-							</div>

 						</div>
 					</div>
@ -253,22 +215,16 @@ body {
 				<div class="inset span4 center">
 					<div class="span2 behavior-box scroll"
 						style="height: 200px; width: 220px;">
-						<table id="pluginMethod">
-							<!-- 显示选中的plugin的具体方法列表 -->
-							<!-- 
-							<tr>
-								<td><a href="#" id="httpPlugin_0_post"
-									style="cursor: pointer;">HttpPlugin.post</a></td>
-							</tr>
-						 -->
-						</table>
+						<div id="pluginMethod">
+							
+						</div>
 					</div>
 					<div class="span2 behavior-box scroll"
 						style="height: 200px; width: 220px;">
-						<table id="insertPluginAreaPlugins">
+						<div id="insertPluginAreaPlugins">
 							<!-- 显示上个modal中的内容 -->

-						</table>
+						</div>
 					</div>
 				</div>
 			</div>
@ -301,6 +257,7 @@ body {
 		<script src='js/jquery.dataTables.min.js'></script>
 		<script src="js/theme.js"></script>
 		<script src="script/base.js"></script>
+		<script src="script/pluginModel.js"></script>
 		<!--  <script src="script/plugin.js"></script> -->
 		<script src="script/plugin-new.js"></script>
 	</fmt:bundle>
--- 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() + "<br>";
-		}
 	});
-});
+}

 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() + "<br>";
+	}
+	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<String> methodList
-						for (var i = 0; i < data.length; i++)
-							methodList.push(data[i]);
-						for (var j = 0; j < methodList.length; j++) {
-							/*
-							methodHtml += "<tr><td><a style='cursor: pointer;' onClick='show();'>"
-								+ methodList[j]
-								+ "</a></td></tr>";*/
-						
-							methodHtml += "<tr><td><a style='cursor: pointer;' onClick='showMethodDocument("
-									+ methodData
-									+ ","
-									+ plugin
-									+ ","
-									+ methodList[j]
-									+ ");'>"
-									+ methodList[j]
-									+ "</a></td></tr>";
-						}
-						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<String> 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 += "<div id='" + plugin_method_List.valueOf(j)
+					+ "'><a style='cursor: pointer;' onClick='show(this);'>"
+					+ methodList[j] + "</a><p class='hide'>"
+					+ plugin_method_List.valueOf(j) + "</div>";
+		}
+		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 = "<div class='Table'id="
+			+ name
+			+ "><p>"
+			+ label
+			+ "</p><div class='sample_sub_frame'>"
+			+ name
+			+ ":<br><button type='submit'onClick='addCol(this);'>addCol</button><button type='submit' onClick='removeCol(this);'>removeCol</button><br><table class='operateTableCols'>"
+			+ tableHead + "</table></div></div>";
+	/*
+	 * // 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() {
--- a/src/main/webapp/script/pluginModel.js
+++ 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;
+}