Bootstrap-table进阶篇(树形表格)

Bootstrap
placeholder image
admin 发布于:2020-04-19 01:18:44
阅读:loading

基本介绍

bootstrap-table的树形表格需要使用jquery.treegrid插件同时还需要引入bootstrap-table-treegird的增强插件,得益于bootstrap-table的增强,使用起来比较简单,简单的渲染即可。略微的介绍一下几个关键的属性:

① treeShowField 树菜单显示的属性列;

② parentIdField 上级菜单属性名称;

③ onResetView 树形表格渲染时机;

④ onResetView 的 treeColumn 属性:树形表格增加的tree图标展示列位置;initialState属性:默认展开第几级菜单;

本文示例实现一个按层级结构显示的上下级菜单,默认全部展开,并增加全部展开与全部折叠的效果,详细如下。

运行示例

树形表格.gif

参考代码

html代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>bootstrap-table树形表格</title>

<link rel="stylesheet" href="../../font-awesome/css/font-awesome.min.css" />

<link rel="stylesheet" href="../dist/plugins/treegrid/dist/jquery.treegrid.min.css" />

<link rel="stylesheet" href="../../bootstrap.min.css" />

<link rel="stylesheet" href="../dist/bootstrap-table.css" />

<script type="text/javascript" src="../../jquery/jquery.min.js"></script>

<script type="text/javascript" src="../../popper.min.js"></script>

<script type="text/javascript" src="../../bootstrap.min.js"></script>

<script type="text/javascript" src="../dist/plugins/treegrid/dist/jquery.treegrid.min.js"></script>

<script type="text/javascript" src="../dist/bootstrap-table.min.js"></script>

<script type="text/javascript" src="../dist/plugins/treegrid/dist/bootstrap-table-treegrid.min.js"></script>

</head>

<body>

<div id="toolbar">    <button class="btn btn-secondary" title="全部展开" type="button" onclick="$('#data-table').treegrid('collapseAll');">        <i class="fa fa-chevron-down"></i>    </button>    <button class="btn btn-secondary" title="全部折叠" type="button" onclick="$('#data-table').treegrid('expandAll');">        <i class="fa fa-chevron-up"></i>    </button>

</div>

<table id="data-table" class="text-nowrap"></table>

<script type="text/javascript">

$(function () {    var table = $("#data-table");    table.bootstrapTable({        toolbar: "#toolbar",        toolbarAlign: "right",        url: "../basic/tree.json",        treeShowField: 'name',        parentIdField: 'parentId',        onResetView: function(data){            table.treegrid({                treeColumn: 1, //展开折叠图标出现列索引                initialState: 'expanded'// 所有节点都折叠                //initialState: 'expanded',// 所有节点都展开,默认展开            });        },        onCheck:function(row){            //选中行事件        },        onUncheck:function(row){            //取消选中行事件        },        columns: [            {checkbox: true},            {field: "name" , title: "地区名称"},            {field: "amount" , title: "人口数量" , align: "center"},            {field: "description" , title: "地区说明"}        ]    });

});

</script>

</body>

</html>

tree.json

[

 {    "id": 1,    "parentId": 0,    "name": "北京市",    "amount": "2153.6万",    "description": "北京,简称“京”,古称燕京、北平,是中华人民共和国首都、省级行政区、直辖市、国家中心城市、超大城市,国务院批复确定的中国政治中心、文化中心、国际交往中心、科技创新中心 [1]  。截至2018年,全市下辖16个区,总面积16410.54平方千米,建成区面积1485平方千米,2019年末,常住人口2153.6万人,城镇人口1865万人,城镇化率86.6%。"  },  {    "id": 2,    "parentId": 1,    "name": "海淀区",    "amount": "335.8万",    "description": "海淀区,隶属于北京市,位于北京城区西部和西北部,东与西城区、朝阳区相邻,南与丰台区毗连,西与石景山区、门头沟区交界,北与昌平区接壤。面积431平方千米,边界线长约146.2千米,南北长约30千米,东西最宽处29千米,约占北京市总面积的2.6% [1] 。"  },  {    "id": 3,    "parentId": 1,    "name": "朝阳区",    "amount": "360.5万",    "description": "朝阳区,隶属于北京市。位于北京市的东部,西与东城区、丰台区、海淀区相毗邻,北连昌平区、顺义区,东与通州区接壤,南与大兴区相邻,幅员面积470.8平方千米,平均海拔34米,是北京市中心城区中面积最大的一个区。"  },  {    "id": 4,    "parentId": 0,    "name": "湖北省",    "amount": "5927万人",    "description": "湖北省,简称“鄂”,中华人民共和国省级行政区,省会武汉。地处中国中部地区,东邻安徽,西连重庆,西北与陕西接壤,南接江西、湖南,北与河南毗邻,介于北纬29°01′53″—33°6′47″、东经108°21′42″—116°07′50″之间,东西长约740千米,南北宽约470千米,总面积18.59万平方千米,占中国总面积的1.94%。最东端是黄梅县,最西端是利川市,最南端是来凤县,最北端是郧西县。"  },  {    "id": 5,    "parentId": 4,    "name": "武汉市",    "amount": "1121.20万",    "description": "武汉,简称“汉”,别称江城,是湖北省省会,中部六省唯一的副省级市,特大城市,国务院批复确定的中国中部地区的中心城市,全国重要的工业基地、科教基地和综合交通枢纽。"  },  {    "id": 6,    "parentId": 4,    "name": "襄阳市",    "amount": "605万",    "description": "襄阳简称“襄”,是国家历史文化名城、中国优秀旅游城市、汉江流域中心城市,鄂、豫、渝、陕毗邻地区的中心城市、长江中游城市群重要成员。 [1-2]  位于湖北省西北部,居汉水中游,北邻河南省南阳市,南与荆门市相邻。东经110°45′~113°06′、北纬31°13′~32°37′。"  },  {    "id": 7,    "parentId": 6,    "name": "襄城区",    "amount": "59万人",    "description": "襄城区,湖北省襄阳市辖区,位于湖北省西北部,汉水中游南岸,地势西南高东北低,属北亚热带季风气候;总面积684.8平方千米,辖1个乡、2个镇、6个街道;2018年总人口59万人。"  },  {    "id": 8,    "parentId": 6,    "name": "襄州区",    "amount": "120万人",    "description": "襄州区,隶属于湖北省襄阳市,原名襄阳区,襄州区地处鄂西北部、居汉江中游, [1]  全区总面积为2306平方千米,截止2018年末,总人口120万人。"  },  {    "id": 9,    "parentId": 6,    "name": "樊城区",    "amount": "91万人",    "description": "襄阳市樊城区位于湖北省西北部,汉水中游,地理坐标东经111°45′—113°47′,北纬31°13′—32°35′,东面和北面与襄州区接壤,南面以汉江为界与襄城区接壤,西面与谷城县、老河口市接壤。"  },  {    "id": 10,    "parentId": 6,    "name": "老河口市",    "amount": "53万",    "description": "老河口位于鄂北门户、汉水中游,因地处汉江故道而得名,挟蜀汉、扼新邓、枕太和、通秦洛,得舟楫之利、扼四省要冲,素有“襄郧要道、秦楚通衢”之称,享有“天下十八口,数了汉口数河口”之誉。"  },  {    "id": 11,    "parentId": 6,    "name": "谷城县",    "amount": "68万",    "description": "谷城县隶属湖北襄阳市,地处襄阳西部,汉江中游西岸,武当山脉东南麓。南依荆山,西偎武当,东临汉水,南北二河夹县城东流汇入汉江,西北、西南三面群山环抱,地势西高东低。"  },  {    "id": 12,    "parentId": 6,    "name": "南漳县",    "amount": "54.54万",    "description": "南漳县,隶属湖北省襄阳市,位于湖北省西北部,汉水以南,荆山山脉东麓,属鄂西北山区向汉水中游过渡地带。介于东经111°26′~112°9′,北纬31°13′~32°1′之间,总面积3859平方公里。"  },  {    "id": 13,    "parentId": 6,    "name": "枣阳市",    "amount": "114.06万",    "description": "枣阳,县级市,由襄阳市代管,位于湖北省西北部,唐白河入汉水汇合处的东部;东与随州接壤,西与襄州区毗连,南与宜城为邻,北与河南省唐河县相连,东北与河南省桐柏县交界,西北与河南省新野县为邻。"  },  {    "id": 14,    "parentId": 6,    "name": "保康县",    "amount": "35万",    "description": "保康县隶属湖北襄阳市,地处鄂西北,位于襄阳市西南部。东依襄樊,南接宜昌,西连神农架,北交武当山。是襄阳市唯一的全山区县,荆山主脉横亘东西,荆山以北南河水系注入汉江,荆山以南沮水水系注入长江。"  },  {    "id": 15,    "parentId": 6,    "name": "宜城市",    "amount": "61万",    "description": "宜城,简称宜,襄阳下辖县级市。位于湖北省西北部、汉江中游,东接随州、枣阳,南接钟祥、荆门,西邻南漳,北抵襄阳。总面积2115平方公里,2019年总人口61万。辖八个镇、两个街道办事处、一个工业园区和一个省级经济开发区。"  }]


相关下载

https://gitee.com/88911006/chendd-examples/tree/master/bootstrap


上述许多内容已经过时和过期了,留存本篇文章仅为方便个人查看,原始文章的信息参考:

原始链接:https://www.chendd.cn/information/viewInformation/myLog/353.a

最后更新:2020-04-19 01:18:44

访问次数:3039

评论次数:0

点赞个数:11,[相当给力:2,囧了一回:1,这不科学:1,路过一下:7]

 点赞


 发表评论

当前回复:作者

 评论列表


留言区