參考API:javascript
http://miniui.com/docs/api/index.html#ui=datagridcss
http://miniui.com/docs/api/index.html#ui=treegridhtml
Mini全部節點配置數據方式(集合數組——沒有構形成樹的數據結構):java
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>TreeGrid 樹形表格</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" /> <script src="../../scripts/boot.js" type="text/javascript"></script> </head> <body> <h1>TreeGrid 巡護員樹測試</h1> <input type="button" value="測試" onclick="reload()"/> <div id="treegrid1" class="mini-treegrid" style="width:100%;height:580px;" url="../data/xht_tree.json" showTreeIcon="false" treeColumn="taskname" idField="id" parentField="parentId" resultAsTree="false" allowResize="true" expandOnLoad="false" > <div property="columns"> <div type="indexcolumn"></div> <div name="taskname" field="name" width="160" >巡護員</div> <div field="value" width="80">操做</div> </div> </div> <script type="text/javascript"> function reload(){ mini.parse(); var treegrid = mini.get("treegrid1"); treegrid.url="../data/xht_tree.json?res="+Math.random(); var start=new Date().getTime(); console.info("reload...."); treegrid.loading(); treegrid.load(); var node=treegrid.getRow(0); treegrid.expandNode(node); treegrid.unmask(); var end=new Date().getTime(); console.info("completed time:"+(end-start)+"ms"); } </script> </body> </html>
異步加載方式參考:http://www.blogjava.net/grid/archive/2012/12/13/392948.htmlnode