Php 可编辑数据表

我使用的是Datatables，能够编辑简单的数据，比如名称等，这一切都很好，我试图理解我是如何让它有一个DateTime选择器和选择选项的

我有两列需要编辑，一列是DateTime，另一列需要添加SELECT选项

到目前为止，这是我的代码，当通过阅读了解它们时，我不太清楚如何实现这一点，尤其是当我的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%"        
});

我试着用一个测试选择把它放在宽度：100%之后，但当你点击编辑时，它只是出现在每一列中

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);
}
});

---

下面是如何实现这一点。您不需要editable.js。所有这些都是通过dataTable插件中的此选项完成的

下面是使用它的方法：

$('#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);
    }
});

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

$('#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);
    }
});

这里有一个工作示例：

---

谢谢您的帖子，这样我就可以编辑字段中的数据，以便将其发回数据库了吗？当然可以！这个单元格里会有一个下拉列表，或者是一个日期选择器或者其他什么。例如，我将简单的货币价值转换为投入。让我展示给你看，我会编辑我的答案谢谢，我正在努力理解它的作用。。。您的示例中的indexOfColPrice从何而来？在您的示例中，您会构建它吗？如果您只是创建一个标准的寻呼机表单，您会这样做吗？它以前在我的文件中声明过，还有其他变量。。。因此，如果您需要添加一列，某一天，您只需对所有文件更改一次变量值。。。

$('#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);
    }
});