【插件篇】前段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 ...
随机推荐
- 键盘--扫描码--ASCII码--显示器上的字符
在上一篇,我讲了键盘操作会产生扫描码以及如何解析Pause键和Print Screen键的扫描码. 在这一篇,我会说清楚"键盘上的输入为什么会出现在显示器上". 极简版 我们敲击键 ...
- github个人主页 阿里云域名的绑定
域名解析 我在阿里云上买了一个新域名:gaolu.name,我已经在GitHub Pages上建立了自己的博客:http://gaolu1215.github.io.现在我希望将gaolu.name映 ...
- springmvc 最权威的知识点
1.什么是Spring MVC ?简单介绍下你对springMVC的理解? Spring MVC是一个基于Java的实现了MVC设计模式的请求驱动类型的轻量级Web框架,通过把Model,View,C ...
- Java字符串==和equals的区别
首先我们来了解一下String类,Java的字符串是一旦被赋值之后无法更改的(这里的无法更改是指不能将字符串中单个或一段字符重新赋值),这也是Java虚拟机为了减少内存开销,避免字符串的重复创建设立的 ...
- 攻防世界 reverse xx
xx 程序开始验证输入长度为19位. 取前4位(作为后面加密的key),验证这4位都在'qwertyuiopasdfghjklzxcvbnm1234567890'中. 将key用0填充为16位 调用x ...
- 浅谈意图识别各种实现&数学原理
\[ J_\alpha(x) = \sum_{m=0}^\infty \frac{(-1)^m}{m! \Gamma (m + \alpha + 1)} {\left({ \frac{x}{2} }\ ...
- 在ASP.NET Core中用HttpClient(六)——ASP.NET Core中使用HttpClientFactory
到目前为止,我们一直直接使用HttpClient.在每个服务中,我们都创建了一个HttpClient实例和所有必需的配置.这会导致了重复代码.在这篇文章中,我们将学习如何通过使用HttpClient ...
- Alluxio+HDFS+MapReduce集成及测试
目录 1.在 HDFS 上配置 Alluxio 1.1.节点角色 1.2.软件版本 1.3.准备工作 1.3.1.设置 SSH 免密登录 1.3.2.安装 JDK 1.3.3.安装 Hadoop 1. ...
- thinkphp添加excel更新数据表数据(优化篇)
由于主管说使用saveAll更新数据效率太低,要改用sql语句一次执行现在修改 /** * excel开启上传 * author: panzhide * @return array * Date: 2 ...
- Java异常详解——一篇文章搞定Java异常
目录 1. 异常的体系结构 2. 常见的异常 2.1 运行时异常 2.2 编译时异常 (编译时异常必须进行处理否则无法运行) 3. 异常的抓抛模型原理 4. 异常的处理 4.1 try - catch ...