Pengantar easyui
Easyi adalah kumpulan plugin antarmuka pengguna berdasarkan jQuery.
Easyi menyediakan fitur yang diperlukan untuk membuat aplikasi JavaScript modern, interaktif,.
Menggunakan Easyi Anda tidak perlu menulis banyak kode, Anda hanya perlu menulis beberapa tag HTML sederhana untuk menentukan antarmuka pengguna.
Easyi adalah kerangka kerja lengkap yang sangat mendukung halaman web HTML5.
Easyui menghemat waktu dan skala pengembangan web Anda.
Easyui sederhana tapi kuat.
Ketika saya menggunakannya untuk pertama kalinya, saya masih mengambil beberapa jalan memutar dalam metode referensi yang diperkenalkan di forum dan mencatat masalah yang saya temui.
1. Node root harus didefinisikan;
2. Satu atau lebih node root dapat digunakan;
4. Atribut node induk dari simpul root tidak perlu didefinisikan, atau didefinisikan sebagai 0;
5. Nama atribut node induk node anak di setiap level harus "_parentid", dan tidak ada nama lain yang dapat digunakan. Nama ini telah didefinisikan dalam jQuery.easyui.js;
6. Tidak perlu mengeluarkan data JSON dalam struktur "pohon" dalam aksi latar belakang. Selama JSON dari struktur berikut diberikan kepada TreeGrid di meja depan, Anda dapat membuat output pohon ke halaman. (Ini juga merupakan opsi untuk mengeluarkan latar belakang dalam format anak-anak berbentuk pohon.)
{"Total": 17, "Baris": [{"id": 3, "GoodSid": 36120, "Qty": 2.0000, "Rem": "15"}, {"id": 4, "Goodid": 36123, "qty": 1.0000, "rem": "21"}, {"ID": " 5, "GoodSID": 36124, "Qty": 2.0000, "Rem": "23"}, {"id": 8, "Goodid": 36130, "Qty": 1.0000, "REM": "1"}, {"id": "Goodid": 36131, "Qty": 1.0 000, "rem": "2"}, {"id": 10, "goodid": 36132, "qty": 1.0000, "rem": "3"}, {"id": 11, "goodid": 36133, "qty": 1.0000, "rem": "4"}, "ID": 12, "G oodsid ": 36134," _ ParentId ": 8," qty ": 1.0000," rem ":" 1 "}, {" id ": 13," Goodid ": 36135," _ Parentid ": 8," Qty ": 2.0000," REM ":" 2 "}, {" ID ": 14, "GoodsId": 36136, "_ ParentId": 8, "Qty": 1.0000, "Rem": "3"}, {"id": 15, "Goodid": 36137, "_ ParentId": 8, "Qty": 1.0000, "REM": "4"}, {"ID": 1 6, "GoodSID": 36138, "_ ParentId": 8, "Qty": 3.0000, "Rem": "5"}, {"id": 17, "Goodid": 36139, "_ Parentid": 8, "Qty": 1.0000, "REM": "6"}, {"ID" : 18, "GoodSID": 36142, "_ Parentid": 9, "Qty": 1.0000, "Rem": "1"}, {"id": 19, "Goodid": 36143, "_ ParentID": 9, "Qty": 1.0000, "REM": "2"}, {"I. D ": 20," Goodid ": 36144," _ ParentId ": 9," Qty ": 1.0000," Rem ":" 3 "}, {" id ": 21," Goodid ": 36145," _ ParentId ": 9," Qty ": 1.0000," REM ":" 4 "}]}Ini adalah tindakan
var pls = listAll (p.partchild) .tolist (); Daftar <Poles> result = Daftar baru <pes object> (); foreach (var item di pls) {if (item.partParent == p.partchild) {hasilnya. Metode data pohon, berlebihan! Easyi dapat secara otomatis membuat pohon berdasarkan ParentId // objek l = baru {id = item.listId, text = item.partchild, _parentId = 0, qty = item.qty, rem = item.rem, chlidren = treelist (pls, item.partchild)}; // result.add (l);}}} {pls, a pLaS.PartChild) {PLS.PARTCHD) {PLS. item.partParentselect a; result.add (baru {id = item.listId, goodsid = item.partchild, _parentId = parent.first (). ListId, qty = item.qty, rem = item.rem});}}Ini adalah tampilan meja depan
<div style="margin:20px 0;"></div><table style="height:250px" data-options="url:'/ContosoBISite/PartsList/JList/',method: 'get',nowrap: false,rownumbers: true,animate: true,collapse: true,collapse: true,fitColumns: true,idField: 'id',treeField: 'goodsid'"><treeField: 'goodsid'"><treeField: 'goodsid'">goodsid</th><th data-options="field:'id'">ListID</th><th data-options="field:'ListVer'" align="right">ListVer</th><th data-options="field:'ParentName'">ParentName</th><th data-options = "bidang: 'qty'"> qty </t> <th data-options = "field: 'rem'"> rem </th> <tH data-options = "field: '_ ParentId'"> Parent </th> </tr> </ thead> </jukan>
Versi JS: jQuery.easyui-1.4.3.min.js; jQuery-1.11.3.min.js
Konten di atas adalah catatan TreeGrid Easyui yang dibagikan oleh editor. Saya harap ini akan membantu semua orang!