jQuery EasyUI使用教程之建立一個RSS閱讀器

<jQuery EasyUI最新版下載>

在本文中，咱們將使用jQuery EasyUI框架建立一個RSS閱讀器。

查看演示

咱們將使用如下插件：

• layout：建立應用程序的用戶界面

• datagrid：顯示RSS Feed列表

• tree：顯示Feed頻道

Step 1：建立佈局

< 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 >

Step 2：處理數據網格的事件

在這裏，咱們須要處理一些由用戶觸發的事件。

$( '#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'事件來選擇第一行。

Step 3：處理tree的事件

當tree數據被加載時，咱們須要選擇第一個子節點，調用'select'方法來選擇該節點。使用'onSelect'事件來得到被選擇的節點，這樣就能獲得對應的'url'值。最後，咱們調用數據網格的'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);

}

}

});

下載該EasyUI示例：jeasyui-app-rssreader.zip