首先是創建一個樹形表格。主要代碼如下:
1 <div id="treegrid1" class="mini-treegrid" style="width:600px;height:280px;" 2 url="../data/tasks.txt" showTreeIcon="true" 3 treeColumn="taskname" idField="UID" parentField="ParentTaskUID" resultAsTree="false" 4 > 5 <div property="columns"> 6 <div type="indexcolumn"></div> 7 <div name="taskname" field="Name" width="200">任務名稱</div> 8 <div field="Duration" width="100">工期</div> 9 <div field="Start" width="100" dateFormat="yyyy-MM-dd">開始日期</div> 10 <div field="Finish" width="100" dateFormat="yyyy-MM-dd">完成日期</div> 11 </div> 12 </div>
以下介紹幾個主要屬性:
class=“mini-treegrid”屬性為miniui樹形表格固定寫法,miniui通過class=“mini-xxx”識別引用了miniui的控件。
url為數據來源的路徑。數據可為服務端的靜態數據,如上例中的路徑../data/tasks.txt;也可以是后台取出的數據庫數據,如servlet路徑user/add。
treeColum="taskname"表示展示樹形結構的列為name="taskname"的列。
idField、parentField屬性表示通過某兩個字段形成上下級的結構。例如部門Department{id,name,code,p_code},部門的編碼和上級部門的編碼構成上下級結構,可寫為idField="code",parentField="p_code",從而形成樹形關系。
1 <div property="columns"> 2 <div type="indexcolumn">序號</div> 3 <div name="taskname" field="name" width="200">用戶姓名 </div> 4 <div field="password" width="100">用戶密碼</div> 5 <div field="nickname" width="100">昵稱</div> 6 </div>
這部分代碼為樹形表格的列。其中field="xxx"表示對應數據模型的屬性名,如User{id,name,password,nickname}。