jQuery datatable:获取已编辑单元格的类和id

时间:2012-08-15 09:35:07

标签: jquery datatable html-table

我正在使用jquery-datatables-editable(http://code.google.com/p/jquery-datatables-editable/)来使用jQuery管理我的表,但我需要做的是当我编辑一个单元格时,我想得到单元格和单元格的类我刚编辑过的。我怎样才能做到这一点?这是我的代码的一部分:

//creating the table
var table = $('<table id="mytable" border="1" cellpadding="1" cellspacing="1"></table>');
var head = $('<thead><tr><th>Name</th><th>IP</th><th>Status</th><th>Last Seen</th><th>Pref. Smithers</th><th>Debug LvL</th></tr></thead>');
table.append(head);
var body = $('<tbody></tbody>');
for (var i = 0; i < x.length; i++) {
    //using xml to fill the cells
    var ip = x.item(i).getAttribute("id");
    var row = $('<tr id="' + ip + '"></tr>');
    var id = $('<td id="ip" class="' + ip + '"></td>');
    var ls = $('<td id="lastseen" class="' + ip + '"></td>');
    var nm = $('<td id="name" class="' + ip + '"></td>');
    var st = $('<td id="status" class="' + ip + '"></td>');
    var dblvl = $('<td id="defaultloglevel" class="' + ip + '"></td>');
    var prfsmth = $('<td id="preferedsmithers" class="' + ip + '"></td>');
    var lastseen = x.item(i).getElementsByTagName("lastseen")[0].childNodes[0].nodeValue;
    var name = x.item(i).getElementsByTagName("name")[0].childNodes[0].nodeValue;
    var status = x.item(i).getElementsByTagName("status")[0].childNodes[0].nodeValue;
    var defaultloglevel = x.item(i).getElementsByTagName("defaultloglevel")[0].childNodes[0].nodeValue;
    var preferedsmithers = x.item(i).getElementsByTagName("preferedsmithers")[0].childNodes[0].nodeValue;
    nm.html(name);
    id.html(ip);
    st.html(status);
    ls.html(lastseen);
    dblvl.html(defaultloglevel);
    prfsmth.html(preferedsmithers);
    row.append(nm);
    row.append(id);
    row.append(st);
    row.append(ls);
    row.append(prfsmth);
    row.append(dblvl);
    body.append(row);
}
table.append(body);

$('#service_table').append(table);


//initiating the editable datatable
var oTable = $('#mytable').dataTable().makeEditable({
    sUpdateURL: function(value, settings) {
        return (value); //Simulation of server-side response using a callback function
    },
    "aoColumns": [
        {
        indicator: 'Saving platforms...',
        tooltip: 'Click to edit platforms',
        type: 'textarea',
        submit: 'Save changes',
        fnOnCellUpdated: function(sStatus, sValue, settings) {
            alert("(Cell Callback): Cell is updated with value " + sName);
        }},
        null
        ,
    {
        indicator: 'Saving platforms...',
        tooltip: 'Click to edit platforms',
        type: 'textarea',
        submit: 'Save changes',
        fnOnCellUpdated: function(sStatus, sValue, settings) {
            //I WANT HERE TO BE ABLE TO ALERT() THE ID AND THE CLASS OF THE CELL THAT WAS JUST EDITED
            alert("(Cell Callback): Cell is updated with value " + sValue);
        }},
        null
        ,
    {
        indicator: 'Saving platforms...',
        tooltip: 'Click to edit platforms',
        type: 'textarea',
        submit: 'Save changes',
        fnOnCellUpdated: function(sStatus, sValue, settings) {
            alert("(Cell Callback): Cell is updated with value " + sValue);
        }},
    {
        indicator: 'Saving platforms...',
        tooltip: 'Click to edit platforms',
        type: 'textarea',
        submit: 'Save changes',
        fnOnCellUpdated: function(sStatus, sValue, settings) {
            alert("(Cell Callback): Cell is updated with value " + sValue);
        }}
    ]

});

2 个答案:

答案 0 :(得分:0)

我可以提供一些理论,没有确定性:

this回调的范围内fnOnCellUpdated可能是td。是指经过编辑的td

设置

也许settings作为fnOnCellUpdated的属性传递给settings回调,但数据表可编辑的文档在定义sUpdateURL时是不合适的。您可以尝试探索其属性。

其他回调

This page表示fnOnCellUpdated选项将采用回调函数,但遇到与settings相同的问题 - 未定义其fnOnEdited参数。

This page表示有一个{{1}}回调,虽然它可能很有用,但它的参数还没有完全定义。

答案 1 :(得分:0)

使用默认的fnOnCellUpdated功能是不可能的。但是,您可以在jquery-datatables-editable插件中进行简单的调整。

我在code.google上找到了issue,它提供了一个解决方案: 改变这一行:

settings.fnOnCellUpdated(status, sValue, settings);

settings.fnOnCellUpdated(status, sValue, aPos[0], settings);

那应该给你行的id。

因为我需要来自html的表行的id,如下所示:

<tr id="46" class="odd">
    <td class="sorting_1">46</td>
    <td >0</td>
</tr>

我改变了行

settings.fnOnCellUpdated(status, sValue, settings);

settings.fnOnCellUpdated( fnGetCellID(this), status, sValue, settings);

并在调用函数时返回表行的id:

fnOnCellUpdated:function(id){}