jquery ui 选项卡 +网格对象 - ajax 发送多个查询

Question

我不太擅长 jquery，并且遇到了这个问题：

我使用 jquery 选项卡为：

<li><a href="content.php?div=Production">Production</a></li>
<li><a href="content.php?div=Digital">Digital</a></li>

声明为：

$(function() {

    $( "#tabs" ).tabs({
        load: function(event, ui) {
            console.log("load event ran");
            $('a', ui.panel).live("click", function() {
                   $(ui.panel).load(this.href);
                   return false;
                   });
        }
   });
   $("#tabs").bind('tabsshow',function(event, ui) {
    window.location = ui.tab;
})
});

在 content 中我有网格定义 - 每个选项卡都有它自己的< /strong> 要加载的表：

switch($div){
            case "Production":
                $tab = '1';
                include('div_master.php');
                break;
            case "Digital":
                $tab = '2';
                include('div_digital.php');
                break;
            default:
                include('div_master.php');
                break;
        }

在上面的 php 之后，我得到了 grid 对象加载数据库结果：

$(function() {
    var grid = $(".grid").loadGrid({ ....});
});

我也将网格对象存储在变量中，所以我可以访问sql查询，这样我就可以通过按页面上的按钮将其导出到Excel：

    $('#toexcel').live("click",function() {
        var sql = grid.data().sql;
        $.ajax({
            url: "toExcel.php",
            data: "sql="+encodeURIComponent(sql),
        });
        sql = '';
    });
});

我的问题是，当我从新鲜加载第一个选项卡时，将一些结果导出到Excel，然后更改为第二个选项卡 -该按钮从第一个选项卡导出相同的查询！ 显然，尽管重新加载了网格，但 var sql = grid.data().sql; 并未使用新数据进行更新。

无论我在选项卡之间更改多少次，第一个选项卡始终有效， 但第二个只有在页面/DOM 完全重新加载时才有效。

我该如何纠正这个问题？

---

编辑 2 - 我为两个表设置了单独的网格 - 仍然存在相同的问题。

我真的不认为问题在于重用网格对象 - 我认为问题在于 jquery UI - 选项卡，特别是如何处理重新加载 DOM。

---

添加

请参阅 Firebug 控制台以获取请求： 看看刚加载时 - ajax 仅向 toExcel 发送 1 个请求，但在切换选项卡（div-m - 第一个选项卡，div-d - 第二个选项卡）后，它发送 2 个请求。根据选项卡，它会取消第一个选项卡的第二个查询，第二个选项卡的第一个查询 - 这就是为什么第一个选项卡始终有效！

Answer 1

更新： ^{代码被精简到骨子里！ ;)}

你的代码应该是这样的：

var sql = '';
$(function() {
    $("#tabs").tabs({
        select: function(event, ui) {
            $(ui.tab.hash).find('table').loadGrid({
                loadComplete: function() {
                    sql = $(this).data().sql;
                }
            });
        }
    });
    $('#toexcel').live("click", function() {
        $.ajax({
            url: "toExcel.php",
            data: "sql=" + encodeURIComponent(sql),
        });
    });
});

---

    <div id="tabs">
        <ul>
            <li><a href="#production">Production</a></li>
            <li><a href="#digital">Digital</a></li>
        </ul>
        <div id="production">
         <table class="production grid" action="content.php?div=Production"></table>
       </div>
        <div id="digital">
         <table class="digital grid" action="content.php?div=Digital"></table>
       </div>
    </div>

解释：

当使用 jquery-ui 选项卡时，充当 tab 的 标签不会被触发（ jquery 阻止它的点击事件，因为它实际上用作选项卡而不是链接），而且您的 html-tabs 代码将无法按预期工作（不会切换选项卡）导致 标记hash ( href="#something" ) 应该匹配它的 id ( id="something" )相应的容器（在本例中为 div ），而是将每个锚点关联到一个直接的 url 查询（ content.php?.. ），该查询永远不会被触发，在这种情况下也永远不会被触发也可以切换任何选项卡。

因此，简单的解决方案是让 标记充当选项卡，方法是放回 # + id （如我的示例中所示）并挂钩tabs ui 事件并从那里继续。

Answer 2

我可能会在这里遗漏一些细节，但也许值得将每个选项卡加载到自己的 .grid 中？这样就不可能从另一个选项卡错误地加载数据

将每个选项卡设置为具有完全不同的类的自己的网格：

<table class="productionGrid grid" action="div-d.php" title="detailed info">
<table class="digitalGrid grid" action="div-d.php" title="detailed info">

然后以相同、完全独立的方式使用 .loadGrid()：

$(function() {
    var productionGrid = $(".productionGrid").loadGrid({ ....});
    var digitalGrid = $(".digitalGrid").loadGrid({ ....});
});

然后在每个选项卡中包含一个 excel 导出按钮：

$('#productiontoexcel').live("click",function() {
    var productionsql = productionGrid.data().sql;
    $.ajax({
        url: "toExcel.php",
        data: "sql="+encodeURIComponent(productionsql),
    });
    productionsql = '';
});

...

$('#digitaltoexcel').live("click",function() {
    var digitalsql = digitalGrid.data().sql;
    $.ajax({
        url: "toExcel.php",
        data: "sql="+encodeURIComponent(digitalsql),
    });
    digitalsql = '';
});

我确信代码可以更好，但从简单开始并使其工作，然后在工作后添加复杂性和功能。

更新：显示代码后添加了更多具体细节

Answer 3

我可能会遗漏一些明显的东西，但我不知道你在哪里更新 digitalGrid.data().sql;除了默认值之外的任何内容。也许您想使用ajax的Success或Complete回调来重新加载数据。也就是说，可能会遗漏一些代码或处理此问题的网格工具固有的某些内容。

伪代码：

$.ajax({
        url: "toExcel.php",
        data: "sql="+encodeURIComponent(digitalsql),
success: function(data) {
    var grid = $(".grid").loadGrid({ data});
}
    });

Answer 4

从我在 OpenJS Grid 中看到的情况来看，该插件返回一个元素数组，因为您将其绑定到“.grid”。
在您的代码中，您有两次这样的情况，因此您将收到两个元素。

您可以尝试一下这是否有效：

// This has to return the productionGrid's data
var sql = $("[class*=productionGrid]").data().sql
// This has to return the digitalGrid's data
var sql = $("[class*=digitalGrid]").data().sql