1

私はいくつかの jQuery ライブラリを試しましたが、今のところ Flexigrid が一番気に入っています。ただし、テーブル データを提供する Web サービスを書き直す必要があるようです。できればこれは避けたいです。私のコードは以下です。結果は素晴らしいように見えますが、並べ替えは機能しません。

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>
4

1 に答える 1

1

これを見たいと思うかもしれませんhttp://pixelnix.com/flexigrid-jquery-plugin-extending-to-allow-sorting-of-static-grids/

これはソートの問題を解決するかもしれませんが、flexigrid はページネーション、ページネーション サイズの変更などに AJAX を広範囲に使用します。

また、このスレッドFlexigrid not pageingを見てください

お役に立てれば。

于 2013-01-05T17:53:08.647 に答える