bootstrapTable treegrid的使用
发布时间:2020-12-17 20:43:15 所属栏目:安全 来源:网络整理
导读:最近打算自己弄一个后台,在整顿树形插件的时候,遇到问题,bootstrapTable treegrid最开始是怎么都显示不了树形,然后是数据出不来, 现在来记录下. 问题1:最开始怎么都显示不出来的问题,是因为?bootstrap-table.min.css 的问题.替换后OK了 问题2:数据不出来的问
最近打算自己弄一个后台,在整顿树形插件的时候,遇到问题,bootstrapTable treegrid最开始是怎么都显示不了树形,然后是数据出不来, 现在来记录下. 问题1:最开始怎么都显示不出来的问题,是因为?bootstrap-table.min.css 的问题.替换后OK了 问题2:数据不出来的问题,因为返回的数据格式不对. $(‘#exampleTable‘) .bootstrapTable( { type : "GET",url : prefix + "/list",// 服务器数据的加载地址 idField: ‘menuId‘,dataType: ‘json‘,responseHandler: function (res) { //将服务端你的数据转换成bootstrap table 能接收的类型 return { "data": res.list //数据 }; },// //请求服务器数据时,你可以通过重写参数的方式添加一些额外的参数,例如 toolbar 中的参数 如果 // queryParamsType = ‘limit‘,返回参数必须包含 // limit,offset,search,sort,order 否则,需要包含: // pageSize,pageNumber,searchText,sortName,// sortOrder. // 返回false将会终止请求 columns: [ { field: ‘check‘,checkbox: true,formatter: function (value,row,index) { if (row.check == true) { // console.log(row.serverName); //设置选中 return {checked: true}; } } },{field: ‘name‘,title: ‘名称‘},// {field: ‘id‘,title: ‘编号‘,sortable: true,align: ‘center‘},// {field: ‘pid‘,title: ‘所属上级‘}, {field: ‘status‘,title: ‘状态‘,sortable: true,align: ‘center‘,formatter: ‘statusFormatter‘},/* {field: ‘permissionValue‘,title: ‘权限值‘},{ field: ‘operate‘,title: ‘操作‘,align: ‘center‘,events: operateEvents,formatter: ‘operateFormatter‘ }*/],// bootstrap-table-treegrid.js 插件配置 -- start //在哪一列展开树形 treeShowField: ‘name‘,//指定父id列 parentIdField: ‘parentId‘,onResetView: function (data) { //console.log(‘load‘); $table.treegrid({ initialState: ‘collapsed‘,// 所有节点都折叠 // initialState: ‘expanded‘,// 所有节点都展开,默认展开 treeColumn: 1,// expanderExpandedClass: ‘glyphicon glyphicon-minus‘,//图标样式 // expanderCollapsedClass: ‘glyphicon glyphicon-plus‘, onChange: function () { $table.bootstrapTable(‘resetWidth‘); } }); //只展开树形的第一级节点 $table.treegrid(‘getRootNodes‘).treegrid(‘expand‘); },onCheck: function (row) { var datas = $table.bootstrapTable(‘getData‘); // 勾选子类 selectChilds(datas,"id","parentId",true); // 勾选父类 selectParentChecked(datas,"parentId") // 刷新数据 $table.bootstrapTable(‘load‘,datas); },onUncheck: function (row) { var datas = $table.bootstrapTable(‘getData‘); selectChilds(datas,"id",false); $table.bootstrapTable(‘load‘,datas); } // bootstrap-table-treetreegrid.js 插件配置 -- end }); 因为是封装的数据,返回的和控件要求的对不上,所以得转一下. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |