2009-12-07 23 views
0

현재 Jquery의 Datatable 플러그인으로 완전히 수정 가능한 데이터 테이블을 만들려고합니다. 완전히 수정 가능한 테이블을 사용하면 사용자가 테이블의 열을 편집, 제거, 업데이트, 추가 할 수 있습니다. 예를 바탕으로, 현재 나는 다음과 같은 자바 스크립트 코드를 시도하고있다 :Jquery Datatables 완전히 수정 가능한 데이터 테이블

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 스크립트에 보낼 수 있지만 어떻게 데이터베이스에 편집 된 열의 고유 ID와 같은 열에 대한 다른 관련 정보를 보낼 수 있습니다.

답변

0

여기 DataTables를 사용하려면 그것에 대해 문서 http://www.codeproject.com/KB/aspnet/MVC-CRUD-DataTable.aspx 필요한 모든 기능이 CRUD의 기능을 추가하는 jquery.datatables.editable.js 플러그인에 배치됩니다 JQuery와 DataTables과 CRUD의 기능을 구현하는 방법을 보여줍니다입니다 DataTables 플러그인 상단에 있습니다.

+0

사실 나는이 문제를 이미 해결했지만이 스레드를 닫는 것을 잊었습니다. 그러나 당신의 대답이 합리적이기 때문에, 나는 당신을 찬성합니다. – systemsfault

-1

죄송합니다. 귀하의 질문에 직접 답변하지 않거나 이미이 옵션을 살펴본 경우입니다. jqGrid 플러그인은 방금 언급 한 모든 것을 허용하며, 3.6에서 표시 할 열을 선택할 수있게 해줍니다. 핵심 부분은 모든 아약스를 처리하기 때문에 약간의 json을 구문 분석하고 서버 측에서 구조화 된 데이터를 처리해야합니다.

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

+0

질문은 특별히 datatables에 대한 질문이었습니다. 솔루션을 게시하는 대신 완전히 다른 솔루션을 게시하는 이유는 무엇입니까? – crafter