REST WCF + jQuery EasyUI 应用
在 《RESTful WCF Services (2) (实现增，删，改，查) 》中实现了RESTful WCF 的服务端，本篇文章结合现在很火的 jQuery EasyUI 做一个客户端的示例。
关于 jQuery 的导入：
<script type="text/javascript" src="UI/scripts/jquery-1.4.4.min.js"></script>
一定不能写成 <script ... />， 一开始犯了这个错误找了好久 T_T
jQuery EasyUI DataGrid 的数据加载，
1. json的格式有要求： 必须有 rows 属性。比如： var json = {rows:[]};
2. 一般的方式是通过配置 datagrid 的 url 属性：（xxx.aspx 可以是任何返回 json 格式的url）$('#test').datagrid({
url: xxx.aspx
});
3.通过 $('#test').datagrid('loadData', data); 加载
因为服务端返回的是 List<T> 的数据，所以需要在客户端组装成 EasyUI datagrid 要求的格式。
(1) 先通过 $.getJSON(url) 获取json
(2) 然后交给准备好的 data.rows
function Refresh() {
var data = { total: 0, rows: [] };
var jqxhr = $.getJSON("TaskService/Tasks/All", function (json) {
data.rows = json;
$('#test').datagrid('loadData', data);
});
}
完整的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>My Task List EasyUI</title>
<link rel="stylesheet" type="text/css" href="UI/themes/default/easyui.css" mce_href="UI/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="UI/themes/icon.css" mce_href="UI/themes/icon.css">
<mce:script type="text/javascript" src="UI/scripts/jquery-1.4.4.min.js" mce_src="UI/scripts/jquery-1.4.4.min.js"></mce:script>
<mce:script type="text/javascript" src="UI/scripts/jquery.easyui.min.js" mce_src="UI/scripts/jquery.easyui.min.js"></mce:script>
<mce:script type="text/javascript"><!--
$(function () {
$('#test').datagrid({
title: 'My TaskList',
iconCls: 'icon-ok',
width: 550,
height: 260,
nowrap: false,
striped: true,
collapsible: true,
sortName: 'ID',
sortOrder: 'asc',
remoteSort: false,
idField: 'ID',
columns: [[
{ field: 'ck', checkbox: true },
{ field: 'ID', title: 'ID', width: 50, sortable: true },
{ field: 'Title', title: 'Title', width: 150, sortable: true,
sorter: function (a, b) {
return (a > b ? 1 : -1);
}
},
{ field: 'Detail', title: 'Detail', width: 250, sortable: true },
{ field: 'State', title: 'State', width: 50, sortable: true }
]],
pagination: true,
rownumbers: false
});
Refresh();
var p = $('#test').datagrid('getPager');
if (p) {
$(p).pagination({
onBeforeRefresh: function () {
Refresh();
}
});
}
});
function Refresh() {
var data = { total: 0, rows: [] };
var jqxhr = $.getJSON("TaskService/Tasks/All", function (json) {
data.total = json.length;
data.rows = json;
$('#test').datagrid('loadData', data);
});
}
// --></mce:script>
</head>
<body>
<h1>Task List</h1>
<table id="test"></table>
</body>
</html>
这样就可以通过winform客户端增加，通过浏览器查看：