插件介绍:轻量级表格树treegrid, 支持bootstrap 风格

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


引入文件:

<link rel="stylesheet" href="statics/treeGrid/jquery.treegrid.css">


<script type="text/javascript" src="statics/treeGrid/jquery.treegrid.js"></script>
        <script type="text/javascript" src="statics/treeGrid/jquery.treegrid.bootstrap3.js"></script>

用法:
其静态页面:

 <table class="table tree-2 table-bordered table-striped table-condensed">
                <tr class="treegrid-1">
                    <td>Root node 1</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 treegrid-parent-1">
  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
首先,需要在项目中引入treegrid插件的相关文件,包括js和css文件。可以在官网上下载最新版本的插件。 然后,在html页面中创建一个表格,指定id属性和class属性为"treegrid",并定义表头和表身。 接下来,需要在js文件中编写代码来初始化treegrid插件,实现表格的展示和交互。具体步骤如下: 1. 引入treegrid插件的js文件。 2. 在页面加载完成后,获取表格元素,并调用treegrid方法进行初始化。 ``` $(function () { var table = $('#myTable'); table.treegrid({ // 插件参数 }); }); ``` 3. 配置插件参数,包括表格数据、列定义、排序方式、是否显示折叠图标等。 ``` table.treegrid({ // 数据相关参数 idField: 'id', // 数据的id字段名 treeField: 'name', // 形结构的字段名 parentField: 'parentId', // 父节点的id字段名 data: myData, // 表格数据 // 列定义 columns: [[ { field: 'id', title: 'ID', width: 50 }, { field: 'name', title: '名称', width: 200 }, { field: 'price', title: '价格', width: 100 } ]], // 排序方式 sortName: 'name', sortOrder: 'asc', // 显示折叠图标 expanderExpandedClass: 'glyphicon glyphicon-minus', expanderCollapsedClass: 'glyphicon glyphicon-plus' }); ``` 4. 可以通过插件提供的方法来实现表格的交互,如展开、折叠、选中、取消选中等。 ``` // 展开节点 table.treegrid('expand', nodeId); // 折叠节点 table.treegrid('collapse', nodeId); // 选中节点 table.treegrid('select', nodeId); // 取消选中 table.treegrid('unselect', nodeId); ``` 以上就是使用treegrid插件创建表格的详细步骤。需要注意的是,插件的具体使用方式可能因版本不同而略有差异,建议在使用前查看官方文档。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值