使用jquery-treetable水平滚动表时，如何解决第一个问题？

问题描述

我在我的angularjs项目中使用jquery-treetable。

但是，当我水平滚动数据时，我想修复第一列（或前两列）。我发现其他一些建议使用两个表的线程，因为我正在使用此插件，所以我认为这不会解决方案。

下面是一个演示，我想在滚动时修复第一列。（在我的项目中，数据使用ng-repeat显示，但对我认为的问题没有影响

 $("#example-basic").treetable(
                        { 
                            expandable: true,initialState:"expanded",} 
                    );

thead {
               text-align: center;
           }
   
           th {
               text-align: center;
               width:200px;
           }
   
           td {
               text-align: center;
               width:200px
           }
   

         

          
            table thead,tbody tr {
                display:table;
                width:100%;
                table-layout:fixed;
            
            }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-treetable/3.2.0/jquery.treetable.min.js"></script>

<link href="https://cdn.bootcdn.net/ajax/libs/jquery-treetable/3.2.0/css/jquery.treetable.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdn.bootcdn.net/ajax/libs/jquery-treetable/3.2.0/css/jquery.treetable.min.css" rel="stylesheet"/>

<table id="example-basic" class="treetable" style="width:100%;overflow-x:auto;">
        <caption>Basic jQuery treetable Example</caption>
        <thead>
          <tr>
            <th>Tree column</th>
            <th>Additional data</th>
            <th>Additional data</th>
            <th>Additional data</th>
            <th>Additional data</th>
          </tr>
        </thead>
        <tbody>
          <tr data-tt-id="1" class="branch expanded">
            <td><span class="indenter" style="padding-left: 0px;"><a href="#" title="Collapse">&nbsp;</a></span>Node 1: Click on the icon in front of me to expand this branch.</td>
            <td>I live in the second column.</td>
            <td>I live in the second column.</td>
            <td>I live in the second column.</td>
            <td >I live in the second column.</td>
          </tr>
          <tr data-tt-id="1.1" data-tt-parent-id="1" class="branch expanded" style="">
            <td><span class="indenter" style="padding-left: 19px;"><a href="#" title="Collapse">&nbsp;</a></span>Node 1.1: Look,I am a table row <em>and</em> I am part of a tree!</td>
            <td>Interesting.</td>
            <td>Interesting.</td>
            <td>Interesting.</td>
            <td>Interesting.</td>
          </tr>
          <tr data-tt-id="1.1.1" data-tt-parent-id="1.1" class="leaf collapsed" style="">
            <td><span class="indenter" style="padding-left: 38px;"></span>Node 1.1.1: I am part of the tree too!</td>
            <td>That's it!</td>
            <td>That's it!</td>
            <td>That's it!</td>
            <td>That's it!</td>
          </tr>
          <tr data-tt-id="2" class="leaf collapsed">
            <td><span class="indenter" style="padding-left: 0px;"></span>Node 2: I am another root node,but without children</td>
            <td>Hurray!</td>
            <td>Hurray!</td>
            <td>Hurray!</td>
            <td>Hurray!</td>
          </tr>
        </tbody>
      </table>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html jquery scroll