動態web窗體，字段可以嵌套到任意深度，也可以動態添加/刪除字段

我正在嘗試構建一個Web窗體，它將根據數據庫中的行確定其初始字段。例如，表單1可能具有字段A，B和C.另一方面，表單2可能具有字段D，E和F.此外，可能有數百甚至數千個此類表單，每個表單都具有唯一的ID 。動態web窗體，字段可以嵌套到任意深度，也可以動態添加/刪除字段

現在，這些字段（A，B，C等）中的每一個都可能由其他字段組成，而這些字段又可以由更多字段組成。換句話說，一些字段實際上是字段的集合（到任意深度）。

最重要的是，表單的用戶可以選擇在運行時添加更多這些字段的一些實例。有時用戶會選擇添加全新的記錄（所有字段），而在其他時候，他們可能會選擇只添加其中一個字段的另一個實例（其本身可能包含更多字段）。另外，我需要用戶能夠刪除他們添加的任何這些字段。

到目前爲止，我已經花了大約30個小時與我的一位同事一起提供了一個自定義的基於Javascript的解決方案，其中包括與DOM樹一起構建自己的樹結構，編寫一些遞歸函數等，但是，複雜性已經上升，它真的好像我們在這裏重新發明輪子。這在我看來是一個必須已經解決的問題。

我對jQuery不是很熟悉，但聽起來好像它可能是一個很好的解決方案，基於我以前聽說過的。換句話說，我懷疑這可能是jQuery或多或少解決了「開箱即用」問題。但是，我對jQuery的初步研究（在Stack Overflow和Google上的總體研究）給我的印象是，情況並非如此，使用jQuery的自定義解決方案需要放在一起。

我的問題是，什麼是最簡單的方法來實現我在找什麼？該解決方案甚至不必使用jQuery;我只是認爲jQuery可能是最好的方法。我不想找人爲我編寫代碼，只是爲了讓我指向正確的方向，因爲我們迄今爲止的解決方案看起來非常混亂。

來源

2013-10-10 Dan

我會建議檢查KnockoutJS。有了這個jquery插件，你可以動態地添加或刪除DOM使用ko if：comments。此外，您可以通過使用可見的數據綁定來簡單地顯示或隱藏元素。我建議檢查他們的教程，收集部分應該給你一個良好的開始，如何實現你正在嘗試。

來源

2013-10-14 22:44:06

如果我明白你在找什麼，使用jQuery結合一個容易解析的響應框架（如JSON）可能是你正在尋找的。如果你使用PHP，你可以很容易地創建表單數據的大型嵌套數組，只是把它打印出來作爲JSON是這樣的：

<?php 
$form1Array = array(
    array('type'=>'text','name'=>'input_a','id'=>'input_a','value'=>'Example default value','label'=>'Input A'), 
    array('type'=>'text','name'=>'input_b','id'=>'input_b','label'=>'Input B'), 
    array('type'=>'password','name'=>'input_c','id'=>'input_c','label'=>'Input C')); 

$form2Array = array(
    array('type'=>'text','name'=>'input_d','id'=>'input_d','label'=>'Input D'), 
    array('type'=>'text','name'=>'input_e','id'=>'input_e', 'label'=>'Input E'), 
    array('type'=>'password','name'=>'input_f','id'=>'input_f', 'label'=>'Input F','can_replicate'=>true)); 

$output = array('form_1'=>array('id'=>'form_1','label'=>'Form 1','elements'=>$form1Array,'can_replicate'=>true),'form_2'=>array('id'=>'form_2','label'=>'Second form','elements'=>$form1Array)); 

echo json_encode($output,JSON_PRETTY_PRINT); 
?>

這顯然需要進行修改，以真正從數據庫構建結構輸出，但這應該是一個相當簡單的過程。這個例子的輸出會給你，你可以解析使用jQuery一個漂亮的JSON輸出：

{ 
    "form_1": { 
     "id": "form_1", 
     "label": "Form 1", 
     "elements": [ 
      { 
       "type": "text", 
       "name": "input_a", 
       "id": "input_a", 
       "value": "Example default value", 
       "label": "Input A" 
      }, 
      { 
       "type": "text", 
       "name": "input_b", 
       "id": "input_b", 
       "label": "Input B" 
      }, 
      { 
       "type": "password", 
       "name": "input_c", 
       "id": "input_c", 
       "label": "Input C" 
      } 
     ], 
     "can_replicate": true 
    } 
}

在此之後，你只查詢您的PHP頁面，並彙編輸出信息到形式和元素：

<!DOCTYPE html5> 
<html> 
    <head> 
     <script type="text/javascript" src="jquery.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function(){ //wait for the whole document to load before modifying the DOM 
       $.ajax({ 
        url: "test.php", 
        success: function(data, status, jqXHR) { 
         var formData = jQuery.parseJSON(data); 
         $.each(formData, function(id, formInfo){ // function(key, value); In the PHP example, I used the key as the form ID, with the value containing the array of form data 
          var newForm = $('<form></form>'); //Create an empty form element 
          newForm.attr('id',formInfo.id); //Set the form ID 
          $.each(formInfo.elements,function(key, formInput){ //I didn't place a key on the inputs, so the key isn't used here 
           var newInput = $('<input></input>'); //Create a new empty input 
           newInput.attr({'id':formInput.id,'type':formInput.type,'name':formInput.name}); 
           if(formInput.value != null){ //If a default value is given 
            newInput.val(formInput.value); //Set that value 
           } 

           if(formInput.label != null){ 
            var newLabel = $('<label></label>'); 
            newLabel.attr('for',formInput.label); //Set the ID that this label is for 
            newLabel.html(formInput.label); //Set the label text 
            newForm.append(newLabel); 
           } 

           newForm.append(newInput); 

           if(formInput.can_replicate != null && formInput.can_replicate == true){ 
            //Place code here to insert a button that can replicate the form element 
            //I'm just going to put a plus sign here 
            newForm.append('<a href="#">+</a>'); 
           } 

           newForm.append('<br />'); 
          }); 
          if(formInfo.can_replicate != null && formInfo.can_replicate == true){ 
           //put code here to insert a button that replicates this form's structure 
          } 

          if(formInfo.label != null){ 
           var newLabel = $('<label></label>'); 
           newLabel.attr('for',formInfo.id); 
           newLabel.html(formInfo.label); 
           $('#form_container').append(newLabel); 
          } 

          $('#form_container').append(newForm); 
         }); 
        } 
       }) 
      }); 
     </script> 
    </head> 
    <body> 
     <h1>Testing</h1> 
     <div id="form_container"> 
     </div> 
    </body> 
</html>

所有這一切之後，這是輸出的例子中應該產生：

example output

來源

2013-10-15 16:52:57

動態web窗體，字段可以嵌套到任意深度，也可以動態添加/刪除字段

回答

相關問題