使用bootstrap的树结构表格

最新推荐文章于 2024-06-12 16:34:59 发布

喜發發

最新推荐文章于 2024-06-12 16:34:59 发布

阅读量1.1k

点赞数

文章标签： bootstrap 前端 javascript

本文链接：https://blog.csdn.net/Yuanyuhuan1/article/details/133921305

版权

    <div class="container">
        <table id="table">
        </table>
    </div>

bootstrap需要引入一些js和css

在顶部引用

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>登录系统</title>

    <link rel="stylesheet"
          href="${staticGlobalPath}/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet"
          href="${staticGlobalPath}/bootstrap-table/bootstrap-table.min.css"/>

</head>
<body>

在script中引用的文件

<script src="${staticGlobalPath}/jquery/jquery-1.11.3.min.js"></script>
<script src="${staticGlobalPath}/bootstrap/js/bootstrap.min.js"></script>
<script src="${staticGlobalPath}/bootstrap-table/bootstrap-table.min.js"></script>
<script src="${staticGlobalPath}/plugins/admin/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="${staticGlobalPath}/bootstrap-treegrid.min.js"></script>

引用的文件，如有需要到百度网盘去提取

链接：https://pan.baidu.com/s/1c8sVC6u_PF-bKi9sjG1aUQ
提取码：mp9m

接下来是最关键的js代码

<script>
    var $table = $('#table');
    var data = "";

    $(function() {
        var ajaxPromise = $.ajax({
            type: "POST",
            url: "后台查询地址",
            cache: false, //禁用缓存
            dataType: "json"
        });
        ajaxPromise.done(function(result) {
            var json_data = JSON.stringify(result);
            var jdata = JSON.parse(json_data);
            data = jdata.data;
            console.log(data);
        //控制台输出一下数据
        $table.bootstrapTable({
            data: data,
            singleSelect: true,//单行选择
            clickToSelect: true,//点击行时自动选择
            striped: true,//是否显示行间隔色
            treeView: true,//是否显示树形视图
            treeId: "id",//定义关键字段来标识树节点
            treeField: "orgName",//定义树节点字段
            treeParentId: "pid", //定义父级ID字段
            treeRootLevel: 1,//树根的级别
            treeCollapseAll: false,//是否全部折叠，默认折叠
            cascadeCheck: false,//是否层叠选中状态(选中父级，子级全部选中) true=层叠选中，需要singleSelect: false；false=不是层叠选中
            uniqueId: "id", //每一行的唯一标识，一般为主键列

            columns: [
                { field: 'check', width:"5%", checkbox: true, formatter: function (value, row, index) {
                        if (row.check == true) {
                            // console.log(row.serverName);
                            //设置选中
                            return { checked: true };
                        }
                    }
                },
                { field: 'id', title: '组织编码', width:"15%"},
                { field: 'orgName', title: '组织机构名称', width:"25%"},
                // {field: 'pid', title: '父机构'},
                { field: 'orgType', title: '单位分类' , width:"15%", sortable: true, align: 'center', formatter: 'statusFormatter'},
                { field: 'operate', title: '操作' , width:"15%", align: 'center', events : operateEvents, formatter: 'operateFormatter' },

            ],
        });
    });
        });
    // 格式化按钮
    function operateFormatter(value, row, index) {
        return [
            '<button class="btn btn-primary btn-sm" style="margin-right:5px;" onclick=toAdd(' + row.id+ ')   data-target="#modal-add" >新增</button>',
            '<button class="btn  btn-warning btn-sm" style="margin-right:5px;" onclick=toEdit(' + row.id+ ')   data-target="#modal-edit" >编辑</button>',
            '<button class="btn  btn-info btn-sm" style="margin-right:5px;"   onclick=toView(' + row.id+ ')  data-target="#modal-view" >查看</button>',
            '<button class="btn btn-danger  btn-sm"  onclick=delFromID(' + row.orgId + ') >删除</button>'
        ].join('');
    }
    // 格式化类型
    function typeFormatter(value, row, index) {
        if (value === 'menu') { return '菜单'; }
        if (value === 'button') { return '按钮'; }
        if (value === 'api') { return '接口'; }
        return '-';
    }
    function statusFormatter(value, row, index) {
        if (value === 0) {
            return '<span class="label label-success">一类</span>';
        } else{
            return '<span class="label label-default">二类</span>';
        }
    }

    //初始化操作按钮的方法
    window.operateEvents = {
        'click .RoleOfadd': function (e, value, row, index) {
            add(row.id);
        },
        'click .RoleOfdelete': function (e, value, row, index) {
            del(row.id);
        },
        'click .RoleOfedit': function (e, value, row, index) {
            update(row.id);
        }
    };
</script>
<script>
    /**
     * 选中父项时，同时选中子项
     * @param datas 所有的数据
     * @param row 当前数据
     * @param id id 字段名
     * @param pid 父id字段名
     */
    function selectChilds(datas,row,id,pid,checked) {
        for(var i in datas){
            if(datas[i][pid] == row[id]){
                datas[i].check=checked;
                selectChilds(datas,datas[i],id,pid,checked);
            };
        }
    }

    function selectParentChecked(datas,row,id,pid){
        for(var i in datas){
            if(datas[i][id] == row[pid]){
                datas[i].check=true;
                selectParentChecked(datas,datas[i],id,pid);
            };
        }
    }

    function test() {
        var selRows = $table.bootstrapTable("getSelections");
        if(selRows.length == 0){
            alert("请至少选择一行");
            return;
        }

        var postData = "";
        $.each(selRows,function(i) {
            postData += this.id;
            if (i < selRows.length - 1) {
                postData += "， ";
            }
        });
        alert("你选中行的 id 为："+postData);

    }

  function add(id) {
        alert("add 方法 , id = " + id);
    }
    function del(id) {
        alert("del 方法 , id = " + id);
    }
    function update(id) {
        alert("update 方法 , id = " + id);
    }
</script>

喜發發

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
使用bootstrap的树结构表格

链接：https://pan.baidu.com/s/1c8sVC6u_PF-bKi9sjG1aUQ。bootstrap需要引入一些js和css。引用的文件，如有需要到百度网盘去提取。script中引用的文件。接下来是最关键的js代码。
复制链接

扫一扫