Pelajari pemalam jQuery dengan mudah EasyUI EasyUI mencipta RSS Feed reader

Pelajari pemalam jQuery dengan mudah EasyUI EasyUI mencipta RSS Feed reader_jquery

WBOY

Lepaskan： 2016-05-16 15:28:37

asal

1304 orang telah melayarinya

Contoh dalam artikel ini menerangkan penciptaan pembaca RSS melalui rangka kerja jQuery EasyUI dan berkongsinya dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Tangkapan skrin kesan berjalan adalah seperti berikut:

Kami akan menggunakan pemalam berikut:
reka letak: Mencipta antara muka pengguna aplikasi.
datagrid: Paparkan senarai Suapan RSS.
pokok: Tunjukkan 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>

Salin selepas log masuk

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

Salin selepas log masuk

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 memilih 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);
 }
 }
});

Salin selepas log masuk

Di atas ialah tutorial yang berkaitan tentang mencipta pembaca Suapan RSS dengan EasyUI. Saya harap ia akan membantu pembelajaran semua orang.