Easyuis Treegrid Notes_jquery

EasyUI-Einführung

easyui ist eine Sammlung von Benutzeroberflächen-Plug-ins basierend auf jQuery.

easyui bietet die notwendige Funktionalität zum Erstellen moderner, interaktiver JavaScript-Anwendungen.

Mit easyui müssen Sie nicht viel Code schreiben. Sie müssen lediglich die Benutzeroberfläche definieren, indem Sie einige einfache HTML-Tags schreiben.

easyui ist ein vollständiges Framework, das HTML5-Webseiten perfekt unterstützt.

easyui spart Zeit und Umfang bei Ihrer Webentwicklung.

easyui ist sehr einfach, aber leistungsstark.

Es ist das erste Mal, dass ein Neuling es verwendet. Ich habe dennoch einige Umwege gemacht, indem ich auf die im Forum vorgestellten Methoden verwiesen und die aufgetretenen Probleme aufgezeichnet habe.

1. Der Wurzelknoten muss definiert sein;

2. Ein oder mehrere Wurzelknoten können verwendet werden

4. Das übergeordnete Knotenattribut des Wurzelknotens muss nicht definiert werden oder ist als 0 definiert

5. Der Attributname des übergeordneten Knotens muss auf allen Ebenen „_parentId“ lauten. Dieser Name wurde nicht in jquery.easyui.js definiert

6. Es ist nicht erforderlich, die JSON-Daten der „Baum“-Struktur im Hintergrund auszugeben.

Solange die JSON-Daten der folgenden Struktur im Front Desk angegeben sind Die Baumform kann erstellt und auf der Seite ausgegeben werden. (Ich habe gelernt, dass es auch eine Option ist, die Kinder im Baumformat im Hintergrund auszugeben.)

Das ist Aktion

{"total":17,"rows":[
{"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.0000,"Rem":"2"},{"id":10,"goodsid":36132,"Qty":1.0000,"Rem":"3"},{"id":11,"goodsid":36133,"Qty":1.0000,"Rem":"4"},{"id":12,"goodsid":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":16,"goodsid":36138,"_parentId":8,"Qty":3.0000,"Rem":"5"},{"id":17,"goodsid":36139,"_parentId":8,"Qty":1.0000,"Rem":"6"},{"id":18,"goodsid":36142,"_parentId":9,"Qty":1.0000,"Rem":"1"},{"id":19,"goodsid":36143,"_parentId":9,"Qty":1.0000,"Rem":"2"},{"id":20,"goodsid":36144,"_parentId":9,"Qty":1.0000,"Rem":"3"},{"id":21,"goodsid":36145,"_parentId":9,"Qty":1.0000,"Rem":"4"}
]}

Dies ist die Vorderansicht

var pls = ListAll(p.PartChild).ToList();
List<Object> result = new List<object>();
foreach(var item in pls)
{
if(item.PartParent == p.PartChild)
{
result.Add( new { id = item.ListID, goodsid = item.PartChild, Qty = item.Qty, Rem = item.Rem });
//下面是调用生成树形数据方法的语句,多余！easyui可根据parentID自动建树
//Object l = new { id = item.ListID, text = item.PartChild, _parentId = 0,Qty = item.Qty, Rem = item.Rem, chlidren = TreeList(pls, item.PartChild) };
//result.Add(l);
}
else
{
var parent = from a in pls
where a.PartChild == item.PartParent
select a;
result.Add(new { id = item.ListID, goodsid = item.PartChild, _parentId = parent.First().ListID, Qty = item.Qty, Rem = item.Rem });
}
} 

<div style="margin:20px 0;"></div>
<table title="Parts List" class="easyui-treegrid" style="height:250px" data-options="
url:'/ContosoBISite/PartsList/JList/',
method: 'get',
nowrap: false,
rownumbers: true,
animate: true,
collapsible: true,
fitColumns: true,
idField: 'id',
treeField: 'goodsid'
">
<thead>
<tr>
<th data-options="field:'goodsid'" width="100">goodsid</th>
<th data-options="field:'id'" width="100">ListID</th>
<th data-options="field:'ListVer'" width="100" align="right">ListVer</th>
<th data-options="field:'ParentName'" width="100">ParentName</th>
<th data-options="field:'Qty'" width="50">Qty</th>
<th data-options="field:'Rem'" width="50">Rem</th>
<th data-options="field:'_parentId'" width="50">parent</th>
</tr>
</thead>
</table> 

JS-Version:

jquery.easyui-1.4.3.min.js;

Bei dem obigen Inhalt handelt es sich um die Treegrid-Notizen von Easyui, die vom Herausgeber geteilt wurden. Ich hoffe, dass sie für alle hilfreich sind!