本文共 2288 字,大约阅读时间需要 7 分钟。
目前框架里的树表格是基于基于
bootstrapTreeTable/bootstrap-table-treegrid
修改而来的,但是有很多Bootstrap Table
自带的功能都没有了,而且样式显示也有些问题,所以尝试用Bootstrap Table
官网扩展里的来更换一下看效果怎么样Bootstrap Table
官网地址:TreeGrid jQuery plugin
官网地址:
下面开始修改
从Bootstrap Table
官网下载bootstrap-table-treegrid.js
或者bootstrap-table-treegrid.min.js
,结构如下
从TreeGrid jQuery plugin
官网下载jquery-treegrid
源码包,结构如下
页面引入js
和css
如下
ry-ui.js
,如下 idField: options.treeIdField, // 树表id字段,用于设置父子关系parentIdField: options.treeParentIdField, // 树表父id字段,用于设置父子关系treeShowField: options.treeShowField, // 树表显示折叠箭头字段rootParentId: options.treeRootParentId // 树表显示折叠箭头字段
$(function() { var options = { treeIdField: "id", treeParentIdField: "parentId", treeShowField: 'name', treeRootParentId: "0", pagination: false, url: prefix + "/list", createUrl: prefix + "/add", updateUrl: prefix + "/edit/{id}", detailUrl: prefix + "/detail/{id}", removeUrl: prefix + "/remove", exportUrl: prefix + "/export", modalName: "商品信息", onPostBody: function() { $("#" + table.options.id).treegrid({ treeColumn: 1, initialState: 'collapsed', expanderExpandedClass: 'treetable-expander glyphicon glyphicon-chevron-down', expanderCollapsedClass: 'treetable-expander glyphicon glyphicon-chevron-right', onChange: function() { $("#" + table.options.id).bootstrapTable('resetView') } }) }, columns: [{ checkbox: true }, { field: 'id', title: '主键', visible: false }, { field: 'name', title: '商品名称' }, { title: '操作', align: 'center', formatter: function(value, row, index) { var actions = []; actions.push('编辑 '); actions.push('删除 '); actions.push('详细'); return actions.join(''); } }] }; $.table.init(options);});
Bootstrap Table
原有的功能都可以使用,下面给出一张Bootstrap Table
官网的效果图 总结:虽然样式和普通表格一致了,功能也都可以使用,但是渲染速度并不如框架之前封装的,测试数据是600多条,如果千级或者万级对比,不好说哪个渲染速度更快,感兴趣的小伙伴可以自己测试一下,如果对框架原本封装的树表组件不太满意的可以试试这种方法
转载地址:http://jkatz.baihongyu.com/