Question

我正在尝试使用jquery加载嵌套的gridview，但是如果用户已经加载了数据，我不想重新加载它。因为检索详细数据既费时又费钱。

方案：考虑国家和城市方案。城市将加载jquery。如果城市名称已经加载，我不想加载城市名称。

我试图通过检查是否存在数据明细行来设法不每次都加载数据。

但是，我无法展开和折叠详细信息行。请看看我的JavaScript

    <script type="text/javascript">
    $('.view').click(function () {
        var expand = $(this).attr("src"); // image like + and - to expand and collapse
        if (expand.includes("plus.png")) { // load details
            $(this).attr("src", "../images/minus.png");
            var ID = $(this).attr("data-id");
            if ($(this).closest('tr').next('tr').attr("id") != "bookings") { // checking if detail data TR already exist or not
                $(this).closest('tr').after('<tr id="bookings"><td colspan="100%" style="padding: 5px;"></td></tr>');
                $('#bookings td').load('conferenceBookerBookingList.aspx?conferenceBooker=' + ID + ' #bookingList');
            } else {
                $(this).closest('tr').next('tr').style.display = "block";
            }
        } else { // hide or collpase the detail row
            $(this).attr("src", "../images/plus.png");
            $('#bookings').remove(); // this will be remove if i manage to hide and show the detail row
            //if ($(this).closest('tr').next('tr').attr("id") != "bookings") {

            //}
        }
        return false;
    });
</script>

谢谢

Answer 1

这是我的最终剧本。一些客户的名称中带有“＆”字符。 Javascript encodeURI方法未编码“＆”字符。所以我的服务器端代码的东西还有更多的查询字符串参数。我通过用％26手动替换＆字符来解决。

                <script type="text/javascript">
                $('.view').on("click", function () {
                    var expand = $(this).attr("src");
                    var tr = $(this).closest("tr");
                    if (expand == "../images/expand.png") {                            
                        if (tr.next().find("table").length == 1) {
                            $(this).attr("src", "../images/collapse.png");
                            tr.next().show();
                            return;
                        }
                        tr.after("<tr id='bookings'><td colspan='100%' style='padding: 10px;'><img src='../images/Vanta.gif' align='middle'/> <span style='verticla-align: middle; padding-left: 5px; color: red; font-weight: bold;'> Please be patient, the data is loading</span></td></tr>");
                        var url = encodeURI("conferenceBooker=" + $(this).attr("data-id").replace("&", "%26") + "&startDate=" + $('.startDate').val() + "&endDate=" + $('.endDate').val() + "&venue=" + $('.venue').val());
                        $.get("test.aspx", url, function (data, status) {
                            if (status == "success") {
                                var resp = "<tr id='bookings'><td colspan='100%' style='padding: 10px;'>" + data + "</td></tr>";
                                tr.next().remove();
                                tr.after(resp);
                            }
                            if (status == "error") {
                                tr.next().remove();
                                tr.after("<tr id='bookings'><td colspan='100%' style='padding: 10px;'>Error occure during loading data</td></tr>");
                            }
                        });
                        $(this).attr("src", "../images/collapse.png");
                    } else {
                        $(this).attr("src", "../images/expand.png");
                        if (tr.next().find("table").length == 1) {
                            tr.next().hide();
                        }
                    }
                    return false;
                });
            </script>

使用jquery为非常大的数据加载嵌套的gridview

1 个答案: