添加实时预览

src/main/resources/static/js/addTask.js

@@ -117,29 +117,29 @@ addNewOption = function () {
     ruleId++;
 }
 
-addRatio = function (id) { // 添加文本框f
+addRatio = function (id) { // 添加单选框
     var table = $('#table'+id);
-    ratioIndex++;
+    var index = getNewRatioIndex();
     table.append('<tr type="ratio">\n' +
         '                                        <td>\n' +
         '                                            <div class="form-group">\n' +
         '                                                <div class="radio">\n' +
         '                                                    <label>\n' +
-        '                                                        <input type="radio" name="optionsRadios' + ratioIndex+
+        '                                                        <input type="radio" name="optionsRadios' + index+
         '"  value="option1" checked="checked"/>\n' +
         '                                                        Option one\n' +
         '                                                    </label>\n' +
         '                                                </div>\n' +
         '                                                <div class="radio">\n' +
         '                                                    <label>\n' +
-        '                                                        <input type="radio" name="optionsRadios' +ratioIndex+
+        '                                                        <input type="radio" name="optionsRadios' +index+
         '"  value="option2"/>\n' +
         '                                                        Option two\n' +
         '                                                    </label>\n' +
         '                                                </div>\n' +
         '                                                <div class="radio">\n' +
         '                                                    <label>\n' +
-        '                                                        <input type="radio" name="optionsRadios' +ratioIndex+
+        '                                                        <input type="radio" name="optionsRadios' +index+
         '"  value="option3" />\n' +
         '                                                        Option three\n' +
         '                                                    </label>\n' +
@@ -147,10 +147,10 @@ addRatio = function (id) { // 添加文本框f
         '                                            </div>\n' +
         '                                        </td>\n' +
         '                                        <td>\n' +
-        '                                            <input type="text" class="form-control" placeholder="选项说明"/>\n' +
+        '                                            <input onchange="showExampleRatioByLabel(this)" type="text" class="form-control" placeholder="选项说明"/>\n' +
         '                                        </td>\n' +
         '                                        <td>\n' +
-        '                                            <input type="text" class="form-control" placeholder="选项数据 请用;将选项分隔"/>\n' +
+        '                                            <input onchange="showExampleRatio(this)" type="text" class="form-control" placeholder="选项数据 请用;将选项分隔"/>\n' +
         '                                        </td>\n' +
         '                                        <td>\n' +
         '                                            <button onclick="upTr(this)" class="btn btn-default">上移</button>\n' +
@@ -162,14 +162,14 @@ addRatio = function (id) { // 添加文本框f
 
 }
 
-addText = function (id) { // 添加多选框
+addText = function (id) { // 添加文字
     var table = $('#table'+id);
     table.append('<tr type="text">\n' +
         '                                        <td>\n' +
         '                                            <input type="text" class="form-control" placeholder="选项说明"/>\n' +
         '                                        </td>\n' +
         '                                        <td>\n' +
-        '                                            <input type="text" class="form-control" placeholder="选项数据"/>\n' +
+        '                                            <input onchange="showExampleText(this)" type="text" class="form-control" placeholder="选项数据"/>\n' +
         '                                        </td>\n' +
         '                                        <td>\n' +
         '                                        </td>\n' +
@@ -187,11 +187,15 @@ addUpload = function(id){// add upload input
 
     table.append('<tr type="file">\n' +
         '                                        <td>\n' +
-        '                                            <input  type="file" id="testApplication' + id +
-        '"/>\n' +
+        '<div class="form-group">\n' +
+        '                  <label for="exampleFile' +id+
+        '">File input</label>\n' +
+        '                  <input type="file" id="exampleFile' +id+
+        '">\n' +
+        '                </div>'+
         '                                        </td>\n' +
         '                                        <td>\n' +
-        '                                            <input type="text" class="form-control" placeholder="请输入说明文字"/>\n' +
+        '                                            <input onchange="showExampleFile(this)" type="text"  class="form-control" placeholder="请输入说明文字"/>\n' +
         '                                        </td>\n' +
         '                                        <td>\n' +
         '                                        </td>\n' +
@@ -218,10 +222,10 @@ addSingleCheck = function (id) { // 添加多选框
         '                                            </div>\n' +
         '                                        </td>\n' +
         '                                        <td>\n' +
-        '                                            <input type="text" class="form-control" placeholder="选项说明"/>\n' +
+        '                                            <input onchange="showExampleSingleByLabel(this)" type="text" class="form-control" placeholder="选项说明"/>\n' +
         '                                        </td>\n' +
         '                                        <td>\n' +
-        '                                            <input type="text" class="form-control" placeholder="选项数据"/>\n' +
+        '                                            <input onchange="showExampleSingle(this)" type="text" class="form-control" placeholder="选项数据"/>\n' +
         '                                        </td>\n' +
         '                                        <td>\n' +
         '                                            <button onclick="upTr(this)" class="btn btn-default">上移</button>\n' +
@@ -253,17 +257,17 @@ addCheck = function (id) {
         '\n' +
         '                                                <div class="checkbox">\n' +
         '                                                    <label>\n' +
-        '                                                        <input type="checkbox" disabled="disable"/>\n' +
+        '                                                        <input type="checkbox" />\n' +
         '                                                        Checkbox disabled\n' +
         '                                                    </label>\n' +
         '                                                </div>\n' +
         '                                            </div>\n' +
         '                                        </td>\n' +
         '                                        <td>\n' +
-        '                                            <input type="text" class="form-control" placeholder="选项说明"/>\n' +
+        '                                            <input onchange="showExampleCheckByLabel(this)" type="text" class="form-control" placeholder="选项说明"/>\n' +
         '                                        </td>\n' +
         '                                        <td>\n' +
-        '                                            <input type="text" class="form-control" placeholder="选项数据 请用;将选项分隔"/>\n' +
+        '                                            <input onchange="showExampleCheck(this)" type="text" class="form-control" placeholder="选项数据 请用;将选项分隔"/>\n' +
         '                                        </td>\n' +
         '                                        <td>\n' +
         '                                            <button onclick="upTr(this)" class="btn btn-default">上移</button>\n' +
@@ -453,4 +457,148 @@ checkNull = function (event) {
         event.target.parentElement.parentElement.setAttribute("class","form-group has-error")
     }
 }
+
+
+showExampleFile = function (element) {
+    var td = $(element).parents("td").prev("td"); // 获取示例
+    var data = $(element).val();
+    td.html('<div class="form-group">\n' +
+        '                            <label   class="col-sm-3 control-label">' + data +
+        '</label>\n' +
+        '                            <div class="col-sm-9">\n' +
+        '                                <input  type="file" />\n' +
+        '                            </div>\n' +
+        '                        </div>')
+}
+showExampleText = function (element) {
+    var $tr = $(element).parents("td").prev("td"); // 获取上一个元素
+    var data = $(element).val();
+    $tr.html('<div class="form-group">\n' +
+        '                  <label  class="col-sm-3 control-label">' +data+
+        '</label>\n' +
+        '\n' +
+        '                  <div class="col-sm-9">\n' +
+        '                    <input type="text" class="form-control"  placeholder="请输入">\n' +
+        '                  </div>\n' +
+        '                </div>')
+}
+showExampleRatio = function (element) { // xuanxiang  shuju
+    // 显示单选框
+    var dataRatio = $(element).parents("td").prev("td").prev("td"); // 获取展示的元素
+    var data  =  $(element).val();
+    var label = $(element).parents("td").prev("td").children("input").val();
+    dataRatio.html(getExampleRatioHtml(label,data));
+}
+//show example ratio by label ;
+showExampleRatioByLabel = function(element){
+    // 显示单选框
+    var dataRatio = $(element).parents("td").prev("td"); // 获取展示的元素
+    var label  =  $(element).val();
+    var data = $(element).parents("td").next("td").children("input").val();
+    dataRatio.html(getExampleRatioHtml(label,data));
+}
+getExampleRatioHtml = function(label,data){
+    var index = getNewRatioIndex();
+    var ratioArr = data.split(';');
+    var ratioTemp = '<div class="form-group">\n' +
+        '                            <label class="col-sm-3 control-label">' +label+
+        '</label>\n' +
+        '                            <div class="col-sm-9">\n' ;
+
+    for( var  ratioJ = 0;ratioJ<ratioArr.length;ratioJ++){
+        ratioTemp+='<div class="radio">\n' +
+            '                                                    <label>\n' +
+            '                                                        <input type="radio" name="optionsRadios' + index+
+            '"  value="' +ratioArr[ratioJ]+
+            '"/>\n' +ratioArr[ratioJ]+
+            '                                                    </label>\n' +
+            '                                                </div>';
+    }
+    ratioTemp+=
+        '                                            </div>\n' +
+        '                                        </div>';
+    return ratioTemp;
+}
+showExampleSingle = function(element){
+    //单复选框
+    var dataRatio = $(element).parents("td").prev("td").prev("td"); // 获取展示的元素
+    var data  =  $(element).val();
+    var label = $(element).parents("td").prev("td").children("input").val();
+    dataRatio.html(getExampleSingleHtml(label,data));
+}
+showExampleSingleByLabel = function(element){
+    //单复选框
+    var dataRatio = $(element).parents("td").prev("td"); // 获取展示的元素
+    var label  =  $(element).val();
+    var data = $(element).parents("td").next("td").children("input").val();
+    dataRatio.html(getExampleSingleHtml(label,data));
+}
+getExampleSingleHtml = function(label,data ){
+    var singleCheckTip = label;
+    var singleCheckData = data;
+    var singleCheckTemp = '<div class="form-group">\n' +
+        '                            <label class="col-sm-3 control-label">' +singleCheckTip+
+        '</label>\n' +
+        '                            <div class="col-sm-9">\n' ;
+
+    singleCheckTemp+='<div class="checkbox">\n' +
+        '                                                    <label>\n' +
+        '                                                        <input type="checkbox"/>\n' +singleCheckData+
+        '                                                    </label>\n' +
+        '                                                </div>';
+
+    singleCheckTemp+=
+        '                                            </div>\n' +
+        '                                        </div>';
+    return singleCheckTemp;
+}
+showExampleCheck = function(element){
+    //复选框
+    var dataRatio = $(element).parents("td").prev("td").prev("td"); // 获取展示的元素
+    var data  =  $(element).val();
+    var label = $(element).parents("td").prev("td").children("input").val();
+    dataRatio.html(getExampleCheckHtml(label,data));
+}
+showExampleCheckByLabel = function( element ){
+    //复选框
+    var dataRatio = $(element).parents("td").prev("td"); // 获取展示的元素
+    var label  =  $(element).val();
+    var data = $(element).parents("td").next("td").children("input").val();
+    dataRatio.html(getExampleCheckHtml(label,data));
+}
+getExampleCheckHtml = function(label,data){
+    // ---
+    var checkTip = label;
+    var checkData = data;
+    var checkArr = checkData.split(';');
+    var checkTemp = '<div class="form-group">\n' +
+        '                            <label class="col-sm-3 control-label">' +checkTip+
+        '</label>\n' +
+        '                            <div class="col-sm-9">\n' ;
+    for( var  checkJ = 0;checkJ<checkArr.length;checkJ++){
+        checkTemp+='<div class="checkbox">\n' +
+            '                                                    <label>\n' +
+            '                                                        <input type="checkbox"/>\n' +checkArr[checkJ]+
+            '                                                    </label>\n' +
+            '                                                </div>';
+    }
+    checkTemp+=
+        '                                            </div>\n' +
+        '                                        </div>';
+    return checkTemp;
+}
+
+getDataSplit = function ( str ) {
+    var arr=str.split(";");
+    var res = new Array();
+    for(var i =0;i<arr.length;i++){
+        res.push(arr[i]);
+    }
+    return res;
+}
+//获取在本页面不会重复的ratio
+getNewRatioIndex = function () {
+    ratioIndex++;
+    return ratioIndex;
+}
 /*]]>*/

src/main/resources/templates/addTask.html

@@ -50,6 +50,10 @@
             border-top: 1px solid #f4f4f4;
             border-right: 1px solid #f4f4f4;
         }
+
+        td .form-group {
+             margin-bottom: 0px;
+        }
     </style>
 </head>
 <body>
@@ -321,6 +325,7 @@
 <script type="text/javascript">
     var ruleId ;
     var ratioIndex;
+
     $(document).ready(function(){
         $('[data-toggle="tooltip"]').tooltip();