jQuery treetable【表格多重折叠树功能及拖放表格子元素重新排列】

今天有个表格需求做到多重折叠子元素功能，仔细想了下实现原理，

1、在html中，把父子节点的关系写在自定义属性，但对于节点是否有孩子(hasChild)，是否是最后一个节点(isLastOne)，是否是第一个节点(isFirstOne)，都还不知道。所以第一步要分析出这些信息，把这些信息都记录到自定义属性。
2、先扫描所有的tr，构造出两个map，分别记录{'pId' => ['id1', 'id2']}和{id => pId}的关系。
3、再次扫描所有的tr，根据两个map的关系，给tr增加hasChild、isLastOne、isFirstOne等自定义标签，并开始构造节点图标。
4、给整个table增加点击事件监控，如果是来自(hasChild)的父节点则进行点击事件。【亮点：jqTreeTable是给每个图标都绑定事件，而我是给整个table绑定一个点击事件，提高性能。

推荐jquery一个插件【jQuery treetable】，能完美实现我的需求，并附带拖放表格子元素重新排列功能

需要引用到的组件

<link type="text/css" href="js/ludo-jquery-treetable-3.2.0/css/jquery.treetable.css" rel="stylesheet"/>
<link type="text/css" href="js/ludo-jquery-treetable-3.2.0/css/jquery.treetable.theme.default.css" rel="stylesheet"/>

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="jquery.treetable.js"></script>

初始化需要折叠的表格

$("#xj-table").treetable({ expandable: true });

<table class="table table-striped table-bordered table-hover xj-table" id="xj-table">
    <colgroup>
        <col class="col-xs-2">
        <col class="col-xs-10">
      </colgroup>
    <thead>
        <tr>
            <th>类型</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <!--3层折叠 -->
        <tr data-tt-id="2">
            <td>展开<span class="folder"></span>
            </td>
            <td>3层折叠1</td>
        </tr>
        <tr data-tt-id="2-1" data-tt-parent-id="2" class="collapsed">
            <td>展开<span class="folder"></span></td>
            <td>3层折叠2</td>
        </tr>
        <tr data-tt-id="2-1-1" data-tt-parent-id="2-1" class="leaf collapsed">
            <td>展开<span class="file"></span></td>
            <td>3层折叠3</td>
        </tr>
        <!--2层折叠 -->
        <tr data-tt-id="3">
            <td>展开<span class="folder"></span>
                
            </td>
            <td>2层折叠1</td>
        </tr>
        <tr data-tt-id="3-1" data-tt-parent-id="3" class="collapsed">
            <td>展开<span class="file"></span></td>
            <td>2层折叠2</td>
        </tr>
        
        
        <!--3层2子层折叠 -->
        <tr data-tt-id="4">
            <td>展开<span class="folder"></span>
            </td>
            <td>3层2子层折叠1</td>
        </tr>
        <tr data-tt-id="4-1" data-tt-parent-id="4" class="collapsed">
            <td>展开<span class="folder"></span></td>
            <td>3层2子层折叠2</td>
        </tr>
        <tr data-tt-id="4-1-1" data-tt-parent-id="4-1" class="leaf collapsed">
            <td>展开<span class="file"></span></td>
            <td>3层2子层折叠3</td>
        </tr>
        <tr data-tt-id="4-2" data-tt-parent-id="4" class="collapsed">
            <td>展开<span class="folder"></span></td>
            <td>3层2子层折叠2</td>
        </tr>
        <tr data-tt-id="4-2-1" data-tt-parent-id="4-2" class="leaf collapsed">
            <td>展开<span class="file"></span></td>
            <td>3层2子层折叠3</td>
        </tr>
        
        
        
        <tr>
            <td>展开<span class="glyphicon"></span></td>
            <td>1</td>
        </tr>
    </tbody>
</table>

需要拖放功能原dome效果图

jQuery treetable【表格多重折叠树功能及拖放表格子元素重新排列】

需要拖放功能的引用基础库

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jquery-ui/ui/jquery.ui.core.js"></script>
<script src="bower_components/jquery-ui/ui/jquery.ui.widget.js"></script>
<script src="bower_components/jquery-ui/ui/jquery.ui.mouse.js"></script>
<script src="bower_components/jquery-ui/ui/jquery.ui.droppable.js"></script>
<script src="jquery.treetable.js"></script>

View Code