可编辑的数据表

Question

我正在使用 Datatables，并且能够编辑简单数据（即名称等），一切都很好，我试图了解我如何让它拥有一个 DateTime Picker 和 SELECT OPTION。

我有 2 个列要编辑，我说一个是 DateTime，另一个是我想添加一个 SELECT 选项。

到目前为止，这是我的代码，当通过 datatables-editable 阅读它们时，我不太清楚如何实现这一点，尤其是当我的 Editable.js 看起来不像他们的时。

您能否给我一些建议，告诉我如何将它们都添加进去，以便我的最终用户更容易更新信息。

var oTable = $('#tobebookedtable').dataTable();
oTable.$('td').editable( '../../../includes/planning/plg_tobebooked_edit.php', {
tooltip: 'Click to edit...',
"callback": function(sValue, y) {
    var aPos = oTable.fnGetPosition(this);
    oTable.fnUpdate(sValue, aPos[0], aPos[1]);
},
"submitdata": function (value, settings) {
    return {
        "row_id": this.getAttribute('id'),
        "column": oTable.fnGetPosition(this)[2]
    };
},
"height": "26px",
"width": "100%"        
});

我尝试在 "width": "100%" 之后使用测试 SELECT 但这只是在您单击编辑时出现在每一列中

type : 'select',
style   : 'display: inline',
data : "{'A':'Test A','B':'Test B','C':'Test C'}"

我的桌子

<table class="table table-striped table-hover table-bordered" id="tobebookedtable">
<thead>
    <tr>
        <th>Address</th>
        <th>Postcode</th>
        <th>Planned</th>
        <th>TimeSlot</th>
        <th>ByWho</th>
    </tr>
</thead>
<tbody>
    <?php
        $plg = db::getInstance()->query('CALL sp_tobebooked()');
        foreach ($plg->results() as $plg) {
    ?>
    <tr id="<?php echo $plg->ID; ?>">
        <td><?php echo $plg->Address; ?></td>
        <td><?php echo $plg->Postcode; ?></td>
        <td id="<?php echo $plg->ID; ?>"><?php echo $plg->Planned; ?></td>
        <td id="<?php echo $plg->ID; ?>"><?php echo $plg->TimeSlot; ?></td>
        <td id="<?php echo $plg->ID; ?>"><?php echo $plg->ByWho; ?></td>
    </tr>
    <?php }; ?>
</tbody>
</table>

TCHdvlp 建议中的测试示例

$('#tobebookedtable').dataTable( {
//for each generated row
"createdRow": function( row, data, dataIndex ) {
    //create the dropdown
    var myDropDown = $('<select><option value=""></option><option value="Yes">Yes</option><option value="No">No</option></select>');
    //bind this dropdown with the JS object used by dataTable
    myDropDown.on("change",function(){
        data.ByWho = $(this).val();
    });
    //inject this dropdown in the desired column
    $(row).find("td:eq("+data.ByWho+")").html(myDropDown);
}
});

Answer 1

这里是如何实现这一点。你不需要“editable.js”。使用 dataTable 插件中的此选项 createdRow( row, data, dataIndex ) 即可完成所有操作。

这里是使用它：

$('#example').dataTable( {
    //for each generated row
    "createdRow": function( row, data, dataIndex ) {
        //create the dropdown
        var myDropDown = $("<select>").....
        //bind this dropdown with the JS object used by dataTable
        myDropDown.on("change",function(){
            data.nameOfTheOptionAttribute = $(this).val();
        });
        //inject this dropdown in the desired column
        $(row).find("td:eq("+indexOfColumnDropdown=")").html(myDropDown);
    }
});

你完成了！

如果你想初始化你的下拉菜单/输入/日期选择器/任何东西，你可以在同一个函数中完成。所以你不要用.html()“擦除”数据

...
var myDropDown = $("<select>").....
initMyDropdown(data.nameOfTheOptionAttribute)
...

其他示例：将简单数据转换为可编辑字段

$('#example').dataTable( {
    //for each generated row
    "createdRow": function( row, data, dataIndex ) {
        var price = data.price !=null ? data.price : 0;
        var inputPrice = $("<input type='text' class='editprice' value='" + price + "' />");
        inputPrice.on("blur",function(){
            data.price = $(this).val();
        });
        $(row).find("td:eq(" + indexOfColPrice + ")").html(inputPrice);
    }
});

这里有一个工作示例： http://jsfiddle.net/TCHdevlp/fq9e1z89/