如何使用Excel数据填充jquery表单

时间:2013-03-29 16:35:55

标签: jquery

我需要使用多表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组数据。我只想要基本形式中的一个空集。

1 个答案:

答案 0 :(得分:0)

由于缺少良好的语法而没有进入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);
    }
}