如何使用excel數據填充jQuery表單

Question

我需要使用多表格excel工作簿中的數據填充表單。我已經嘗試編寫一個VBA腳本來序列化爲Json，但它看起來非常勞動密集，並且查看了一個名爲jquery.populate的插件，但無法找出一個。

下面是示例：

<fieldset> 
<div class="_50"><strong>Phytoplankton CNP Sample ID:</strong><input type="text" name="phyCNP"></div> 
<div class="_25">D1 Filtered (mL):<input type="text" name="2D1"></div> 
<div class="_25">D2 Filtered (mL):<input type="text" name="2D2"></div> 
</fieldset> 
<fieldset> 
<div class="_50"><strong>Algae Sample ID:</strong><input type="text" name="algae"></div> 
<div class="_25"> <label></label> 
     <input type="radio" id="radPeri1mod" name="algae" data-mini="true"/> 
     <label for="radPeri1mod">PERI-1-MOD</label> 
    <label> </label> 
     <input type="radio" id="radPeri1" name="algae" data-mini="true"/> 
     <label for="radPeri1">PERI-1</label></div> 
    <div class="_25"> Other: <input type="text" id="textOther" name="algae" /></div> 
    </fieldset> 

1.什麼是填充從Excel工作簿中多張田最好的方法是什麼？

2.是否有辦法根據excel字段集的數量即時添加字段集？上面的字段集可能有一組數據或5組數據。我只希望在基本形式中有一個空集。

Answer 1

由於缺乏良好的語法，沒有進入template builders，但是您可以在循環中手動構建/插入每個字段集，這有點麻煩。

我不能回答這個問題，AJAX，因爲我不是這方面精通，但下面的例子應該讓你開始

var ajaxForNumberOfFields, 
    ajaxForNumberOfDataSets, 
    ajaxForDataTitle, 
    ajaxForDataName, 
    $field, 
    $header, 
    $data1, 
    $data2; 

// if the form already has old data then clear it 
if(clearData) { 
    $('form:not(first-child)').remove(); 
} 

// ajax the number of fields 
// something like $.ajax('yourURL', options).done(function(data){ajaxForNumberOfFields = data); 

for(var i=0;i<ajaxForNumberOfFields;++i) { 
    // create a new fieldset 
    $field = $('<fieldset />'); 

    // ajax the number of data sets 
    // ajaxForNumberOfDataSets = $.ajax('yourURL', options).done(function(data){ajaxForNumberOfFields = data); 

    for(var j=0;j<ajaxForNumberOfDataSets;++j;) 
     // new data header and rows 
     $header = $('<div class=_50 />'); 
     $data1 = ('<div class=_25 />'); 
     $data2 = ('<div class=_25> Other: </div>'); 

     // ajax the data for the current set 
     // ajaxForDataTitle = $.ajax('yourURL', options).done(function(data){ajaxForNumberOfFields = data); 
     // ajaxForDataName = $.ajax('yourURL', options).done(function(data){ajaxForNumberOfFields = data); 

     // load header 
     $header 
      .append($('<strong />').text(ajaxForDataTitle)) 
      .append($('<input type="text" />').attr('name', ajaxForDataName)); 

     // build data 1 
     $data1 
      .append('<label />') 
      .append($('<input type="radio" id="radPeri1mod" data-mini="true"/>').attr('name', ajaxForDataName)) 
      .append('<label for="radPeri1mod">PERI-1-MOD</label>') 
      .append('<label />') 
      .append($('<input type="radio" id="radPeri1" data-mini="true"/>').attr('name', ajaxForDataname)) 
      .append('<label for="radPeri1">PERI-1</label>'); 

     // build data2 
     // iterating over fieldsets will restrict the use of the id attribute 
     // will need to use class attribute to locate the input, then figure out which one it is 
     $data2 
      .append($('<input type="text" class="textOther" />').attr('name', ajaxforDataName)); 

     // build the fieldset 
     $field.append($header).append($data1).append(data2); 

     // stuff the fieldset into the form 
     $('form').append($field); 
    } 
}