Bootstrap实践之JavaScrpt递归转换treeview结构数据
前文中采用Java递归实现的一个数据转换，跟前台JavaScript比较起来，还是使用JavaScript比较好，比较一旦数据中的上下级节点如果存在错误的结构可能会导致死循环，最终直接出现递归溢出的问题，影响服务器正常运行，而这种逻辑放在前台比较起来影响的范围就小许多了，故本文将前一篇的使用Java实现又改造成使用JavaScript实现，参考如下数据所示： 初始数据结构 [ { "id": 1, "name": "北京市", "parentId": -1 }, { "id": 2, "name": "海淀区", "parentId": 1 }, { "id": 3, "name": "朝阳区", "parentId": 1 }, { "id": 4, "name": "湖北省", "parentId": -1 }, { "id": 5, "name": "武汉市", "parentId"...
文章分类：前端技术 Bootstrap
Bootstrap tree菜单Bootstrap实践之Java递归转换treeview结构数据
前文中我表示treeview使用的数据格式，需要多层级节点嵌套的结构，而非所有菜单均为一级的数据格式，在使用的时候，我们不得不需要将一个一层结构的数据再转换成多层级的实现，参考如下数据所示： 初始数据结构 [ { "id": 1, "name": "北京市", "parentId": -1 }, { "id": 2, "name": "海淀区", "parentId": 1 }, { "id": 3, "name": "朝阳区", "parentId": 1 }, { "id": 4, "name": "湖北省", "parentId": -1 }, { "id": 5, "name": "武汉市", "parentId": 4 }, { "id": 6, "name": "襄阳市", "parentId": 4 }, { "id": 7, "name": "襄城区", "parentId...
文章分类：前端技术 Bootstrap
Bootstrap tree菜单Bootstrap实践之treeview插件
基本介绍 最早期我发现了xloadtree菜单后，它可以实现点击菜单一级一级加载，当初我就觉得找对了，以后所有的树形菜单它都可以代劳了，然而后期发现zTree更为强大科学，继而下意识所有的Tree菜单都将使用它了，然而在使用一些bootstrap风格的主题框架后，再看zTree的样式效果真的有些不够融合，尽管能够找到一些所谓的bootstrap-zTree主题等实现，或许在bootstrap主题类的框架效果下，不是特适合早起的Tree菜单类展示效果了。 起初使用treeview类需求是基于一个包含上下级功能的一对多编辑时，发现bootstrap世界里叫treeview，与treegrid不同，前者主要表示树形结构的菜单展示，后者则是多应用树形结构表示数据的展示。即便是在包含上下级结构交互的时候，一般有多重上下级选择交互，比如：选择一个菜单级联勾选它的所有字级节点、选择一个字级的时候级联勾选...
文章分类：前端技术 Bootstrap
Bootstrap tree菜单Bootstrap实践之文件上传插件
基本介绍 bootstrap-fileinput插件属实非常强大，使用它可以实现非常好的文件上传体验，要说强大到什么程度呢，那就是强大到它的示例如果我详细整理那恐怕得花费我很久很久的业余时间，官网都有案例，我在此处分享一个包含官网basic中所有（不限于）知识点的示例. 另外要说的是该插件默认采用了不免费的Glyphicons图标库，所以我很费劲的将示例中使用到的图标库给换成了基于font-awesome-4.7的图标库，一边是还需要熟悉fileinput的API，一边也要找图标，所以还是比较费劲的。 小技巧 ① 需要限制文件上传类型可以使用html5的input自带的限制属性，它将在选择文件处生效，直接根据后缀名过滤，优于代码中的选择不符合的格式的提示效果。 ② 选择后的文件上传可以不必采用fileinput组件提供的实现，也可以自己采用ajax效果上传。 ③ html5的input自带...
文章分类：前端技术 Bootstrap
BootstrapBootstrap实践之滚动条插件
也或许是叫jQuery滚动条插件，它们都是去除默认的滚动条效果，将原始的滚动条自行设置，实现区域的滚动，支持鼠标的点击拖动与滚轮滚动，在某些时候拒绝浏览器自身的滚动条效果还是值得拥有的，本文只分享几个了解到的插件，具体实现与案例则自行查看。 jQuery-slimScroll https://github.com/kujian/jQuery-slimScroll mCustomScrollbar http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html 或 https://github.com/ColorlibHQ/gentelella/tree/master/vendors/malihu-custom-scrollbar-plugin jquery.nicescroll ...
文章分类：前端技术 Bootstrap
BootstrapBootstrap-table进阶篇（树形表格）
基本介绍 bootstrap-table的树形表格需要使用jquery.treegrid插件同时还需要引入bootstrap-table-treegird的增强插件，得益于bootstrap-table的增强，使用起来比较简单，简单的渲染即可。略微的介绍一下几个关键的属性： ① treeShowField 树菜单显示的属性列； ② parentIdField 上级菜单属性名称； ③ onResetView 树形表格渲染时机； ④ onResetView 的 treeColumn 属性：树形表格增加的tree图标展示列位置；initialState属性：默认展开第几级菜单； 本文示例实现一个按层级结构显示的上下级菜单，默认全部展开，并增加全部展开与全部折叠的效果，详细如下。 运行示例 参考代码 html代码 <!DOCTYPE html> <html lang="en"> <head> <m...
文章分类：前端技术 Bootstrap
BootstrapBootstrap-table进阶篇（列宽拖动）
对于列宽拖动的插件了解不是很多，并且没有对不换行的表格进行详细探测，仅仅按照官网示例实现了该插件的使用，参考如下。 运行效果 参考代码 <!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/resizable/jquery.resizableColumns.css" /> <link rel="stylesheet" href="../../bootstrap.min.css" /> <link rel="st...
文章分类：前端技术 Bootstrap
BootstrapBootstrap-table进阶篇（冻结列）
基本介绍 目前bootstrap-table的最新版本中冻结列效果还是非常不错的，经过分析后发现它的实现就是根据参数设置复制出另一套表格，将复制出的表格（冻结列的部分）覆盖至原始表格出，达到当原始表格在出现横向滚动条的时候，滚动条拖动而列不动的效果。最新版本的实现有左侧冻结列与右侧冻结，记得在工作中使用到的是早期v1.12.0版本（好像是，写本篇文章的时候未看），它的冻结列在配合项目中的模板主题使用的时候出现了几个问题（最终完美的解决了），具体问题如下： ① 横向滚动条被冻结列的部分遮挡住了一点点； ② 将滚动条拖动至最右侧时导致表格的边框线对不齐； ③ 当动态列使用冻结列时需要判定冻结列的大小与表格总列数的大小，否则会出现显示问题； ④ 当冻结列部分出现有样式效果与点击事件或者行取数逻辑时； 不过我相信在现如今的新版本中它们应该都不是问题了，示例如下。 示例效果 参考代码 <!DOCTY...
文章分类：前端技术 Bootstrap
BootstrapBootstrap-table进阶篇（动态列）
许多的表格组件都支持动态渲染列，印象中bootstrap-table的没有找到动态列的实现，都是先销毁表格再重新渲染，鉴于此种实现就有了本篇文章。 本篇示例以3个月份为例，通过3个按钮的点击事件，实现3个月份的倒数5天时间的动态列表格数据显示，理论上比较简单，只是将columns表格列与表格数据的动态展示即可，详细如下（3个按钮可点击）。 运行结果 参考代码 <!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="../../bootstrap....
文章分类：前端技术 Bootstrap
BootstrapBootstrap-table进阶篇（单元格合并）
基本介绍 这里说的单元格合并不是标题行的单元格合并，也不是表格数据的横向合并，就是使用最普遍的单元格纵向合并效果，首选来说官网提供的有单元格合并示例（之前看过一眼），似乎使用起来需要自己做一些计算逻辑，太麻烦，所以考虑自己的实现。 多年前随便一搜jQuery的table单元格合并插件，有许多许多，后来找到一款使用至今的插件，代码写的一般，可以满足基于table布局的横向与纵向合并效果，经过改造（适配）可用于各个js框架的单元格合并效果，比如说曾经就支持了jquery widgets的datagrid插件的单元格合并效果。 至于多列的并列合并问题，其实在前台上很好解决，无需限制N-1的最大合并范围小于N，直接将唯一约束条件隐藏在td的某个元素中，再根据td的html()去做对比就可以了。 参考代码 <table id="data-table"></table> <script type="t...
文章分类：前端技术 Bootstrap
Bootstrap运营时间： 天
用户数量： 人
文章数量： 篇
评论数量： 条
点赞个数： 个
最后更新：