jEasyUI mencipta pembaca RSS
Dalam tutorial ini, kami akan mencipta pembaca RSS melalui rangka kerja jQuery EasyUI.
Kami akan menggunakan pemalam berikut:
reka letak: Cipta antara muka pengguna apl.
datagrid: Paparkan senarai Suapan RSS.
pokok: Paparkan saluran suapan.
Langkah 1: Buat Reka Letak
<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>
Langkah 2: DataGrid mengendalikan acara
Di sini kita perlu mengendalikan beberapa Peristiwa yang dicetuskan oleh pengguna.
$('#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);
}
}
});Contoh ini menggunakan acara 'onSelect' untuk memaparkan kandungan suapan dan acara 'onLoadSuccess' untuk memilih baris pertama.
Langkah 3: Menu pokok (Pokok) mengendalikan acara
Apabila data menu pokok (Pokok) telah dimuatkan, kita perlu memilih nod daun pertama dan memanggil kaedah 'pilih' untuk pilih nod. Gunakan acara 'onSelect' untuk mendapatkan nod yang dipilih supaya kita boleh mendapatkan nilai 'url' yang sepadan. Akhir sekali, kami memanggil kaedah 'beban' DataGrid untuk menyegarkan semula data senarai suapan.
$('#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);
}
}
});
