加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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
            });

因为是封装的数据,返回的和控件要求的对不上,所以得转一下.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读