zoukankan      html  css  js  c++  java
  • jquery的tree table(树表)

      因项目需要,需要在表格中加入tree,使用了jquery的tree table,经美化,完美兼容各种框架的table;

      请移步下载tree table 的js文件及css文件等,http://ludo.cubicphuse.nl/jquery-treetable/;

         用到css文件:<link rel="stylesheet" href="../../style/jquery.treetable.css">

    <link rel="stylesheet" href="../../style/jquery.treetable.theme.default.css">

    用到js文件:<script src="../../js/jquery-1.10.1.min.js"></script>

    <script src="../../js/bootstrap-treeview.min.js"></script>

    使用示例:

    <table id="tableId">
      <tr data-tt-id="1">
        <td>Parent</td>
      </tr>
      <tr data-tt-id="2" data-tt-parent-id="1">
        <td>Child</td>
      </tr>
    </table>   
    data-tt-id为2的tr  通过data-tt-parent-id指向1节点,意思就是第二个tr是第一个tr的子节点;

    一行js搞定,
    $("#tableId).treetable({expandable : true});

    层级复杂的表格通过后台递归查询查出数据list后,可以通过判断该节点是否具有父节点来给tr增加parent_id,看示例:

    var trArr = $("#tableId tr");

    for (var i = 0; i < trArr.length; i++) {
    $("#tableId tr:eq(" + i + ")").attr(
    "data-tt-id", tabledate[i].orgId);
    if (tabledate[i].parentOrg != '') {
    $("#tableIdtr:eq(" + i + ")").attr(
    "data-tt-parent-id", tabledate[i].parentOrg);
    }
    }

     


    种桃道士归何处,前度刘郎今又来。
  • 相关阅读:
    单调队列 POJ 2823
    大组合数取mod lucas 定理
    多校4
    多校2
    2016多校1
    百度之星 初赛B续
    iot-web增加apis-namespace组件
    25.75k8s
    新项目增加gradlew
    vue图片点击放大预览v-viewer
  • 原文地址:https://www.cnblogs.com/jianwei-dai/p/4807947.html
Copyright © 2011-2022 走看看