zoukankan      html  css  js  c++  java
  • treegrid.bootstrap使用说明

    treegrid.bootstrap使用说明

    这个插件是用来做有层次的表格的,大概如图:

    官网  http://maxazan.github.io/jquery-treegrid/

    使用这个控件之前需要引入以下css及js(因为用到了 bootstrap.js 所以加上了 bootstrap样式和脚本)

    bootstrap.min.css

    jquery.treegrid.css

    jquery.min.js

    bootstrap.min.js

    jquery.treegrid.js

    jquery.treegrid.bootstrap3.js

    然后将需要用到的<table>标签中加入对应样式:

    <table class="tree table table-hover table-bordered table-condensed">    

        

            <tr class="treegrid-1">

        <td>Root node</td><td>Additional info</td>

        </tr>

        

            <tr class="treegrid-2 treegrid-parent-1">

        <td>Node 1-1</td><td>Additional info</td>

        </tr>

        <tr class="treegrid-3">

        <td>Node 1-2</td><td>Additional info</td>

        </tr>

        

            <tr class="treegrid-4 treegrid-parent-3">

        <td>Node 1-2-1</td><td>Additional info</td>

        </tr>

    </table>

    然后引用js

    <script type="text/javascript">

            $(document).ready(function () {

                $('.tree').treegrid();

            });

    </script>

    结果如下:

    可以从上面的一段html中看出,使用这个控件的关键点有:

    1,每一行<tr>都有唯一的id号   treegrid-*** 

    2,子节点的<tr>都有parentID  treegrid-parent-**

    3,子节点必须紧跟在父节点后面,否则表格会排序错误(已测试过了) 

    总结一点:使用这个treegrid 就是把 <tr class=”treegrid-** treegrid-parent-**”>拼写正确。

     

    例子代码中展示了动态生成treegrid程序,

    大概的思路是:

    1, 找到所有父节点

    2, 遍历父节点,生成<tr> ,如果该父节点有子节点,进行步骤3

    3, 遍历子节点,生成<tr> ,返回步骤2

    总的来说是一个递归的过程

  • 相关阅读:
    JavaScript单线程和浏览器事件循环简述
    Promise的前世今生和妙用技巧
    自定义Angular插件
    smartcrop.js智能图片裁剪库
    判断是否安装微博
    Java 注解
    android tools使用方式
    listview复用机制研究
    java 驼峰字符和下划线字符相互转换工具类
    剪切板(复制、粘贴)工具类
  • 原文地址:https://www.cnblogs.com/fuqiang88/p/4768879.html
Copyright © 2011-2022 走看看