easyUI的treeGrid資料格式
首先idField是要唯一,這個是肯定的
剛開始看api,以為父子節點是treeField定義,後來怎麼改這個欄位的資料都不出來,後來才知道json資料來源中“_parentId”才是決定父子節點的關鍵,
意思就是說在子節點中加上“_parentId”欄位,然後該欄位對應的值是父節點的resourceId就行了,所以在
時隔一年,重新用到這個東西,發現一個問題,最頂級的節點的"_parentId"需要設為"",否則資料載入不到表格中
js程式碼:
<div data-options="region:'center'" style="border-width: 1px 1px 0px 0px;">
<table id="resourceTab" class="easyui-treegrid" title="專案標段"
data-options="border:false,rownumbers:true,fit:true,striped:true,idField:'resourceId',treeField:'name',onClickRow:clickRow,onDblClickRow:dbClickRow,onLoadSuccess: collapseAll,toolbar:'#tb',url:'${pageContext.request.contextPath}/xxxx/xxxxx.do'">
<thead data-options="frozen:true">
<tr>
<th data-options="field:'name',width:230,align:'left'">名稱</th>
</tr>
</thead>
<thead>
<tr>
<th data-options="field:'projCode',width:150,align:'center',formatter:formatCode">編號</th>
<th data-options="field:'startStack',width:120,align:'center'">起點樁號</th>
<th data-options="field:'endStack',width:120,align:'center'">終點樁號</th>
<th data-options="field:'startTime',width:120,align:'center'">開工日期</th>
<th data-options="field:'endTime',width:120,align:'center'">完工日期</th>
<th data-options="field:'isEnable',width:150,align:'center',formatter:formatIsEnable">是否啟用</th>
</tr>
</thead>
</table>
</div>
控制層程式碼:
map為已經封裝好的資料來源,轉成json字串後替換一下就好
String jsonString = JSON.toJSONString(map);
jsonString = jsonString.replaceAll("\"parentId\"", "\"_parentId\""); // treegrid,父ID定義
printWriterStringToJson(response, jsonString);
效果圖: