miniui學習筆記(一)treegrid


  首先是創建一個樹形表格。主要代碼如下:

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM