From 11e61c546c10f0515a349d7e9dd989953ff51185 Mon Sep 17 00:00:00 2001
From: fanfuxiaoran <495538672@qq.com>
Date: Fri, 9 May 2014 10:34:00 +0800
Subject: [PATCH] finish one device editor display
---
.../src/main/webapp/css/script-editor.css | 21 ++--
Bench4Q-Web/src/main/webapp/device.jsp | 18 +++-
.../lib/chrisma/css/bootstrap-cerulean.css | 2 +-
.../webapp/script/device/EditorFactory.js | 72 +++++++------
.../src/main/webapp/script/device/device.js | 102 ++++++++++--------
5 files changed, 127 insertions(+), 88 deletions(-)
diff --git a/Bench4Q-Web/src/main/webapp/css/script-editor.css b/Bench4Q-Web/src/main/webapp/css/script-editor.css
index f2faf9b6..a19bb5aa 100644
--- a/Bench4Q-Web/src/main/webapp/css/script-editor.css
+++ b/Bench4Q-Web/src/main/webapp/css/script-editor.css
@@ -13,9 +13,9 @@ button {
border: 1px solid #d5d5d5;
color: #212121;
margin-top: 20px;
- margin-left: 20px;
- margin-right: 20px;
- box-shadow:3px 3px 3px #888888;
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 20px;
}
.containerBox .header {
@@ -36,15 +36,21 @@ button {
padding-right: 30px;
padding-top: 10px;
padding-bottom: 10px;
-
}
-.editor div {
-
+tr,thead {
+ width: 100%;
+}
+
+th,td {
+ padding: 10px;
}
td input {
- text-align: center;
+ width: 100%;
+}
+
+.editor td input {
width: 100%;
}
@@ -54,6 +60,7 @@ td input {
margin-top: 10px;
background: #e6f1f6;
}
+
.editor button {
margin-top: 10px;
}
\ No newline at end of file
diff --git a/Bench4Q-Web/src/main/webapp/device.jsp b/Bench4Q-Web/src/main/webapp/device.jsp
index ad3fd38c..fba360ed 100644
--- a/Bench4Q-Web/src/main/webapp/device.jsp
+++ b/Bench4Q-Web/src/main/webapp/device.jsp
@@ -9,6 +9,15 @@
+
@@ -16,9 +25,12 @@
diff --git a/Bench4Q-Web/src/main/webapp/lib/chrisma/css/bootstrap-cerulean.css b/Bench4Q-Web/src/main/webapp/lib/chrisma/css/bootstrap-cerulean.css
index db0b9760..d92b888f 100644
--- a/Bench4Q-Web/src/main/webapp/lib/chrisma/css/bootstrap-cerulean.css
+++ b/Bench4Q-Web/src/main/webapp/lib/chrisma/css/bootstrap-cerulean.css
@@ -1260,7 +1260,7 @@ legend + .control-group {
padding-left: 160px;
}
table {
- max-width: 100%;
+ width: 100%;
background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
diff --git a/Bench4Q-Web/src/main/webapp/script/device/EditorFactory.js b/Bench4Q-Web/src/main/webapp/script/device/EditorFactory.js
index 1a99d18f..9c6cc9c0 100644
--- a/Bench4Q-Web/src/main/webapp/script/device/EditorFactory.js
+++ b/Bench4Q-Web/src/main/webapp/script/device/EditorFactory.js
@@ -1,6 +1,6 @@
-
-var EditorFactory=function(){};
-EditorFactory.prototype.createBaseEditor=function(label, id) {
+var EditorFactory = function() {
+};
+EditorFactory.prototype.createBaseEditor = function(label, id) {
if (label == null) {
label = "";
}
@@ -19,21 +19,26 @@ EditorFactory.prototype.createBaseEditor=function(label, id) {
return containerBox;
}
- EditorFactory.prototype.createField=function(label, name, size, id) {
+EditorFactory.prototype.createField = function(label, name, size, id) {
var div = this.createBaseEditor(label, id);
$(div).children(".editor").append(this.createFieldLine(size, name));
return div;
}
-EditorFactory.prototype.createMultiField=function(label, name, size, id) {
- var div =this. createField(label, name, size, id);
- var editorFactory=this;
+EditorFactory.prototype.createMultiField = function(label, name, size, id) {
+ var div = this.createField(label, name, size, id);
+ var editorFactory = this;
var addFieldButton = document.createElement("button");
$(addFieldButton).html("add")
$(addFieldButton).attr("type", "submit");
- $(addFieldButton).click({editorFactory:editorFactory},function(event) {
- event.preventDefault()
- $(event.data.editorFactory.createFieldLine(size, name)).insertBefore($(this));
- });
+ $(addFieldButton).click(
+ {
+ editorFactory : editorFactory
+ },
+ function(event) {
+ event.preventDefault()
+ $(event.data.editorFactory.createFieldLine(size, name))
+ .insertBefore($(this));
+ });
var removeFieldButton = document.createElement("button");
$(removeFieldButton).html("remove")
$(removeFieldButton).attr("type", "submit");
@@ -46,8 +51,7 @@ EditorFactory.prototype.createMultiField=function(label, name, size, id) {
return div;
}
-
-EditorFactory.prototype.createFieldLine=function(size, name) {
+EditorFactory.prototype.createFieldLine = function(size, name) {
if (size == null || size <= 0) {
size = 150;
}
@@ -61,7 +65,7 @@ EditorFactory.prototype.createFieldLine=function(size, name) {
$(fieldDiv).append(fieldName.outerHTML + field.outerHTML);
return fieldDiv;
}
-EditorFactory.prototype.createFile=function(label, name, size, id) {
+EditorFactory.prototype.createFile = function(label, name, size, id) {
if (size == null || size <= 0) {
size = 150;
}
@@ -81,7 +85,7 @@ EditorFactory.prototype.createFile=function(label, name, size, id) {
}
-EditorFactory.prototype.createTable=function(label, name, cols, id) {
+EditorFactory.prototype.createTable = function(label, name, cols, id) {
var div = this.createBaseEditor(label, id);
var headers = getHeaders(cols);
$(div).children(".editor").append(createTable(cols, name, headers));
@@ -89,12 +93,13 @@ EditorFactory.prototype.createTable=function(label, name, cols, id) {
$(addButton).html("add");
$(addButton).click(
{
- headers : headers
+ headers : headers,
+ fieldName : name
},
function(event) {
event.preventDefault();
$(this).parent().children("table").children("tbody").append(
- createTr(event.data.headers));
+ createTr(event.data.headers, event.data.fieldName));
});
var deleteButton = document.createElement("button");
$(deleteButton).html("remove");
@@ -136,19 +141,23 @@ EditorFactory.prototype.createTable=function(label, name, cols, id) {
for ( var i = 0; i < headers.length; i++) {
var th = document.createElement("th");
$(th).append(document.createTextNode(headers[i]));
+ $(th).attr("style", "width:" + 100 / headers.length + "%")
$(tr).append(th);
+
}
return tr;
}
function createTr(headers, name) {
var tr = document.createElement("tr");
var td = document.createElement("td");
+ $(td).attr("style", "width:" + 100 / headers.length + "%")
$(td).html(name + ":");
$(tr).append(td);
for ( var i = 1; i < headers.length; i++) {
var input = document.createElement("input");
$(input).attr("type", "text");
var td = document.createElement("td");
+ $(td).attr("style", "width:" + 100 / headers.length + "%")
$(td).append(input);
$(tr).append(td);
}
@@ -157,15 +166,15 @@ EditorFactory.prototype.createTable=function(label, name, cols, id) {
}
}
-EditorFactory.prototype.createSelect=function(label, name, size, options, id) {
+EditorFactory.prototype.createSelect = function(label, name, size, options, id) {
if (size == null || size <= 0) {
size = 150;
}
- if(options==null||options.length<=0){
- alert("no options in:"+name);
- }
-
+ if (options == null || options.length <= 0) {
+ alert("no options in:" + name);
+ }
+
var div = this.createBaseEditor(label, id);
var nameLabel = document.createElement("label");
$(nameLabel).html(name + ":");
@@ -181,7 +190,7 @@ EditorFactory.prototype.createSelect=function(label, name, size, options, id) {
$(div).children(".editor").append(select);
return div;
}
-EditorFactory.prototype.createDate=function(label, name, size, id) {
+EditorFactory.prototype.createDate = function(label, name, size, id) {
if (size == null || size < 0) {
size = 150
@@ -198,19 +207,22 @@ EditorFactory.prototype.createDate=function(label, name, size, id) {
}
function createContainer(id, name) {
- var edtiorFactory=new EditorFactory();
+ var edtiorFactory = new EditorFactory();
var div = document.createElement("div");
$(div).attr("id", id);
$(div).append(edtiorFactory.createMultiField("test", "name", 150, "test"));
$(div).append(edtiorFactory.createFile("file", "file name", 150, "file"));
- $(div).append(edtiorFactory.createField("field", "field name", 150, "field"));
- $(div).append(edtiorFactory.createTable("table", "input", "td1;td1;td3", "id"));
- $(div).append(edtiorFactory.createSelect("select", "select", 150, [ 1, 2, 3 ], "oo"));
+ $(div).append(
+ edtiorFactory.createField("field", "field name", 150, "field"));
+ $(div).append(
+ edtiorFactory.createTable("table", "input", "td1;td1;td3", "id"));
+ $(div).append(
+ edtiorFactory.createSelect("select", "select", 150, [ 1, 2, 3 ],
+ "oo"));
$(div).append(edtiorFactory.createDate("date", "date", 150, "dateid"));
return div;
}
- $(function() {
+$(function() {
-$('#test').append(createContainer("test", "test"));
+ $('#test').append(createContainer("test", "test"));
});
-
diff --git a/Bench4Q-Web/src/main/webapp/script/device/device.js b/Bench4Q-Web/src/main/webapp/script/device/device.js
index 1340b831..b932315d 100644
--- a/Bench4Q-Web/src/main/webapp/script/device/device.js
+++ b/Bench4Q-Web/src/main/webapp/script/device/device.js
@@ -1,73 +1,76 @@
var Device = function(editorUnit) {
this.deviceTypes = [ "1", "2", "3" ];
-}
+};
Device.prototype.createDeviceEditor = function(header, id, editorUnit) {
var deviceContainer = this.createEditorContainer(header, id, editorUnit);
return deviceContainer;
-}
+};
Device.prototype.createEditorContainer = function(header, id, containerInfo) {
var container = document.createElement("div");
+ $(container).addClass("containerBox");
if (id != null) {
$(container).attr("id", id);
}
- var header = document.createElement("p");
- $(header).html(header);
- $(container).append(header);
- if (containerInfo.paramInfoModels = null) {
- this.appendEdtiors($(container), containerInfo.paramTypeModel);
- } else {
- for ( var i = 0; i < containerInfo.length; i++) {
+ var containerHeader = document.createElement("p");
+ $(containerHeader).addClass("header");
+ $(containerHeader).html(header);
+ $(container).append(containerHeader);
- $(container).append(containerInfo[i].name, null, containerInfo[i]);
+ for ( var i = 0; i < containerInfo.length; i++) {
+
+ if (containerInfo[i].children == null) {
+ this.appendEdtiors(container, containerInfo[i].label,
+ containerInfo[i].name, containerInfo[i].paramTypeModel);
+ }
+
+ else {
+ $(container).append(
+
+ this.createEditorContainer(containerInfo[i].name, null,
+ containerInfo[i].children));
}
}
return container;
-}
-Device.prototype.appendEdtiors = function(container, editorUnit) {
+
+};
+
+Device.prototype.appendEdtiors = function(container, label, name, editorInfo) {
var editorFactory = new EditorFactory();
- for ( var key in editorUnit) {
- var editorInfo = editorUnit[key];
- if (editorInfo.type.toLowerCase() == "field") {
- $(container).append(
- editorFactory.createField(editorInfo.label,
- editorInfo.name, editorInfo.size, editorInfo.name));
+ if (editorInfo.type.toLowerCase() == "field") {
+ $(container).append(
+ editorFactory.createField(label, name, editorInfo.size, name));
- } else if (editorInfo.type.toLowerCase() == "nfield") {
- $(container).append(
- editorFactory.createMultiField(editorInfo.label,
- editorInfo.name, editorInfo.size, editorInfo.name));
- } else if (editorInfo.type.toLowerCase() == "table") {
- $(container).append(
- editorFactory.createTable(editorInfo.label,
- editorInfo.name, edtiorInfo.cols, editorInfo.name));
+ } else if (editorInfo.type.toLowerCase() == "nfield") {
+ $(container).append(
+ editorFactory.createMultiField(label, name, editorInfo.size,
+ name));
+ } else if (editorInfo.type.toLowerCase() == "table") {
+ $(container).append(
+ editorFactory.createTable(label, name, editorInfo.cols, name));
- } else if (editorInfo.type.toLowerCase() == "file") {
- $(container).append(
- editorFactory.createFile(editorInfo.lable, editorInfo.name,
- editorInfo.size, editorInfo.name));
- } else if (editorInfo.type.toLowerCase() == "date") {
- $(container).append(
- editorFactory.createDate(editorInfo.label, editorInfo.name,
- editorInfo.size, editorInfo.name));
- } else if (editorInfo.type.toLowerCase() == "select") {
- $(container).append(
- editorFactory.createSelect(editorInfo.label,
- editorInfo.name, ediorInfo.size,
- editorInfo.options, editorInfo.name));
- } else {
- alert("no such editor type:" + editorInfo.type);
- }
+ } else if (editorInfo.type.toLowerCase() == "file") {
+ $(container).append(
+ editorFactory.createFile(lable, name, editorInfo.size, name));
+ } else if (editorInfo.type.toLowerCase() == "date") {
+ $(container).append(
+ editorFactory.createDate(label, name, editorInfo.size, name));
+ } else if (editorInfo.type.toLowerCase() == "select") {
+ $(container).append(
+ editorFactory.createSelect(label, name, editorInfo.size,
+ editorInfo.options, name));
+ } else {
+ alert("no such editor type:" + editorInfo.type);
}
-}
+};
Device.prototype.addChildDevice = function() {
-}
+};
function dataTransfer(serverData) {
var editorInfos = new Array();
@@ -82,18 +85,23 @@ function dataTransfer(serverData) {
if (serverData.groupModels != null) {
for ( var i = 0; i < groupInfos.length; i++) {
-
- editorInfos.push(dataTransfer(groupInfos[i]));
+ var container = new Container(groupInfos[i].name,
+ dataTransfer(groupInfos[i]));
+ editorInfos.push(container);
}
}
return editorInfos;
}
+var Container = function(name, children) {
+ this.name = name;
+ this.children = children;
+
+};
$(function() {
var pluginName = "hbase";
- var plugin;
var url = "/getPlugin/" + pluginName;
$.get(url, {}, function(data) {