精选圈子榜单优站
Nemo
Nemo
管理员
路漫漫其修远兮,吾将上下而求索。

TreeTable使用


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>

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




  • 若文章侵犯了您的权益,请联系站长处理:nemo@link-nemo.com

  • 2016-03-30
  • 4186阅读
评论