Question

我使用的是数据表，所有这些都可以很好地编辑简单的数据，即名称等，我试图理解我如何得到它有一个DateTime Picker和SELECT OPTION。

我有两列我想要编辑，因为我说一个是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%"        
});

我尝试将测试SELECT放在"width": "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);
}
});

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/

可编辑的数据表

1 个答案: