Easyui's Treegrid Notes_jquery

Pengenalan EasyUI

easyui ialah koleksi pemalam antara muka pengguna berdasarkan jQuery.

easyui menyediakan fungsi yang diperlukan untuk mencipta aplikasi JavaScript yang moden, interaktif.

Menggunakan easyui, anda tidak perlu menulis banyak kod Anda hanya perlu menentukan antara muka pengguna dengan menulis beberapa teg HTML yang mudah.

easyui ialah rangka kerja lengkap yang menyokong halaman web HTML5 dengan sempurna.

easyui menjimatkan masa dan skala pembangunan web anda.

easyui sangat ringkas tetapi berkuasa.

Ini kali pertama bagi seorang pemula menggunakannya, saya masih mengambil beberapa lencongan dengan merujuk kepada kaedah yang diperkenalkan dalam forum dan merekodkan masalah yang saya hadapi.

1. Nod akar mesti ditakrifkan;

2. Satu atau lebih nod akar boleh digunakan;

4. Atribut nod induk nod akar tidak perlu ditakrifkan, atau ditakrifkan sebagai 0;

5. Nama atribut nod induk bagi nod anak di semua peringkat mestilah "_parentId", dan nama lain tidak boleh digunakan dalam jquery.easyui.js;

6. Tidak perlu mengeluarkan data json struktur "pokok" di latar belakang TINDAKAN selagi json struktur berikut diberikan kepada grid pepohon di meja depan bentuk pokok boleh ditubuhkan dan output ke halaman. (Saya mengetahui bahawa mengeluarkan kanak-kanak dalam format pokok di latar belakang juga merupakan pilihan.)

Ini adalah Tindakan

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

Ini adalah pandangan hadapan

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

Versi JS:

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

jquery.easyui-1.4.3.min.js;

Kandungan di atas ialah nota Treegrid Easyui yang dikongsi oleh editor saya harap ia akan membantu semua orang!