Einführung in Easyui
Easyi ist eine Sammlung von User Interface -Plugins basierend auf JQuery.
Easyi bietet die erforderlichen Funktionen für die Erstellung moderner, interaktiver und JavaScript -Anwendungen.
Mit Easyi müssen Sie nicht viel Code schreiben. Sie müssen nur einige einfache HTML -Tags schreiben, um die Benutzeroberfläche zu definieren.
Easyi ist ein komplettes Framework, das HTML5 -Webseiten perfekt unterstützt.
EasyUi spart Ihnen Zeit und Skala für die Webentwicklung.
Easyui ist einfach, aber mächtig.
Als ich es zum ersten Mal benutzte, nahm ich immer noch einige Umwege in der im Forum eingeführten Referenzmethode und zeichnete die Probleme auf, auf die ich gestoßen bin.
1. Der Wurzelknoten muss definiert werden;
2. Ein oder mehrere Wurzelknoten können verwendet werden;
4. Das übergeordnete Knotenattribut des Stammknotens muss nicht definiert werden oder ist als 0 definiert;
5. Der übergeordnete Notenattributname von untergeordneten Knoten auf jeder Ebene muss "_parentid" sein, und es kann kein anderer Name verwendet werden. Dieser Name wurde in jQuery.easyui.js definiert;
6. Es ist nicht erforderlich, JSON -Daten in der "Baum" -Struktur in der Hintergrundaktion auszugeben. Solange der JSON der folgenden Struktur dem Baumegrid in der Rezeption gegeben wird, können Sie eine Baumausgabe auf der Seite erstellen. (Es ist auch eine Option, den Hintergrund im baumförmigen Kinderformat auszugeben.)
{"Total": 17, "Zeilen": [{"ID": 3, "GoodSId": 36120, "Qty": 2.0000, "Rem": "15"}, {"id": 4, "GoodSId": 36123, "Qty": 1.0000, "Rem": "21"}, {"ID": 5, "Goodsid": 36124, "Qty": 2.0000, "Rem": "23"}, {"ID": 8, "GoodSId": 36130, "Qty": 1.0000, "Rem": "1"}, {"ID": 9, "GoodSID": 36131, qty ": 1.0 000, "Rem": "2"}, {"ID": 10, "GoodSId": 36132, "Qty": 1.0000, "Rem": "3"}, {"ID": 11, "Goodsid": 36133, "Qty": 1.0000, "Rem": "4"}, {"id": 12, 12, ": 12,": 12, ": 12,": 12, ": 12,": 12, ": 12,": 12 " oodsid":36134,"_parentId":8,"Qty":1.0000,"Rem":"1"},{"id":13,"goodsid":36135,"_parentId":8,"Qty":2.0000,"Rem":"2"},{"id":14, "Goodsid": 36136, "_ ParentID": 8, "Qty": 1.0000, "Rem": "3"}, {"ID": 15, "Goodsid": 36137, "_ Parentid": 8, "Qty": 1.0000, "Rem": "4"}, {"id": 1 6, "Goodsid": 36138, "_ Parentid": 8, "Qty": 3.0000, "Rem": "5"}, {"ID": 17, "Goodsid": 36139, "_ Parentid": 8, "Qty": 1.0000, "Rem": "6"}, {"id" "id". : 18, "goodId": 36142, "_ parentId": 9, "qty": 1.0000, "rem": "1"}, {"id": 19, "goodsid": 36143, "_ parentId": 9, "qty": 1.0000, "rem": "2"}, {"i D ": 20," Goodsid ": 36144," _ Parentid ": 9," Qty ": 1.0000," Rem ":" 3 "}, {" id ": 21," Goodsid ": 36145," _ Parentid ": 9," Qty ": 1.0000," Rem ":" 4 "}]}}}]}Dies ist eine Aktion
var pls = listAll (P.PartChild) .tolist (); list <FOLGEL> ERGEBNIS = NEUE LIST <OBFORM> (); foreach (var item in pls) {if (item.PartParent == P.PartChild) {Ergebnis. Datenmethode, überflüssig! Easyi kann automatisch einen Baum erstellen, der auf ParentID basiert // Objekt l = new {id = item.ListId, text = item.PartChild, _parentid = 0, qty = item.qty, rem = item.rem, Chlidren = Treelist (pls, item.Partchild)}; item.PartParentSelect a; result.add (neu {id = item.Listid, GoodSId = item.PartChild, _parentid = parent.first (). ListId, qty = item.qty, Rem = item.rem});}}Dies ist die Ansicht an der Rezeption
<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: 'giodSId'"> <trefield: 'goodSId' "> goodsid </th data-options =" Feld: 'id' "> listId </thdata-options =" Feld: 'Listver' "Align =" rechts "> listver </th> <th Data-options =" Feld: "Feld:" Elternname "-Elternname" Elternname "-ParentName '"-Elternname "Elternname"-parentname' "termateName '" Data-Options = "Feld: 'qty'"> Qty </th> <th data-options = "field: 'rem'"> rem </th> <th data-options = "field: '_ parentId'"> übergeordnet </th> </tr> </thead> </table>
JS-Version: jQuery.easyui-1.4.3.min.js; JQuery-1.11.3.Min.js
Der obige Inhalt ist die Easyui TreeGrid Notes, die vom Editor geteilt werden. Ich hoffe, es wird für alle hilfreich sein!