jQuery EasyUI 应用 – 创建 RSS Feed 阅读器
RSS（Really Simple Syndication）阅读器是一种常见的网络应用，用于订阅和浏览多个新闻源的更新。本教程将展示如何使用 jQuery EasyUI 框架创建一个简单的 RSS 阅读器。
应用布局：
- 左侧：tree 显示频道分类（Channels Tree）。
- 上部中心：datagrid 显示选定频道的文章列表。
- 下部中心：iframe 或 panel 显示文章详细内容。
我们将使用以下 EasyUI 插件：
- layout：整体页面布局。
- tree：频道树。
- datagrid：文章列表。
- panel 或 iframe：内容显示。
官方教程参考：https://www.jeasyui.com/tutorial/app/rssreader.php
在线 Demo：https://www.jeasyui.com/tutorial/app/rssreader/
步骤 1: 引入 EasyUI 资源
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>步骤 2: 创建页面布局和组件
<body class="easyui-layout">
<div region="north" border="false" style="height:60px;background:#EAFDFF;padding:10px;font-size:24px;">
jQuery EasyUI RSS 阅读器 Demo
</div>
<div region="west" title="频道树" split="true" style="width:200px;">
<ul id="t-channels" class="easyui-tree" data-options="url:'channels.json',lines:true"></ul>
</div>
<div region="center">
<div class="easyui-layout" fit="true">
<div region="north" split="true" style="height:250px;">
<table id="dg" class="easyui-datagrid" fit="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="title" width="80%">标题</th>
<th field="pubDate" width="20%">发布日期</th>
</tr>
</thead>
</table>
</div>
<div region="center">
<iframe id="cc" frameborder="0" style="width:100%;height:100%;"></iframe>
</div>
</div>
</div>
</body>步骤 3: JavaScript 实现交互逻辑
<script type="text/javascript">
$(function(){
// 频道树事件
$('#t-channels').tree({
onSelect: function(node){
if (node.attributes && node.attributes.url){
$('#dg').datagrid('load', {
url: node.attributes.url // 假设后端代理解析 RSS
});
}
},
onLoadSuccess: function(node, data){
if (data.length > 0){
// 默认选中第一个叶子节点（第一个频道）
var firstChild = data[0].children[0].children[0];
var n = $(this).tree('find', firstChild.id);
$(this).tree('select', n.target);
}
}
});
// 数据网格事件
$('#dg').datagrid({
onSelect: function(index, row){
$('#cc').attr('src', row.link); // 在 iframe 中打开文章链接
},
onLoadSuccess: function(){
var rows = $(this).datagrid('getRows');
if (rows.length > 0){
$(this).datagrid('selectRow', 0); // 默认选中第一篇文章
}
}
});
});
</script>步骤 4: 数据准备
- channels.json：频道树数据（静态或动态生成）。
[{
"id": 1,
"text": "新闻分类",
"children": [{
"id": 11,
"text": "技术新闻",
"children": [{
"id": 111,
"text": "jQuery EasyUI 博客",
"attributes": {"url": "proxy.php?feed=https://www.jeasyui.com/blog/feed"}
}, {
"id": 112,
"text": "CNN Tech",
"attributes": {"url": "proxy.php?feed=http://rss.cnn.com/rss/cnn_tech.rss"}
}]
}]
}]- 后端代理（proxy.php）：由于浏览器同源策略，不能直接 AJAX 加载外部 RSS XML。需要服务器端代理解析 RSS 并返回 JSON。
示例 PHP（使用 SimpleXML）：
<?php
header('Content-Type: application/json');
$feed_url = $_GET['feed'];
$xml = simplexml_load_file($feed_url);
$items = [];
foreach ($xml->channel->item as $item) {
$items[] = [
'title' => (string)$item->title,
'link' => (string)$item->link,
'pubDate' => (string)$item->pubDate,
'description' => (string)$item->description
];
}
echo json_encode(['rows' => $items]);
?>关键说明
- 频道选择：点击树叶子节点，加载对应 RSS 的文章列表到 datagrid。
- 文章浏览：选中 datagrid 行，在下方 iframe 中直接打开链接（安全且简单）。
- 默认加载：树加载成功后自动选中第一个频道和第一篇文章。
- 注意事项：直接从客户端解析外部 RSS 会受 CORS 限制，必须使用服务器代理（如上 PHP 示例）或第三方服务。
扩展建议
- 在 datagrid 中添加 “description” 列显示摘要。
- 使用 panel + content 代替 iframe，直接显示文章描述（避免跨域问题）。
- 支持搜索、刷新按钮等。
更多示例：
- 官方 RSS 阅读器：https://www.jeasyui.com/tutorial/app/rssreader.php
- Demo 下载（官方提供 zip）：可在教程页查找。
如果需要完整源码、更多频道示例、或纯客户端解析（使用 Yahoo YQL 等旧服务），请提供更多细节！
