Question

我尝试了一些jQuery库，到目前为止我最喜欢Flexigrid。但是，似乎我需要重写提供表数据的Web服务。如果可能的话，我想避免这种情况。我的代码如下。结果看起来很棒，但排序不起作用。

我可以在不重写网络服务的情况下修复它吗？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Pending Server Requests</title>
    <script src="scripts/jquery-1.7.1.min.js"></script>
    <link href="css/site.css" rel="stylesheet" />
    <link href="css/flexigrid.css" rel="stylesheet" />
    <link href="css/flexigrid.pack.css" rel="stylesheet" />
    <script src="Scripts/flexigrid.pack.js"></script>
    <script src="Scripts/flexigrid.js"></script>
    <script src="scripts/functions.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#status').html("Loading Report...");
            $.ajax({
                url: 'reportdata.asmx/rptPendingServerRequests',
                type: 'POST',
                dataType: 'xml',
                success: function (data) {
                    $('#status').html("");
                    $(data).find("Table").each(function () {
                        request_id = $(this).find("request_id").text().toString();
                        status = $(this).find("status").text().toString();
                        req_by_user_id = $(this).find("req_by_user_id").text().toString();
                        $('#report tr:last').after('<tr id="' + request_id + '"><td class="id cell">' + request_id + '</td><td class="status cell">' + getStatus(status) + '</td><td class="user cell">' + req_by_user_id + '</td><td class="link cell"><a href="urlredacted' + request_id + '" target="_blank">View Request</a></span></td></tr>');
                    });
                    $('#report').flexigrid({
                        colModel: [
                            { display: 'ID', name: 'id', width: 40, sortable: true, align: 'center' },
                            { display: 'Status', name: 'status', width: 180, sortable: true, align: 'left' },
                            { display: 'Requested By', name: 'requested_by', width: 120, sortable: true, align: 'left' },
                            { display: 'Link', name: 'link', width: 120, sortable: false, align: 'left' }
                        ],
                        sortname: "id",
                        sortorder: "asc",
                        usepager: false,
                        title: 'Server Requests',
                        useRp: true,
                        rp: 15,
                        showTableToggleBtn: true,
                        width: 700,
                        height: 200
                    });
                },
                error: function (a, b, c) {
                    $('#status').html("Error: " + a.toString() + " " + b.toString() + " " + c.toString());
                }
            });
        });
    </script>
</head>
<body>
    <h1>Pending Server Requests</h1>
    <div id="content">
        <table id="report">
<!--            <thead>
                <tr>
                    <td class="id header">ID</td>
                    <td class="status header">Status</td>
                    <td class="user header">Requested By</td>
                    <td class="header">Link</td>
                </tr>
            </thead>-->
            <tbody>
                <tr style="display:none;"><td>test</td><td>test2</td><td>test3</td><td>test4</td></tr>
            </tbody>
        </table>

    </div>
    <div id="status">NULL</div>
</body>
</html>

Answer 1

您可能需要查看此http://pixelnix.com/flexigrid-jquery-plugin-extending-to-allow-sorting-of-static-grids/

这可能会解决您的排序问题，但flexigrid会广泛使用AJAX进行分页，更改分页大小等。我已经沿着这条路走下去了，强烈建议重新编写您的Web服务来处理服务器端的这些调用。

另请查看此帖子Flexigrid not paging

希望这有帮助。

排序ajax表客户端

1 个答案: