【问题标题】:only one column editable jquery datatable只有一列可编辑的jquery数据表
【发布时间】:2013-07-28 07:31:32
【问题描述】:

我正在使用 Jquery 数据表

 $('#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 列可编辑,而不是全部。而且这个可编辑只是客户端而不是服务器端。

有什么简单的方法吗?

【问题讨论】:

  • 我要内联编辑

标签: jquery datatable


【解决方案1】:

这是我的代码示例。

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”的那些。 因此,对于您想要可编辑的列,在表格中为该列添加上述类。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多