zoukankan      html  css  js  c++  java
  • 雷林鹏分享:jQuery EasyUI 应用

      jQuery EasyUI 应用 - 创建 RSS Feed 阅读器

      在本教程中,我们将通过 jQuery EasyUI 框架创建一个 RSS 阅读器。

      我们将使用以下插件:

      layout:创建应用的用户界面。

      datagrid:显示 RSS Feed 列表。

      tree:显示 feed 频道。

      步骤 1:创建布局(Layout)

      <body class="easyui-layout">

      

      jQuery EasyUI RSS Reader Demo

      

      

      

        

        

        

        

        

        url="get_feed.php" border="false" rownumbers="true"

        fit="true" fitColumns="true" singleSelect="true">

        

        

        

        

        

        

        

        

      TitleDescriptionPublish Date

        

        

        

        

        

        

        </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);

        }

        }

        });

        下载 jQuery EasyUI 实例

        jeasyui-app-rssreader.zip

        本文转载自:w3cschool(编辑:雷林鹏 来源:网络 侵删)

    • 相关阅读:
      FASTJSON
      数据库索引(转)
      设计模式
      jQuery EasyUI教程之datagrid应用(三)
      EasyUI---tree
      EasyUI、Struts2、Hibernate、spring 框架整合
      eclipse最有用快捷键整理
      框架整合----------Hibernate、spring整合
      jQuery EasyUI教程之datagrid应用(二)
      marquee 标签 文字滚动
    • 原文地址:https://www.cnblogs.com/pengpeng1208/p/10869020.html
    Copyright © 2011-2022 走看看