是否可以在表排序器插件中使用下拉框


Is it possible to have drop down boxes in a tablesorter plugin?

我有一个使用php,ajax和tablesorter插件完美生成的表。 我现在想将一些输入字段放入下拉框中,以便用户可以在需要更改时选择一个选项。 然后,所有这些都需要保存到数据库中。这是我到目前为止所拥有的:

    $('#getInfo').live('click', function() {
//clear table before search
    $("#inventoryUpdate tbody tr").remove();
    $('#messageInv').html('Please be patient, this might take a minute');
$.ajax({
    type: "POST",
    async: true,
    url: "getInventory.php",
    dataType: "json",
    data: ({skuStart: $("#startSkuRange").val(), skuEnd: $("#endSkuRange").val(), processDate: $("#processDate").val(),
           source: $("#source").val()}),
    success: function(data){
        $('#messageInv').hide(); 
        //console.log(data);
                    var myselectoptions = ''; 
        if(data.isbn2 === null){
                $("#inventoryUpdate").append('<tr><td>No Records Found</td></tr>');
            }else{
        for(var x=0;x<data.isbn2.length;x++)
                {
          $.each(data.defect2[x], function(index, val)
            {
             myselectoptions += '<option value="'+data.defect2[x][index].option+'">'+data.defect2[x][index].option+'</option>';
            });
        $("#inventoryUpdate").append('<tr><td id="tableSKU">'+data.sku[x]+'</td><td id="tableISBN">'+data.isbn2[x]+
                 '</td><td><input type="text" id="tableQuantity" value="'+data.quantity[x]+
                 '"/></td><td><select id="tableDefect">'+myselectoptions+
                 '"</select></td><td><input type="text" id="tableSource" value="'+data.source[x]+
                 '"/></td><td><input type="text" id="tableFeature" value="'+data.feature[x]+
                 '"/></td><td><input type="text"  id="tableLocation" value="'+data.location[x]+
                '"/></td><td><input type="text" id="tableProcessDate" value="'+data.processDate[x]+
                '"/></td><td><input type="text" id="tableBookType" value="'+data.booktype[x]+
                '"/></td><td><input type="text" id="tableCreatedBy" value="'+data.created[x]+
                '"/></td><td><input type="text" id="tableModifiedBy" value="'+data.modified[x]+
                '"/></td></tr>');
                                    }
        $("#inventoryUpdate").trigger("update");
            } // end of else statement
    } // end of success function
});// end of ajax call
}); // end of inventory update function

我希望让表缺陷和表功能输入成为动态填充的下拉框,并默认为数据库中的当前信息。 例如,如果数据库中的缺陷是"防尘套",这将是选择的选项,但我还需要数据库中的其余选项(无缺陷、水损坏等)可用如果需要更改。 我认为我需要将输入类型更改为选择,但是我该如何填充它呢? 这是否需要再次调用数据库以获取信息?这个插件甚至可以做到这一点吗?
编辑:我已经根据下面的答案粘贴了新代码,我现在得到了第一条记录的 19 个"选项"(它只是说未定义而不是返回的实际值),第二条记录有 38 个等。 应该只有 19 个选项。

如果我没看错,只需将<input type="text"......>替换为 <select id=...><option>...</option></select>

至于动态填充选择,可以通过几种不同的方式处理。使用您的 ajax,您可以通过更改现有的

data.defect[x]到一个多维对象中,因此它不仅仅是一个字符串,而是输出一个数组,该数组将在后端转换为 JSON,因此您的对象看起来像

defect[{"option":"value"},{"option":"value"},{"option":"value"},{"option":"value"}]

当您在继承部分中构建表时,您将遍历该对象。你基本上会做和现在一样的事情。除了。您的选择看起来像

var myselectoptions = '';
   $.each(data.defect[x], function(index, val)
          {
             myselectoptions += '<option value="'+data.source[x][index].option+'">'+data.source[x][index].option+'</option>';
          });
'"/></td><td><select id="tableDefect">'+myselectoptions+'....

现在这是纯粹的概念,我还没有测试过它,它可能需要一些调整来专门满足你的需求,但这是你可以处理你想要做的事情的几种方法的核心概念之一,适合你目前正在做的事情,而不必改变太多。