Bootstrap-table进阶篇（树形表格）

Bootstrap

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>

<head>

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

</head>

<body>

</div>

$(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万。辖八个镇、两个街道办事处、一个工业园区和一个省级经济开发区。" }]