aplikasi jQuery EasyUI - Buat Feed Reader RSS
Dalam tutorial ini, kita akan membuat sebuah RSS reader dengan kerangka jQuery EasyUI.
Kami akan menggunakan berikut plug-in:
- Tata letak: Buat aplikasi antarmuka pengguna.
- datagrid: Tampilan RSS daftar Pakan.
- Pohon: saluran pakan Display.
Langkah 1: Buat Tata Letak (Layout)
& Lt; class tubuh = "easyui-layout" & gt; <Wilayah Div = "utara" border = "false" class = "rtitle"> jQuery EasyUI RSS Reader Demo </ Div> <Wilayah Div = "barat" title = "Saluran Pohon" split = "true" border = "false" style = "width: 200px; background: #EAFDFF;"> <Ul id = "t-saluran" url = "data / channels.json"> </ ul> </ Div> <Wilayah Div = "center" border = "false"> <Div class = "easyui-layout" cocok = "true"> <Wilayah Div = "utara" 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"> Judul </ th> <Bidang Th = "description" width = "200"> Deskripsi </ th> <Th field = "pubdate" width = "80"> Publish Tanggal </ th> </ Tr> </ Thead> </ Table> </ Div> <Wilayah Div = "center" border = "false" style = "overflow: hidden"> <Iframe id = "cc" scrolling = "auto" frameborder = "0" style = "width: 100%; height: 100%"> </ iframe> </ Div> </ Div> </ Div> & Lt; / body & gt;
Langkah 2: Data Grid (datagrid) untuk menangani peristiwa
Di sini kita harus berurusan dengan beberapa peristiwa yang dipicu oleh pengguna.
$ ( '# Dg'). Datagrid ({ onselect: function (index, baris) { . $ ( '# Cc') attr ( 'src', row.link); }, onLoadSuccess: function () { var rows = $ (ini) .datagrid ( 'GetRows'); jika (rows.length) { $ (Ini) .datagrid ( 'selectRow', 0); } } });
Contoh ini menggunakan acara 'onselect' untuk menampilkan isi feed, untuk memilih penggunaan baris pertama acara 'onLoadSuccess'.
Langkah 3: Pohon menu (Pohon) peristiwa pengolahan
Ketika pohon menu (Pohon) data telah dimuat, kita perlu memilih node daun pertama, memanggil metode 'pilih' untuk memilih node. Acara Gunakan 'onselect' untuk mendapatkan node yang dipilih, sehingga kita bisa mendapatkan 'url' sesuai dengan nilai. Akhirnya, kita sebut data grid (datagrid) metode 'beban' untuk me-refresh daftar data pakan.
$ ( '# T-saluran'). Pohon ({ onselect: function (node) { var url = node.attributes.url; $ ( '# Dg'). Datagrid ( 'beban', { url: url }); }, onLoadSuccess: function (node, data) { jika (data.length) { var id = Data [0] .children [0] .children [0] .id; var n = $ (ini) .tree ( 'menemukan', id); $ (Ini) .tree ( 'pilih', n.target); } } });