JQuery Databables جدول بيانات قابل للتعديل بالكامل

Question

أحاول إنشاء جدول بيانات قابل للتعديل بالكامل مع البرنامج المساعد DataTable في 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;
}

هذا يعمل بشكل جيد في واجهة المستخدم، لكن ليس لدي أي فكرة عن كيفية إرسال معلومات الأعمدة إلى جانب الخادم. حسنا، يمكنني إرسال القيمة الجديدة للعمود إلى البرنامج النصي Server_ajax Script ولكن كيف يمكنني إرسال المعلومات الأخرى ذات الصلة حول العمود مثل معرف فريد من العمود المحرر في قاعدة البيانات.

Answer 1

إذا كنت ترغب في استخدام DataTables هنا هو مقال حول هذا يوضح كيفية تطبيق وظائف CrUD مع Databables المسج http://www.codeproject.com/kb/aspnet/mvc-crud-datatable.aspx.يتم وضع جميع الوظائف اللازمة في البرنامج المساعد JQuery.DataBables.js الذي يضيف وظائف CrUD على رأس المساعد DataTables.

Answer 2

آسف إذا لم يرد هذا على سؤالك مباشرة، أو إذا كنت قد نظرت بالفعل في هذا الخيار. يسمح البرنامج المساعد JQGrid بكل ما ذكرته للتو، وذلك حتى 3.6 يتيح لك اختيار الأعمدة التي تعرضها (والتي أعتقد أنك ذكرت أيضا) ... في كود أقل بكثير (أعتقد). الجزء المفتاح يجري أنه يتعامل مع كل AJAX لك، تحتاج إلى تحليل فقط JSON قليلا والتعامل مع البيانات المنظمة على جانب الخادم.

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