JQuery Datatables Полностью изменяемая таблица данных

Question

В данный момент я пытаюсь создать полностью модифицируемую таблицу данных с помощью плагина Jquery Datatable.Под полностью изменяемой таблицей я подразумеваю, что пользователь сможет редактировать, удалять, обновлять и добавлять столбцы в таблице.Основываясь на примерах, в настоящее время я пробую следующий код JavaScript:

  function var_dump(obj) {
       if(typeof obj == "object") {
        return "Type: "+typeof(obj)+((obj.constructor) ? "\nConstructor: "+obj.constructor : "")+"\nValue: " + obj;
       } else {
        return "Type: "+typeof(obj)+"\nValue: "+obj;
       }
    }//end function var_dump

      var oTable;
      var giRedraw = false;
      var giCount=11;
      $(document).ready(function() {
/* Add a click handler to the rows - this could be used as a callback */
      $("#example tbody").click(function(event) {
        $(oTable.fnSettings().aoData).each(function (){
          $(this.nTr).removeClass('row_selected');
      });
          $(event.target.parentNode).addClass('row_selected');
      });
/* Add a click handler for the delete row */
      $('#delete').click( function() {
        var anSelected = fnGetSelected( oTable );
        var iRow = oTable.fnGetPosition( anSelected[0] );
        oTable.fnDeleteRow( iRow );
        } );

                oTable = $('#example').dataTable( {
                    "bProcessing": true,
                    "bServerSide": true,
                    "sAjaxSource": "lib/server_processing.php",
                    "fnDrawCallback": function () {
                        $('#example tbody td').editable( 'lib/editable_ajax.php', {
                "callback": function( sValue, y ) {
                alert(sValue);
                                /* Redraw the table from the new data on the server */
                                oTable.fnDraw();
                            },
                            "height": "14px"
                        } );
                    }
                } );
      } );

function fnClickAddRow() {
  oTable.fnAddData( [
    giCount+".1",
    giCount+".2",
    giCount+".3",
    giCount+".4",
    giCount+".5", ]
 );
 giCount++;
}


/* Get the rows which are currently selected */
function fnGetSelected( oTableLocal )
{
  var aReturn = new Array();
  var aTrs = oTableLocal.fnGetNodes();

  for ( var i=0 ; i<aTrs.length ; i++ )
  {
    if ( $(aTrs[i]).hasClass('row_selected') )
    {
      aReturn.push( aTrs[i] );
    }
  }
  return aReturn;
}

Это отлично работает в пользовательском интерфейсе, но я понятия не имею, как отправить информацию о столбце на сторону сервера.Хорошо, я могу отправить новое значение столбца в сценарий server_ajax, но как я могу отправить другую связанную информацию о столбце, например уникальный идентификатор редактируемого столбца в базе данных.

Answer 1

если вы хотите использовать DataTables, вот статья, в которой показано, как реализовать функции CRUD с помощью JQuery DataTables. http://www.codeproject.com/KB/aspnet/MVC-CRUD-DataTable.aspxвсе необходимые функции помещены в плагин jquery.datatables.editable.js, который добавляет функции CRUD поверх плагина DataTables.

Answer 2

извините, если это не дает прямого ответа на ваш вопрос или вы уже рассматривали этот вариант.Плагин jqGrid позволяет все, что вы только что упомянули, и, начиная с версии 3.6, позволяет вам выбирать, какие столбцы отображать (что, я думаю, вы также упомянули)... с гораздо меньшим количеством кода (я думаю).Ключевой момент заключается в том, что он обрабатывает за вас весь ajax, вам нужно лишь немного проанализировать json и обработать структурированные данные на стороне сервера.

http://www.trirand.com/jqgridwiki/doku.php