Notes_jquery de la grille arborescente d'Easyui-js tutoriel-php.cn

Notes_jquery de la grille arborescente d'Easyui

WBOY

Libérer： 2016-05-16 15:02:59

original

2350 Les gens l'ont consulté

Introduction à EasyUI

easyui est une collection de plug-ins d'interface utilisateur basés sur jQuery.

easyui fournit les fonctionnalités nécessaires pour créer des applications JavaScript modernes et interactives.

En utilisant easyui, vous n'avez pas besoin d'écrire beaucoup de code. Il vous suffit de définir l'interface utilisateur en écrivant quelques balises HTML simples.

easyui est un framework complet qui supporte parfaitement les pages web HTML5.

easyui fait gagner du temps et de l'ampleur à votre développement web.

easyui est très simple mais puissant.

C'est ma première fois pour un débutant. J'ai quand même fait quelques détours en me référant aux méthodes présentées dans le forum et enregistré les problèmes que j'ai rencontrés.

1. Le nœud racine doit être défini

2. Un ou plusieurs nœuds racines peuvent être utilisés

4. L'attribut du nœud parent du nœud racine n'a pas besoin d'être défini, ou est défini comme 0 ;

5. Le nom d'attribut du nœud parent des nœuds enfants à tous les niveaux doit être "_parentId", et d'autres noms ne peuvent pas être utilisés. Ce nom a été défini dans jquery.easyui.js ;

6. Il n'est pas nécessaire de sortir les données json de la structure "arborescente" en arrière-plan ACTION

Tant que le json de la structure suivante est donné à la grille arborescente à la réception, l'arborescence. la forme peut être établie et affichée sur la page. (J'ai appris que la sortie des enfants sous forme d'arborescence en arrière-plan est également une option.)

{"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"}
]}

Copier après la connexion

C'est Action

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

Copier après la connexion

Voici la vue de face

<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>

Copier après la connexion

Version JS :

jquery.easyui-1.4.3.min.js; jquery-1.11.3.min.js
Le contenu ci-dessus est constitué des notes Treegrid d'Easyui partagées par l'éditeur. J'espère qu'il sera utile à tout le monde !