Nemo

Nemo 关注TA

路漫漫其修远兮,吾将上下而求索。

Nemo

Nemo

关注TA

路漫漫其修远兮,吾将上下而求索。

  •  普罗旺斯
  • 负责帅就完事了
  • 写了1,496,113字

该文章投稿至Nemo社区   Js、Css、Html  板块 复制链接


TreeTable使用

发布于 2016/03/30 08:47 3,998浏览 0回复 5,143

HTML:

===================

需要引入文件: Jquery.js,

<link href="${ctx }/resources/common/treeTable/themes/default/treeTable.css" rel="stylesheet" type="text/css" />
    <link href="${ctx }/resources/common/treeTable/themes/vsStyle/treeTable.css" rel="stylesheet" type="text/css" />

  <script src="${ctx }/resources/common/treeTable/jquery.treeTable.js" type="text/javascript" />



HTML代码:

<table id='treeTable2' class="table table-striped">
      <thead>
         <tr>
              <th >#</th>
              <th >名称 </th>
               <th>链接 </th>
               <th>是否可见 </th>
               <th>是否可编辑</th>
               <th>操作</th>
         </tr>
     </thead>
     <tbody  >
          <tr id="1" hasChild="true">
               <td ></td>
                <td>测试1</td>
                <td>测试1</td>
                <td>测试1</td>
                <td>测试1</td>
                <td>测试1</td>
                <td>测试1</td>
          </tr>
    </tbody>
</table>

===================


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="1"><td></td><td>系统管理</td></tr>'
                             + '<tr id="9" pId="1"><td></td><td>XXX系统</td></tr>';

                    $treeTable.addChilds(html);
                },
                onSelect : function($treeTable, id) {
                    window.console && console.log('onSelect:' + id);
                    
                }

            };
            //$('#treeTable1').treeTable(option);

            option.theme = 'default';
            $('#treeTable2').treeTable(option);
        });
       </script>

=====================



本文标签
 {{tag}}
点了个评