只有一列可编辑的jquery数据表

时间:2013-07-28 07:31:33

标签: jquery datatable

我正在使用Jquery Datatable

 $('#grid').dataTable( {
      "sScrollY": 150,

        "bPaginate": false,
        "bJQueryUI": false,
        "bAutoWidth": false,
        "bFilter": true,
        "bInfo": true,
        "bScrollCollapse": false,
        "fnDrawCallback": function ( oSettings ) {
        /* Need to redo the counters if filtered or sorted */
                        if ( oSettings.bSorted || oSettings.bFiltered ){
                                for ( var i=0, iLen=oSettings.aiDisplay.length ; i<iLen ; i++ ){
                                $('td:eq(0)', oSettings.aoData[ oSettings.aiDisplay[i] ].nTr ).html( i+1 );
                                }
                        }
        },
        "oLanguage": {
            "sZeroRecords": " Please Enter \"PO Items\" ", 
            "sEmptyTable": " Please Enter \"PO Items\" "
        },

        "aoColumnDefs": [
                         { "bSortable": false, "aTargets": [ 0 ] },
                         { "bSortable": true,  "aTargets": [ 1 ] },
                         { "bSortable": false, "aTargets": [ 2 ] },
                         { "bSortable": false, "aTargets": [ 3 ] },
                         { "bSortable": false, "aTargets": [ 4 ] },
                         { "bVisible":  false, "aTargets": [ 4 ] },
                         { "bSortable": false, "aTargets": [ 5 ] },
                         { "bSortable": false, "aTargets": [ 6 ] },
                         { "bSortable": false, "aTargets": [ 7 ] },
                         { "bSortable": false, "aTargets": [ 8 ] },
                         { "bSortable": false, "aTargets": [ 9 ] },
                         { "bSortable": false, "aTargets": [ 10] }

                         ],
        "aaSorting": [[ 1, 'desc' ]]

} );

我想只编辑第9列,而不是全部。而这个可编辑只是客户端而不是服务器端。

任何简单的方法?

1 个答案:

答案 0 :(得分:0)

这是我的代码示例。

var oTable = $('#table_id').dataTable(
        {
             "bSort": false,
             "sPaginationType": "full_numbers",
        });
 $('td.editable_class', oTable.fnGetNodes()).editable('editable.php', {
    "callback": function( sValue, y ) {
        var aPos = oTable.fnGetPosition( this );
        oTable.fnUpdate( sValue, aPos[0], aPos[1] );
    },
    "submitdata": function ( value, settings ) {
        return {
            "row_id": $(this).data('id'),
            "column": $(this).data('column'),
        };
    },
    "height": "17px",
    "width": "100%",
    });

此代码示例仅使用表中的“editable_class”类编辑这些代码示例。 因此,对于要编辑的列,请在表中为该列添加上述类。