【插件篇】前段bootstrap-table-treegrid试手,解决无法显示树形列表或者图标不显示问题。
说明:具体代码操作我就不贴了。官方有正规的例子!bootstrap-table-examples传送
使用注意事项:
- 传入的id和pid可以是string类型的(我后台返回的是Long类型转换成string来显示的),开始看到有的地方说必须使用number类型,走了不少弯路。去研究js中String转Long精度丢失的问题了。。。。。
- 顶级节点的parentId值得问题。官方默认的判断方式为如果parentId为空(null或者“”)时,此行就是顶级节点。但是结合我自己的情况。我在设计时顶级节点的parentId都置为0。所以不得不改了下bootstarap-table-treegrid.js的判断方式了。下面是改动的地方:
- 图标是否显示,查看是否开启样式的渲染了,下面代码有说明。
- 还有一种情况时,默认是使用两张图片。可以f12调试。控制台会提示查不到对应的图片。
onLoadSuccess:function (data) {
$table.treegrid({
// 初始化状态是全部折叠
// initialState: 'collapsed',
treeColumn: 1,
// 下面两个是控制树形列表前面加号加号的样式渲染是否开启的
// expanderExpandedClass: 'glyphicon glyphicon-minus',
// expanderCollapsedClass: 'glyphicon glyphicon-plus',
// onChange: function() {
// $("#dataGrid").bootstrapTable('resetWidth');
// }
});
}
下面是bootstrap-table-treegrid.js中的一个方法
onCheckRoot: function (row, data) {
var that = this;
// 此处原本是判断当前行row中的parentIdField的值是否为空值来判断
// 是否是顶级节点。不满足我的设计要求。
// 因为我在设计时,顶级节点(即目录)菜单的父节点值为0。
// 所以改为判断是否为0值即可。
//return !row[that.options.parentIdField];
if(row[that.options.parentIdField] == "0"){
return true;
}
return false;
}
结尾:目前就这么多的问题,希望能帮到诸位。有其他问题可以留言探讨。
【插件篇】前段bootstrap-table-treegrid试手,解决无法显示树形列表或者图标不显示问题。的更多相关文章
- JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
- 轻量级表格插件Bootstrap Table。拥有强大的支持固定表头、单/复选、排序、分页、搜索及自定义表头等功能。
Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等. ...
- bootstrap table + spring + springmvc + mybatis 实现从前端到后端的表格分页
1.使用准备 前台需要的资源文件,主要有Bootstrap3相关css.js以及bootstrap Table相关css.js: <-- 样式 --> <link rel=" ...
- bootstrap table 父子表实现【无限级】菜单管理功能
bootstrap table 父子表实现[无限级]菜单管理功能 实现效果 前端代码 <%@ page language="java" import="java.u ...
- bootstrap table插件动态加载表头
这篇文章主要为大家详细介绍了bootstrap table插件动态加载表头,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 bootstrap的table属性已经很熟悉了,最近遇到一个问题,犹豫 ...
- [前端插件]Bootstrap Table服务器分页与在线编辑应用总结
先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...
- bootstrap table 插件多语言切换
在bootstrap中的bootstrap table 插件在多语言切换的审核,只需要如下操作 引入bootstrap-table-locale-all.js文件 $('#Grid').bootstr ...
- 使用bootstrap table 插件固定表头时 表头与表格内容无法对齐
在使用bootstrap table开发后台管理系统,表格利用bootstrap-table插件来实现,使用bootstrap-table过程中,会出现表头错位的情况 表头对不齐效果: 解决的方法: ...
- [转]手把手教你--Bootstrap Table表格插件及数据导出(可导出Excel2003及Exce2007)
原文地址:https://blog.csdn.net/javayoucome/article/details/80081771 1.介绍 Bootstrap Table介绍见官网:http://boo ...
随机推荐
- H5 简单实现打砖块游戏
实现效果如图所示: 1.布局 在html中,声明 div1 作为作为带有边框的父物体,一切行为都要在 div1 中进行.创建小球ball.左右可滑动的板子bat,以及存放要销毁的砖块的父物体 bri ...
- RabbitMQ镜像队列集群搭建、与SpringBoot整合
镜像模式 集群模式非常经典的就是Mirror镜像模式,保证100%数据不丢失,在实际工作中也是用的最多的,并且实现集群比较的简单. Mirror镜像队列,目的是为了保证 RabbitMQ 数据的高可靠 ...
- Anchor-Free总结
目录 Anchor-Free综述 一. CornerNet 1.1 概述 1.2 模块介绍 1.2.1 Heatmap 1.2.2 Offset 1.2.3 Grouping Corners 1.2. ...
- codefoces B - Phoenix and Beauty
原题链接:https://codeforc.es/problemset/problem/1348/B 题意:告诉我们一个数组及其长度和k,判断是否可以构造一个新数组使得每K段长度和都相等. 思路:首先 ...
- SpringBoot-03 yaml+JSR303
SpringBoot-03 yaml+JSR303 Yaml 1.配置文件 SpringBoot使用一个全局的配置文件 , 配置文件名称是固定的 YAML是 "YAML Ain't a Ma ...
- 配置docker的pdflatex环境
技术背景 Latex在文档撰写方面是不可或缺的工具,尤其是在写文章方面,是必须要用到的文字排版工具.但是latex的环境部署并不是一个特别人性化的操作,尤其是在各种不同的平台上操作是完全不一样的,还经 ...
- 一文彻底搞懂JS前端5大模块化规范及其区别
码文不易,转载请带上本文链接,感谢~ https://www.cnblogs.com/echoyya/p/14577243.html 目录 码文不易,转载请带上本文链接,感谢~ https://www ...
- java例题_15 有小到大排序
1 /*15 [程序 15 排序] 2 题目:输入三个整数 x,y,z,请把这三个数由小到大输出. 3 程序分析:我们想办法把最小的数放到 x 上,先将 x 与 y 进行比较,如果 x>y 则将 ...
- Rancher 安装和使用-实践
Rancher 安装和使用 Rancher是一个完整的,开源的平台,用于在生产环境中部署和管理容器.它包括Kubernetes,Mesos和Docker Swarm的商业支持发行版,使得在任何基础架构 ...
- Nacos概述及安装
Nacos是什么? 在Spring Cloud中我们使用eureka.consul等做为服务注册中心,使用Spring Cloud Config做为配置中心.而Spring Cloud中,也可以使用n ...