我已经尝试了一些 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>