说明:具体代码操作我就不贴了。官方有正规的例子!bootstrap-table-examples传送

使用注意事项:

  1. 传入的id和pid可以是string类型的(我后台返回的是Long类型转换成string来显示的),开始看到有的地方说必须使用number类型,走了不少弯路。去研究js中String转Long精度丢失的问题了。。。。。
  2. 顶级节点的parentId值得问题。官方默认的判断方式为如果parentId为空(null或者“”)时,此行就是顶级节点。但是结合我自己的情况。我在设计时顶级节点的parentId都置为0。所以不得不改了下bootstarap-table-treegrid.js的判断方式了。下面是改动的地方:
  3. 图标是否显示,查看是否开启样式的渲染了,下面代码有说明。
  4. 还有一种情况时,默认是使用两张图片。可以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试手,解决无法显示树形列表或者图标不显示问题。的更多相关文章

  1. JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

  2. 轻量级表格插件Bootstrap Table。拥有强大的支持固定表头、单/复选、排序、分页、搜索及自定义表头等功能。

    Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等. ...

  3. bootstrap table + spring + springmvc + mybatis 实现从前端到后端的表格分页

    1.使用准备 前台需要的资源文件,主要有Bootstrap3相关css.js以及bootstrap Table相关css.js: <-- 样式 --> <link rel=" ...

  4. bootstrap table 父子表实现【无限级】菜单管理功能

    bootstrap table 父子表实现[无限级]菜单管理功能 实现效果 前端代码 <%@ page language="java" import="java.u ...

  5. bootstrap table插件动态加载表头

    这篇文章主要为大家详细介绍了bootstrap table插件动态加载表头,具有一定的参考价值,感兴趣的小伙伴们可以参考一下   bootstrap的table属性已经很熟悉了,最近遇到一个问题,犹豫 ...

  6. [前端插件]Bootstrap Table服务器分页与在线编辑应用总结

    先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...

  7. bootstrap table 插件多语言切换

    在bootstrap中的bootstrap table 插件在多语言切换的审核,只需要如下操作 引入bootstrap-table-locale-all.js文件 $('#Grid').bootstr ...

  8. 使用bootstrap table 插件固定表头时 表头与表格内容无法对齐

    在使用bootstrap table开发后台管理系统,表格利用bootstrap-table插件来实现,使用bootstrap-table过程中,会出现表头错位的情况 表头对不齐效果: 解决的方法: ...

  9. [转]手把手教你--Bootstrap Table表格插件及数据导出(可导出Excel2003及Exce2007)

    原文地址:https://blog.csdn.net/javayoucome/article/details/80081771 1.介绍 Bootstrap Table介绍见官网:http://boo ...

随机推荐

  1. springboot注解之@Import @Conditional @ImportResource @ConfigurationProperties @EnableConfigurationProperties

    1.包结构 2.主程序类 1 @SpringBootApplication(scanBasePackages={"com.atguigu"}) 2 public class Mai ...

  2. SPOJ D-query 【主席树】

    一 题目 D-query 二 分析 主席树的运用. 这题首先应该考虑的是,如何分出种类数?再就是考虑如何维护区间信息? 最开始想的是直接离散化后用权值线段树建主席树,发现不行,因为假如$ [l,r] ...

  3. 安全计算环境之剩余信息保护-windows

    参考https://blog.csdn.net/ubjewen/article/details/107587951 应保证鉴别信息所在的存储空间被释放或重新分配前得到完全清除 交互式登录: 之前登录到 ...

  4. 《数据持久化与鸿蒙的分布式数据管理能力》直播课答疑和PPT分享

    问:hi3861开发板支持分布式数据库吗? 目前,分布式数据库仅支持Java接口,因此Hi3861没有现成的API用于操作分布式数据库. 问:分布式数据管理包括搜索吗? 分布式数据管理包括融合搜索能力 ...

  5. 敏捷史话(十二):你现在接触的敏捷也许是“黑暗敏捷”——Ron Jeffries

    他很少提起往事,也不再提及二十年前那场引起软件行业变革的会议,他专注于当下,一直活跃在敏捷领域.八十多岁的他依然运营维护着网站和博客,是极限编程网站 XProgramming.com 的作者,该网站是 ...

  6. 详解php中函数的引用传递和返回 (附代码)

    本篇文章带大家了解一下php的引用,详细介绍一下函数的引用传递和引用返回.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助.php的引用(就是在变量或者函数.对象等前面加上&符号 ...

  7. .NET 开源配置组件 AgileConfig 初体验

    介绍 在微服务大行其道的今天,系统会被拆分成多个模块,作为单独的服务运行,同时为了集中化管理,我们还需要日志中心,配置中心等,很多开发人员可能更熟悉 ApolloConfig,这个组件功能也很完善,d ...

  8. 通过lms.samples熟悉lms微服务框架的使用

    经过一段时间的开发与测试,终于发布了Lms框架的第一个正式版本(1.0.0版本),并给出了lms框架的样例项目lms.samples.本文通过对lms.samples的介绍,简述如何通过lms框架快速 ...

  9. 学习笔记-vue hash模式打包

    1.打包设置config->index.js 2.图片资源路径出现问题 设置下utils.js文件

  10. 一文带你剖析LiteOS互斥锁Mutex源代码

    摘要:多任务环境下会存在多个任务访问同一公共资源的场景,而有些公共资源是非共享的临界资源,只能被独占使用.LiteOS使用互斥锁来避免这种冲突,互斥锁是一种特殊的二值性信号量,用于实现对临界资源的独占 ...