Easyui 소개
Easyi는 jQuery를 기반으로하는 사용자 인터페이스 플러그인 모음입니다.
Easyi는 현대적이고 대화식 JavaScript 응용 프로그램을 만드는 데 필요한 기능을 제공합니다.
Easyi를 사용하면 많은 코드를 작성할 필요가 없으므로 사용자 인터페이스를 정의하기 위해 간단한 HTML 태그를 작성하면됩니다.
Easyi는 HTML5 웹 페이지를 완벽하게 지원하는 완벽한 프레임 워크입니다.
EasyUi는 웹 개발의 시간과 규모를 절약합니다.
Easyui는 단순하지만 강력합니다.
처음으로 그것을 사용할 때, 나는 포럼에 소개 된 참조 방법에서 우회를하고 내가 직면 한 문제를 기록했습니다.
1. 루트 노드는 정의되어야합니다.
2. 하나 이상의 루트 노드를 사용할 수 있습니다.
4. 루트 노드의 상위 노드 속성은 정의 될 필요가 없거나 0으로 정의됩니다.
5. 각 레벨에서 자식 노드의 부모 노드 속성 이름은 "_parentid"여야하며 다른 이름을 사용할 수 없습니다. 이 이름은 jquery.easyui.js에서 정의되었습니다.
6. 배경 동작에서 "트리"구조에서 JSON 데이터를 출력 할 필요가 없습니다. 다음 구조의 JSON이 프론트 데스크의 TreeGrid에 제공되는 한 페이지에 트리 출력을 만들 수 있습니다. (또한 나무 모양의 어린이 형식의 배경을 출력하는 옵션입니다.)
{ "total": 17, "행": [{ "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": "goodsid": 36131, "Qty": 1.0 000, "rem": "2"}, { "id": 10, "goodsid": 36132, "Qty": 1.0000, "rem": "3"}, { "id": "11,"goodsid ":"Qty ": 1.0000,"rem ":"4 "}, {id": 12, "g oodsid ": 36134,"_ parentid ": 8,"Qty ": 1.0000,"rem ":"1 "}, {"id ": 13,"goodsid ": 36135,"_ parentid ": 8,"Qty ":"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" : 18, "goodsid": 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 "}]}이것은 행동입니다
var pls = listall (p.partchild) .tolist (); list <boodge result = new list = new list <botor> (); foreach (pls in pls in pls) {if (item.partparent == p.partchild) {result.add (new = item.listid, goodsid = partchild, qty = qty, rem = the the sater at the the the the the the the sater a the the the the the sater at the the the the the the the sater at than 트리 데이터 방법, 중복! Easyi는 parentid // object l = new {id = item.listid, text = ited.partchild, _parentid = 0, qty = item.qty, Qty, rem = item.rem, chlidren = trelist (pls, item.partchild)}; // result.add (l); item.partparentSelect a; result.add (new {id = item.listid, goodsid = ited.partchild, _parentid = parent.first (). listid, qty = item.qty, rem = item.rem});}}이것은 프론트 데스크 전망입니다
<div style = "margin : 20px 0;"> </div> <테이블 스타일 = "높이 : 250px"data-options = "url : '/contosobisite/partslist/jlist/', method : 'get', nowrap : false, rownumbers : true, 애니메이션 : 진실, 콜랩스 : 참, fitcolmans : true, idfield : 'idfield :', 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 = "parentname '> parentname </th> <th data-options = "field : 'Qty'"> Qty </th> <th data-options = "field : 'rem'"> rem </th> <th data-options = "field : '_ parentid'"> parent </th> </tr> </thead> </table>
JS 버전 : jQuery.easyui-1.4.3.min.js; jQuery-1.11.3.min.js
위의 내용은 편집자가 공유하는 EasyUi TreeGrid 메모입니다. 나는 그것이 모두에게 도움이되기를 바랍니다!