使用jQuery easyUI 创建一个 RSS Feed阅读器

最新推荐文章于 2023-04-20 08:33:10 发布

雨泽

最新推荐文章于 2023-04-20 08:33:10 发布

阅读量2k

点赞数 1

分类专栏： javascript 文章标签： jquery rss border datagrid function div

javascript 专栏收录该内容

164 篇文章 0 订阅

订阅专栏

@author YHC

在这个教程中我们要去创建一个rss阅读器使用easyUI框架.

查看DEMO

我们将使用以下插件:

layout:创建一个应用程序界面.
datagrid: 显示rss feed列表.
tree:显示feed频道.

步骤1: 创建 Layout

<body class="easyui-layout">  
    <div region="north" border="false" class="rtitle">  
        jQuery EasyUI RSS Reader Demo  
    </div>  
    <div region="west" title="Channels Tree" split="true" border="false" style="width:200px;background:#EAFDFF;">  
        <ul id="t-channels" url="data/channels.json"></ul>  
    </div>  
    <div region="center" border="false">  
        <div class="easyui-layout" fit="true">  
            <div region="north" split="true" border="false" style="height:200px">  
                <table id="dg"   
                        url="get_feed.php" border="false" rownumbers="true"  
                        fit="true" fitColumns="true" singleSelect="true">  
                    <thead>  
                        <tr>  
                            <th field="title" width="100">Title</th>  
                            <th field="description" width="200">Description</th>  
                            <th field="pubdate" width="80">Publish Date</th>  
                        </tr>  
                    </thead>  
                </table>  
            </div>  
            <div region="center" border="false" style="overflow:hidden">  
                <iframe id="cc" scrolling="auto" frameborder="0" style="width:100%;height:100%"></iframe>  
            </div>  
        </div>  
    </div>  
</body>

步骤 2:datagrid处理事件

在这里我们要处理一些由用户触发的事件.

$('#dg').datagrid({  
    onSelect: function(index,row){  
        $('#cc').attr('src', row.link);  
    },  
    onLoadSuccess:function(){  
        var rows = $(this).datagrid('getRows');  
        if (rows.length){  
            $(this).datagrid('selectRow',0);  
        }  
    }  
});

这个示例使用了' onSelect'事件显示 feed 的内容和'onLoadSuccess'事件选择第一行.

步骤3:处理tree事件

当tree数据已经加载,我们需要去选择第一个叶子节点,调用' select'方法去选择那个节点,使用' onSelect'事件去得到选择节点,所以我们能得到对应的'url'值

最终我们调用datagrid 的'load'方法去刷新feed 列表数据.

$('#t-channels').tree({  
    onSelect: function(node){  
        var url = node.attributes.url;  
        $('#dg').datagrid('load',{  
            url: url  
        });  
    },  
    onLoadSuccess:function(node,data){  
        if (data.length){  
            var id = data[0].children[0].children[0].id;  
            var n = $(this).tree('find', id);  
            $(this).tree('select', n.target);  
        }  
    }  
});