jQuery treeTable v 1.4.2

標籤：cti   int   query   and   text   func   option   ajax   載入   

angularJs版本：

即為treeTable的效果，三個紅色框每個微一級 外科>骨科>骨科一病區

html：

<table class="table table-bordered" id="dept_dict_table">    <tbody>　　　　<tr ng-repeat="deptDict in deptDicts" id="{{deptDict.deptId}}" pId="{{deptDict.deptUpCode}}">          <td class="first-td">{{deptDict.deptId}}</td>　　　　　　<td class="second-td">{{deptDict.deptName}}</td>　　　　　　<td class="third-td">{{deptDict.deptAlias}}</td>　　　　　　<td class="four-td">{{deptDict.clinicAttr | clinicAttr : deptClinicAttrDicts}}</td>　　　　　　<td class="five-td">{{deptDict.outpOrInp | oiAttr : deptOiAttrDicts}}</td>　　　　　　<td class="six-td">{{deptDict.internalOrSergery | isAttr : deptIsAttrDicts}}</td>　　　　　　<td class="seven-td">{{deptDict.branchHosp | branchHosp : branchHospList}}</td>　　　　　　<td>{{deptDict.stopIndicator | stopmark}}</td>　　　　</tr>    </tbody></table>

最主要的就是 table標籤上面id內容 table上面 id是treeTable的標誌 和tr上面id和pid的內容 tr上面 id是父節點的主鍵 pid代表的是子節點存放父節點的主鍵
　　例如：外科deptId=‘01‘ deptUpCode=‘‘(因為骨科是頂級節點所以父節點為空白) 外科下面 對應的骨科 deptId=‘0101‘ deptUpCode=‘01‘ 因為骨科的上級節點是外科（01）所以對應的deptUpCode就是‘01‘，對應到資料庫中的表欄位也是這兩個。

最簡單的版本：

引用檔案：

<script src="/script/jquery.js" type="text/javascript"> </script> <script src="/script/treeTable/jquery.treeTable.js" type="text/javascript"> </script>

js：

<script type="text/javascript">        $(function(){            var option = {                theme:‘vsStyle‘,                expandLevel : 2,                beforeExpand : function($treeTable, id) {                    //判斷id是否已經有了孩子節點，如果有了就不再載入，這樣就可以起到緩衝的作用                    if ($(‘.‘ + id, $treeTable).length) { return; }                    //這裡的html可以是ajax請求                    var html = ‘<tr id="8" pId="6"><td>5.1</td><td>可以是ajax請求來的內容</td></tr>‘                             + ‘<tr id="9" pId="6"><td>5.2</td><td>動態內容</td></tr>‘;                    $treeTable.addChilds(html);                },                onSelect : function($treeTable, id) {                    window.console && console.log(‘onSelect:‘ + id);                                    }            };            $(‘#treeTable1‘).treeTable(option);        });    </script>

html：

<table id="treeTable1" style="width: 100%">    <tr>        <td style="width: 200px;">標題</td>        <td>內容</td>    </tr>    <tr id="1">        <td><span controller="true">1</span></td>        <td>內容</td>    </tr>    <tr id="2" pid="1">        <td><span controller="true">2</span></td>    <td>內容</td>    </tr>    <tr id="3" pid="2">        <td>3</td>        <td>內容</td>    </tr></table>

 

jQuery treeTable v 1.4.2