首先是创建一个树形表格。主要代码如下：
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}。