Easyui의 Treegrid Notes_jquery

EasyUI 소개

easyui는 jQuery를 기반으로 한 사용자 인터페이스 플러그인 모음입니다.

easyui는 최신 대화형 JavaScript 애플리케이션을 만드는 데 필요한 기능을 제공합니다.

easyui를 사용하면 많은 코드를 작성할 필요가 없으며 간단한 HTML 태그만 작성하여 사용자 인터페이스를 정의하면 됩니다.

easyui는 HTML5 웹페이지를 완벽하게 지원하는 완전한 프레임워크입니다.

easyui는 웹 개발 시간과 규모를 줄여줍니다.

easyui는 매우 간단하지만 강력합니다.

초보자가 처음 사용하는 기능인데 그래도 포럼에 소개된 방법들을 참고해서 우회해서 겪은 문제들을 기록해두었습니다.

1. 루트 노드를 정의해야 합니다.

2. 하나 이상의 루트 노드를 사용할 수 있습니다.

4. 루트 노드의 상위 노드 속성은 정의할 필요가 없거나 0으로 정의됩니다.

5. 모든 수준의 하위 노드의 상위 노드 속성 이름은 "_parentId"여야 하며, 이 이름은 jquery.easyui.js에 정의되어 있습니다.

6. 백그라운드 ACTION

에서 "tree" 구조의 json 데이터를 출력할 필요는 없습니다. 프론트 데스크의 트리그리드에 다음 구조의 json을 주면 됩니다. 트리 모양을 설정하여 페이지에 출력할 수 있습니다. (백그라운드에서 아이들을 트리 형식으로 출력하는 것도 옵션이라는 것을 알게 되었습니다.)

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

이것이 액션입니다

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 버전:

jquery.easyui-1.4.3.min.js
위 내용은 에디터가 공유한 Easyui의 Treegrid 노트입니다. 모두에게 도움이 되었으면 좋겠습니다!