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) {