bootstrap合并单元格

最新推荐文章于 2023-05-11 16:47:17 发布

liluo00000

最新推荐文章于 2023-05-11 16:47:17 发布

阅读量273

点赞数

文章标签： bootstrap jquery

本文链接：https://blog.csdn.net/liluo00000/article/details/112243795

版权

bootstrap合并单元格示例

**
直接上代码

<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/base">
</head>
<body>
<div class="panel-body" style="padding-bottom:0px;">
    <div class="panel panel-default" style="margin-top: 10px;">
        <div class="panel-heading">swagger转化jmeter工具</div>
        <div class="panel-body">
            <form class="form-inline" role="form" style="float: left; width: 100%;margin-left: 20px;">
                <div class="form-group">
                    <label for="api_url">swagger文档地址:</label>
                    <input type="text" class="form-control" name="api_url" id="api_url" style="width: 500px" placeholder="请输入地址" />
                </div>
                <div class="form-group">
                    <button type="button" id="queryBtn" onclick="getSwaggerDoc();" class="btn btn-primary">解析swagger</button>
                </div>
            </form>
            <form class="form-inline" role="form" style="float: left; width: 100%;margin-left: 20px;">
                <div class="form-group">
                    <label for="jmx_name">jmx命名:</label>
                    <input type="text" class="form-control" name="jmx_name" id="jmx_name" style="width: 500px" placeholder="给你的jmx取个名字吧" />
                </div>
                <div class="form-group">
                    <button type="button" onclick="getJmx();" class="btn btn-primary">生成JMX</button>
                </div>
            </form>
        </div>
    </div>
    <div class="bottomScroll">
    <table class="table table-hover table-striped" style="margin-top: -40px;" id="createSwaggerTable">
    </table>
    </div>
</div>
<script type="text/javascript">
    var allTagList;
    var domain;

    function getSwaggerDoc() {
        $('#createSwaggerTable').bootstrapTable({
            ajax: function (request) {
                var api_url = $("#api_url").val();
                var columnsArray = [];
                var datas=[];
                if (!checkParams(api_url)) {
                    return false;
                }
                $.ajax({
                    type: "POST",
                    url: "/getSwaggerDoc?api_url=" + api_url,
                    dataType: "JSON",
                    contentType: "application/json;charset=UTF-8",
                    success: function (returnMsg) {
                        domain = returnMsg.data.host;
                        allTagList = returnMsg.data.swaggerDocTagList;
                        for(var i=0;i<allTagList.length;i++){
                            var docApiModList=allTagList[i].swaggerDocApiModList;
                            for(var j=0;j<docApiModList.length;j++){
                                datas.push(docApiModList[j]);
                            }
                        }
                        columnsArray.push({
                                field: 'checkStatus',
                                checkbox:true
                            },
                            {
                                field: 'name',
                                title: '接口名'
                            },{
                                field: 'path',
                                title: '方法名'
                            },
                            {
                                field: 'summary',
                                title: '方法描述'
                            })
                        $('#createSwaggerTable').bootstrapTable("destroy").bootstrapTable({
                            data:datas,
                            columns: columnsArray,
                        })
                        mergeCells(datas,'name',1,$('#createSwaggerTable'));
                    }, error: function () {
                        window.Ewin.alert({message:'获取数据失败!'});
                    }
                })

            }
        })
    }

    function getJmx(){
        var jmx_name=$("#jmx_name").val();
        if (!checkParams(jmx_name)) {
            return false;
        }
        var rows = $('#createSwaggerTable').bootstrapTable('getSelections');
        console.log(rows)
        var postData={
            "rows":rows,
            "swaggerTagList":allTagList
        }
        $.ajax({
            type : "POST",
            url : "/createJmx?host="+domain+"&jmx_name="+jmx_name+"&execUser=1",
            dataType : "JSON",
            data : JSON.stringify(postData),
            contentType: "application/json;charset=UTF-8",
            success : function(returnMsg)
            {
                var url = "/downLoadJmx?fileName=" + jmx_name;
                window.open(url);
            },error:function(){
                window.Ewin.alert({message:'获取数据失败!'});
            }
        })
    }
    function mergeCells(data,fieldName,colspan,target){
        alert(1)
        //声明一个map计算相同属性值在data对象出现的次数和
        var sortMap = {};
        for(var i = 0 ; i < data.length ; i++){
            for(var prop in data[i]){
                if(prop == fieldName){
                    var key = data[i][prop]     //fieldName的value
                    if(sortMap.hasOwnProperty(key)){
                        sortMap[key] = sortMap[key] * 1 + 1;
                    } else {
                        sortMap[key] = 1;
                    }
                    break;
                }
            }
        }
        /*for(var prop in sortMap){
            console.log(prop,sortMap[prop])
        }*/
        //合并单元格
        var index = 0;
        for(var prop in sortMap){
            var count = sortMap[prop] * 1;
            $(target).bootstrapTable('mergeCells',{index:index, field:fieldName, colspan: colspan, rowspan: count});
            index += count;
        }
    }
    function setScroll() {
        var height=parseInt($(window).height())+"px";
        var width=parseInt($(window).width())+"px";

        $(".bottomScroll").css({"height":height,
            "width":width,
            'overflow-y': 'scroll',
            'overflow-x': 'scroll',
            'display': 'inline-grid'});
    }
    $(window).resize(function () {
        setScroll();
    });
    function checkParams(orderNo) {
        if (!orderNo) {
            window.Ewin.alert({message:'参数不能为空!'});
            return false;
        }
        return true;
    }
</script>
</body>

注意：后端接口返回得数据格式如下：
[
{
“city”: “广州市”,
“area”: “天河区”,
“gdp”:“100”
},
{
“city”: “广州市”,
“area”: “海珠区”,
“gdp”:“101”
},
{
“city”: “广州市”,
“area”: “番禺区”,
“gdp”:“102”
}
]