2012-08-12 34 views
1

我很困惑我應該使用數據表jQuery的插件。我的問題是我找不到解決我所有問題的任何答案(我現在已經經歷了4個多小時)。對不起,如果這個問題已經解決了無數次...jeditable vs可編輯數據表 - 有什麼區別

我有一個從> mysql數據庫> 10000行的表,我想添加一個單元格內聯編輯特定列,所以我找到了兩個現有的方法。

  1. http://datatables.net/examples/api/editable.html
  2. http://jquery-datatables-editable.googlecode.com/svn/trunk/inline-edit.html

我的問題是有什麼區別?哪一個需要哪個js腳本作爲輸入(我感到困惑,並在最後添加了所有這些內容)... 我感覺有些已經過時,並且不再適用於最新版本。或者,也許我正在混合他們兩個,所以最後沒有任何作品。

Jeditable(它並不在我手中的工作。當我點擊表中的任意單元格,什麼都不會發生)

$("#example.", oTable.fnGetNodes()).editable('php/editable_ajax.php', { 
        "callback": function(sValue, y) { 
         var aPos = oTable.fnGetPosition(this); 
         oTable.fnUpdate(sValue, aPos[0], aPos[1]); 
        }, 
        "submitdata": function (value, settings) { 
         return { 
          "row_id": this.parentNode.getAttribute('id'), 
          "column": oTable.fnGetPosition(this)[2] 
         }; 
        }, 
        "height": "14px" 
       }); 

編輯(當我點擊,編輯事件工作,但價值不更新數據庫,除非editable_ajax.php包含了完整的MySQL查詢,但隨後的頁面不重新加載)

$('#example').dataTable().makeEditable({ 
        sUpdateURL: "php/editable_ajax.php", 
        "aoColumns": [ 
         null, 
         { 
          indicator: 'Saving CSS Grade...', 
          tooltip: 'Click to select CSS Grade', 
          loadtext: 'loading...', 
          type: 'select', 
          onblur: 'submit', 
          data: "{'':'Please select...', '1':'Yes','0':'No'}" 
         } 
        ] 
       }); 

PHP服務器端

<?php 
    echo $_POST['value'].' (server updated)'; 
?> 

最後一個問題,是否有其中一個可以更有效地處理大量行的數據? (加載它需要30秒)。

回答

2

以下先決條件設置說明告訴我,您絕對需要jeditable和dataTable才能使dataTables.editable工作。 jquery-datatables-editable

<script src="/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script> 
    <script src="/Scripts/jquery.DataTables.min.js" type="text/javascript"></script> 
    <script src="/Scripts/jquery.jeditable.js" type="text/javascript"></script> 
    <script src="/Scripts/jquery-ui.js" type="text/javascript"></script> 
    <script src="/Scripts/jquery.validate.js" type="text/javascript"></script> 
    <script src="/Scripts/jquery.DataTables.editable.js" type="text/javascript"></script> 

而且通過排除法,我們可以假設,你可以jeditable與數據表單獨使用。看看source of this example,你可以看到只有dataTables和jEditable已被使用。

我不太清楚差異,但我相信dataTables.editable提供了一些可編輯和dataTable(和jValidate)之間的常用函數的接口,以便於實現。

該插件集成了幾個插件,如JQuery DataTables,JQuery Editable,JQuery Validation插件並實現通用數據管理功能。