Jquery Datatables 完全可修改的数据表

Posted 2023-05-09

【中文标题】Jquery Datatables 完全可修改的数据表

【英文标题】：Jquery Datatables Fully Modifiable Data Table

【发布时间】：2010-12-24 00:30:17

【问题描述】：

我目前正在尝试使用 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 脚本，但是如何发送有关该列的其他相关信息，例如数据库中已编辑列的唯一 ID。

【参考方案1】：

如果你想使用 DataTables，这里有一篇文章介绍了如何使用 JQuery DataTables 实现 CRUD 功能http://www.codeproject.com/KB/aspnet/MVC-CRUD-DataTable.aspx 所有必要的功能都放在 jquery.datatables.editable.js 插件中，该插件在 DataTables 插件之上添加了 CRUD 功能。

【讨论】：

其实我已经解决了这个问题，但是忘记关闭这个帖子了。但既然你的回答是合理的，我同意你的。

【参考方案2】：

很抱歉，如果这不能直接回答您的问题，或者您已经查看过此选项。 jqGrid 插件允许您刚刚提到的所有内容，并且从 3.6 开始，您可以选择要显示的列（我认为您也提到过）......在更少的代码中（我认为）。关键是它为你处理了所有的 ajax，你只需要解析一点 json 并在服务器端处理结构化数据。

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

【讨论】：

这个问题专门针对数据表。为什么要发布一个完全不同的解决方案，而不是添加到已发布的解决方案尝试中。