1

我很困惑我应该将哪个插件与数据表 jquery 一起使用。我的问题是我找不到任何可以解决我所有问题的答案（我现在已经忍受了 4 个多小时）。对不起，如果这个问题已经被解决了无数次......

我有一个来自 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 秒）。

4

1 回答 1

2

以下先决条件设置说明告诉我，您肯定需要 jeditable 和 dataTables 才能使 dataTables.editable 工作。jquery-datatables-可编辑

    <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 仅与 dataTables 一起使用。查看此示例的源代码，您可以看到仅使用了 dataTables 和 jEditable。

我不太确定差异，但我相信 dataTables.editable 为可编辑和 dataTable（和 jValidate）之间的一些常用功能提供了接口，使其更易于实现。

该插件集成了多个插件，例如 JQuery DataTables、JQuery Editable、JQuery Validation 插件，并实现了常用的数据管理功能。

于 2012-10-24T17:46:59.483 回答