jQuery MiniUI 開發教程 TreeGrid 創建TreeGrid（一）

           

            

參考示例: TreeGrid    

                

           

 

創建TreeGrid

 

<p id="treegrid1" class="mini-treegrid" style="width:600px;height:280px;"     

    url="../data/tasks.txt" showTreeIcon="true" 

    treeColumn="taskname" idField="UID" parentField="ParentTaskUID" resultAsTree="false">

    <p property="columns">

        <p type="indexcolumn"></p>

        <p name="taskname" field="Name" width="200">任務名稱</p>

        <p field="Duration" width="100">工期</p>

        <p field="Start" width="100" dateFormat="yyyy-MM-dd">開始日期</p>

        <p field="Finish" width="100" dateFormat="yyyy-MM-dd">完成日期</p>

    </p>

</p>           

註意：idField、parentField、resultAsTree屬性。

 

 

        

           

數據結構：列表         

 

通過url返回的數據結構如下：

 

[

    {id: "base", text: "Base", expanded: false},    

    {id: "ajax", text: "Ajax", pid: "base"},

    {id: "json", text: "JSON", pid: "base"},

    ……

]

其中，id和pid對應父子關系。

           

Columns列配置         

 

TreeGrid的列配置，跟DataGrid類似。參考如下：