JQuery DataTables는 완전히 수정 가능한 데이터 테이블입니다

Question

현재 JQuery의 데이터 가능한 플러그인으로 완전히 수정 가능한 데이터 테이블을 만들려고합니다. 완전히 수정 가능한 테이블이라는 의미는 사용자가 테이블의 열을 편집, 제거, 업데이트, 열을 추가 할 수 있음을 의미합니다. 예제를 기반으로, 현재 다음 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;
}

이것은 사용자 인터페이스에서 잘 작동하지만 열 정보를 서버쪽으로 보내는 방법에 대해서는 전혀 모릅니다. Ok 열의 새 값을 Server_ajax 스크립트로 보낼 수 있지만 데이터베이스에서 편집 된 열의 고유 ID와 같은 열에 대한 다른 관련 정보를 어떻게 보낼 수 있습니까?

Answer 1

DataTables를 사용하려면 여기에 기사가 있습니다. jQuery DataTables로 CRUD 기능을 구현하는 방법에 대한 기사가 있습니다. http://www.codeproject.com/kb/aspnet/mvc-crud-datatable.aspx필요한 모든 기능은 DataTables 플러그인 위에 CRUD 기능을 추가하는 jQuery.datatables.editable.js 플러그인에 배치됩니다.

Answer 2

이것이 질문에 직접 답변하지 않거나 이미이 옵션을보고 있다면 죄송합니다. JQGRID 플러그인을 사용하면 방금 언급 한 모든 것이 허용되며 3.6을 사용하면 코드가 훨씬 적은 코드로 표시 할 열을 선택할 수 있습니다. 핵심 부분은 모든 ajax를 처리한다는 것입니다. 작은 JSON 만 구문 분석하고 서버 측의 구조화 된 데이터를 처리하면됩니다.

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