bootstrap table 父子表實現【無限級】菜單管理功能

時間 2019-11-26

標籤 bootstrap table 父子實現無限級菜單管理功能欄目 Bootstarp 简体版

原文原文鏈接

bootstrap table 父子表實現【無限級】菜單管理功能

實現效果

前端代碼

<%@ page        language="java"        import="java.util.*"        pageEncoding="UTF-8" %>
<%@include file="/WEB-INF/include/tags.jsp" %>
<!DOCTYPE HTML>
<html>
<head>
    
	<!-- 引入jquery插件 -->
	<script src="/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
	<!-- 引入bootstrap插件 -->
	<script src="/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>
	<link href="/bootstrap/3.3.4/css_default/bootstrap.min.css" type="text/css"   rel="stylesheet"/>
 	<!-- 引入bootstrap-table 語言包 -->
	<script src="/bootstrap/table/bootstrap-table-zh-CN.min.js"></script>
	<!-- 引入bootstrap-table插件 -->
	<script src="/bootstrap/table/bootstrap-table.min.js"></script>
    <link href="/bootstrap/table/bootstrap-table.min.css" rel="stylesheet">


    <style>
        .child-table thead {
			//隱藏子表的表頭
            /*display: none !important;*/
        }
    </style>

</head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <p class="tit">菜單列表</p>
    <div class="ibox">
        <div class="ibox-content">
            <table id="mytab" class="table table-hover"></table>
        </div>
    </div>
</div>


<script type="text/javascript">
    //菜單的根id
    var mRootId = '0';

    $(function () {
        //初始化表格數據  傳遞menu的rootid
        createTable(mRootId);
    })


    //詳情遞歸使用初始化表格方法 pid 菜單的父級id  tableObj 當前生成的table所綁定的對象
    function createTable(pid, tableObj) {

        var isSearch = false;

        if (!tableObj) {
            tableObj = "#mytab";
            isSearch = true;
        }

        //根據窗口調整表格高度
        $(window).resize(function () {
            $(tableObj).bootstrapTable('resetView', {
                height: tableHeight()
            })
        })


        $(tableObj).bootstrapTable({
            url: "${ctx}/",//數據源  後臺Controller的數據
            dataField: "dataList",//服務端返回數據鍵值 就是說記錄放的鍵值是rows，分頁時使用總記錄數的鍵值爲total
            // height: tableHeight(),//高度調整
            search: isSearch,//是否搜索
            pagination: false,//是否分頁
            contentType: "application/x-www-form-urlencoded",//請求數據內容格式 默認是 application/json 本身根據格式自行服務端處理
            dataType: "json",//返回數據類型
            method: "post",//請求方式
            searchAlign: "left",//查詢框對齊方式
            queryParamsType: "limit",//查詢參數組織方式
            queryParams: function getParams(params) {
                //params obj  其餘參數 除了自身傳遞的參數外，能夠由開發者自身設置傳遞
                params.other = "otherInfo";
                params.author = 'upuptop';
                params.pid = pid
                return params;
            },
            searchOnEnterKey: false,//回車搜索
            showRefresh: isSearch,//刷新按鈕
            showColumns: false,//列選擇按鈕
            buttonsAlign: "right",//按鈕對齊方式
            toolbarAlign: "right",//工具欄對齊方式
            columns: [
                {
                    title: "菜單名稱",//標題
                    field: "name",//鍵名  與上方dataList裏面存放的鍵值相對應  dataList['name':"菜單名稱"]
                    sortable: true,//是否可排序
                    align: "center",//水平
                    order: "desc"//默認排序方式
                },
                {
                    title: "連接",
                    align: "center",//水平
                    field: "href",
                    sortable: true,
                },
                // {
                //     title: "權限",
                //     field: "permission",
                //     sortable: true,
                //     align: "center",//水平
                //     width: "20%",
                // },
                {
                    title: "排序值",
                    field: "sort",
                    align: "center",//水平
                    sortable: true,
                },
                {
                    title: "是否顯示",
                    field: "isShow",
                    align: "center",//水平
                    sortable: true,

                },
                {
                    title: "操做",
                    field: "operation",
                    align: "center",//水平
                    sortable: true,
                },


            ],
            locale: "zh-CN", //中文支持
            detailView: true, //是否顯示詳情摺疊
            detailFormatter: function (index, row, element) {
                //    詳情摺疊 內容
				// return  '<p>這裏顯示詳情</p>'
            },

            responseHandler: function (res) {
				//請求返回數據成功會調用該方法/填充表格數據以前會調用這個方法
				
                $.each(res.menuList, function (index, item) {
                    if (item.isShow == 1) {
                        item.isShow = "顯示";
                    } else {
                        item.isShow = "隱藏";
                    }


                    var tempHtml = '<a title="修改" "openDialog2(\'修改菜單\',\'${ctx}//form?id=' + item.id + '\',\'800px\',\'550px\',\'' + item.pid + '\')" style="color: #4a93ff">修改</a>';
                    tempHtml += '&nbsp;|&nbsp;';
                    tempHtml += '<a title="添加下一級菜單" "openDialog2(\'添加菜單\',\'${ctx}//form?pid=' + item.id + '\',\'800px\',\'550px\',\'' + item.pid + '\')" style="color: #4a93ff">添加下一級菜單</a>';
                    tempHtml += '&nbsp;|&nbsp;';
                    tempHtml += '<a title="刪除" style="color: red" "delConfirmx(\'' + item.id + '\',\'' + item.pid + '\',\'' + item.name + '\')">刪除</a>';

                    item.operation = tempHtml;
                })

                return res;
            },
            onClickRow: function (row, $element) {
                //$element是當前tr的jquery對象
                //單擊row事件
            },

            onExpandRow: function (index, row, $detail) {
				//點擊左側的加號 展開查看詳情的時候調用  在這裏作了遞歸調用自身再次構建一張表   這裏的child-table-row.id是爲了修改或者刪除，刷新子表使用
                createTable(row.id, $detail.html('<table class="child-table child-table-' + row.id + '" style=""></table>').find('table'));
            },
            onLoadSuccess: function (data) {

            },
            detailFilter: function (index, row) {
				//是否展開詳情的過濾方法  能夠經過邏輯進行設置是否能夠展開查看詳情
                if (!row.childCount) {
                    return false;
                }

                return true;
            }

        });
    }


    // 刪除確認框
    function delConfirmx(id, pid, name) {
        top.layer.confirm('是否刪除菜單【' + name + '】？', {
            btn: ['肯定', '取消'] //按鈕  .bootstrapTable('refresh')
        }, function (index) {
            var tableObj;
            if (pid != mRootId) {
                tableObj = $(".child-table-" + pid);
            } else {
                tableObj = $("#mytab");
            }


            $.get("${ctx}/deleteData?id=" + id, function (res) {
                top.layer.msg("刪除成功");
                tableObj.bootstrapTable("refresh");
            })

        }, function (index) {
            top.layer.close(index);
        });

    }

    //添加修改對話框
    function openDialog2(title, url, width, height, pid) {

        console.log(pid);
        console.log($(".child-table-" + pid));

        if (navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)) {//若是是移動端，就使用自適應大小彈窗
            width = 'auto';
            height = 'auto';
        } else {//若是是PC端，根據用戶設置的width和height顯示。

        }

        top.layer.open({
            type: 2,
            area: [width, height],
            title: title,
            maxmin: true, //開啓最大化最小化按鈕
            content: url,
            // btn: ['肯定', '關閉'],
            // yes: function (index, layero) {
            // },
            end: function (index) {

                if (pid != mRootId) {
                    $(".child-table-" + pid).bootstrapTable('refresh');
                } else {
                    $("#mytab").bootstrapTable('refresh');
                    // window.location.reload()
                }

            }
        });

    }


    //設置表格的高度
    function tableHeight() {
        // return $(window).height() - 50;

        var height = $(window).height() - 120;
        //當表格內容的高度小於外面容器的高度，容器的高度設置爲內容的高度，相反時容器設置爲窗口的高度-160
        if ($(".fixed-table-body table").height() < $(".fixed-table-container").height()) {
            $(".fixed-table-container").css({"padding-bottom": "0px", height: $(".fixed-table-body table").height() + 20});
            // 是當內容少時，使用搜索功能高度保持不變
            height = "auto";
        } else {
            height = $(window).height() - 160;
        }

        return height;
    }
</script>
</body>
</html>

上方代碼須要修改的地方：javascript

<head>標籤中全部的引用須要修改。推薦cdn:https://www.bootcdn.cn/
數據源須要修改成自身服務端的請求地址

服務端代碼：css

@RequestMapping("/")
    @ResponseBody
    public Map<String, Object> menuData(String pid, String search, String order, Integer offset, Integer limit) {

        logger.info("  menuData()   pid   " + pid);
        logger.info("  menuData()   search   " + search);
        logger.info("  menuData()   order   " + order);
        logger.info("  menuData()   offset   " + offset);
        logger.info("  menuData()   limit   " + limit);

        Map<String, Object> resultMap = new HashMap<>();

        List<Menu> menuList = menuService.selectAllMenuByPid(pid, null);


        resultMap.put("menuList", menuList);

        return resultMap;
    }

參考地址：html

官方示例程序：https://examples.bootstrap-table.com/#welcomes/sub-table.html
博客API翻譯：http://www.javashuo.com/article/p-kmgycfug-ka.html
博客API翻譯：https://blog.csdn.net/rickiyeat/article/details/56483577前端

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。