利用bootstrap的modal和tab製做的聯動自定義UI

時間 2019-12-17
標籤利用 bootstrap modal tab 製做聯動自定義欄目 Bootstarp 简体版
原文原文鏈接
直接上代碼。css
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 實例 - 模態框（Modal）插件</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        var productTypeData = [{
            "codeId": 10043,
            "meaning": "服務",
            "parentCodeValueId": null,
        }, {
            "codeId": 10043,
            "meaning": "銷售",
            "parentCodeValueMeaning": null
        }];
        var productCatalog1Data = [{
            "parentCategotyId": "-1",
            "categotyName": "Callidus",
            "categotyId": "101"
        }, {
            "parentCategotyId": "-1",
            "categotyName": "MS",
            "categotyId": "102"
        }, {
            "parentCategotyId": "-1",
            "categotyName": "Offshore",
            "categotyId": "103"
        }, {
            "parentCategotyId": "-1",
            "categotyName": "Oracle",
            "categotyId": "104"
        }, {
            "parentCategotyId": "-1",
            "categotyName": "SAP",
            "categotyId": "105"
        }, {
            "parentCategotyId": "-1",
            "categotyName": "Siemens",
            "categotyId": "106"
        }, {
            "parentCategotyId": "-1",
            "categotyName": "測試產品",
            "categotyId": "107"
        }, {
            "parentCategotyId": "-1",
            "categotyName": "穆迪",
            "categotyId": "108"
        }, {
            "parentCategotyId": "-1",
            "categotyName": "夏爾",
            "categotyId": "110"
        }, {
            "parentCategotyId": "-1",
            "categotyName": "運維",
            "categotyId": "111"
        }, {
            "parentCategotyId": "-1",
            "categotyName": "test",
            "categotyId": "10023"
        }];
        var productCatalog2Data = [{
            "parentCategotyId": "101",
            "categotyName": "Callidus",
            "categotyId": "112"
        }, {
            "parentCategotyId": "102",
            "categotyName": "Dynamics AX",
            "categotyId": "113"
        }, {
            "parentCategotyId": "102",
            "categotyName": "Dynamics CRM",
            "categotyId": "114"
        }, {
            "parentCategotyId": "102",
            "categotyName": "Sharepoint",
            "categotyId": "115"
        }, {
            "parentCategotyId": "103",
            "categotyName": "JAVA開發",
            "categotyId": "116"
        }, {
            "parentCategotyId": "103",
            "categotyName": "Oracle開發",
            "categotyId": "117"
        }, {
            "parentCategotyId": "103",
            "categotyName": "SAP開發",
            "categotyId": "118"
        }, {
            "parentCategotyId": "104",
            "categotyName": "Agile",
            "categotyId": "119"
        }, {
            "parentCategotyId": "104",
            "categotyName": "BI",
            "categotyId": "120"
        }, {
            "parentCategotyId": "104",
            "categotyName": "EBS ERP",
            "categotyId": "121"
        }, {
            "parentCategotyId": "104",
            "categotyName": "EBS HR",
            "categotyId": "122"
        }, {
            "parentCategotyId": "104",
            "categotyName": "Hyperion",
            "categotyId": "123"
        }, {
            "parentCategotyId": "104",
            "categotyName": "Middleware",
            "categotyId": "124"
        }, {
            "parentCategotyId": "104",
            "categotyName": "PeopleSoft",
            "categotyId": "125"
        }, {
            "parentCategotyId": "104",
            "categotyName": "SIEBLE",
            "categotyId": "126"
        }, {
            "parentCategotyId": "104",
            "categotyName": "其餘",
            "categotyId": "127"
        }, {
            "parentCategotyId": "105",
            "categotyName": "BO",
            "categotyId": "128"
        }, {
            "parentCategotyId": "105",
            "categotyName": "HANA",
            "categotyId": "129"
        }, {
            "parentCategotyId": "105",
            "categotyName": "SAP ERP",
            "categotyId": "130"
        }, {
            "parentCategotyId": "105",
            "categotyName": "SAP HR",
            "categotyId": "131"
        }, {
            "parentCategotyId": "105",
            "categotyName": "SAP CRM",
            "categotyId": "132"
        }, {
            "parentCategotyId": "106",
            "categotyName": "NX",
            "categotyId": "133"
        }, {
            "parentCategotyId": "106",
            "categotyName": "SolidEdge",
            "categotyId": "134"
        }, {
            "parentCategotyId": "106",
            "categotyName": "TeamCenter",
            "categotyId": "135"
        }, {
            "parentCategotyId": "106",
            "categotyName": "Techomatix",
            "categotyId": "136"
        }, {
            "parentCategotyId": "107",
            "categotyName": "HCM",
            "categotyId": "137"
        }, {
            "parentCategotyId": "107",
            "categotyName": "HEC費控系統",
            "categotyId": "138"
        }, {
            "parentCategotyId": "107",
            "categotyName": "HLS融資租賃系統",
            "categotyId": "139"
        }, {
            "parentCategotyId": "107",
            "categotyName": "IT規劃",
            "categotyId": "140"
        }, {
            "parentCategotyId": "107",
            "categotyName": "MAS ERP",
            "categotyId": "141"
        }, {
            "parentCategotyId": "107",
            "categotyName": "SRM供應商關係管理系統",
            "categotyId": "142"
        },{
            "parentCategotyId": "108",
            "categotyName": "穆迪",
            "categotyId": "144"
        }, {
            "parentCategotyId": "109",
            "categotyName": "移動應用",
            "categotyId": "145"
        }, {
            "parentCategotyId": "109",
            "categotyName": "開發",
            "categotyId": "146"
        }, {
            "parentCategotyId": "110",
            "categotyName": "BPO",
            "categotyId": "147"
        }, {
            "parentCategotyId": "110",
            "categotyName": "ICast",
            "categotyId": "148"
        }, {
            "parentCategotyId": "110",
            "categotyName": "Ifile",
            "categotyId": "149"
        }, {
            "parentCategotyId": "111",
            "categotyName": "MAS",
            "categotyId": "150"
        }, {
            "parentCategotyId": "111",
            "categotyName": "ITO",
            "categotyId": "151"
        }, {
            "parentCategotyId": "111",
            "categotyName": "Oralce客服中心",
            "categotyId": "152"
        }, {
            "parentCategotyId": "111",
            "categotyName": "SAP CCC",
            "categotyId": "153"
        }, {
            "parentCategotyId": "104",
            "categotyName": "DSTEST",
            "categotyId": "10009"
        }
        ];

        $(function () {
            //根據數據源建立各個button按鈕
            //產品類型
            var $tr=$("<tr></tr>");
            for(let i=0;i<Math.ceil(productTypeData.length);i++){
                var $td=$("<td></td>");
                var $btn=$("<button class=\"btn btn-default\"></button>").text(productTypeData[i].meaning);
                $btn.appendTo($td);
                $td.appendTo($tr)
                $tr.appendTo($("#productTypeTable"))
            }
            //一級產品
            for(var j=0;j<Math.ceil(productCatalog1Data.length/4);j++){
                var $tr1=$("<tr></tr>");
                for(let i=j*4;i<j*4+4&&i<productCatalog1Data.length;i++){
                    var $td1=$("<td></td>");
                    var $btn1=$("<button class=\"btn btn-default\"></button>").text(productCatalog1Data[i].categotyName);
                    $btn1.attr("id",productCatalog1Data[i].categotyId);
                    $btn1.appendTo($td1);
                    $td1.appendTo($tr1);
                    $tr1.appendTo($("#firstTable"));
                }
            }
            var item={};
            var itemList=[];
            $("#showModel").click(function () {//彈出modal框而且初始化
                item={};
                $("#myModal").modal();
                $("#error").text("");
                $('#myTab a:first').tab('show');
                $("#home button").removeClass('btn-primary');
                $("#firstTable button").removeClass('btn-primary');
                $("#secondTable button").removeClass('btn-primary');

            })
            $("#home button").click(function () {//給產品類型上的button添加點擊事件
                item.n1=$(this).text();
                $("#home button").removeClass('btn-primary');
                $(this).addClass("btn btn-primary");
                $('#myTab li:eq(1) a').tab('show');//跳轉到第二個標籤頁
            });
            $("#firstTable button").click(function () {//給一級產品上的button添加點擊事件
                item.n2=$(this).text();
                $("#firstTable button").removeClass('btn-primary');
                $(this).addClass("btn btn-primary");
                var $fatherId=$(this).attr("id");
                //二級產品
                var filterData=productCatalog2Data.filter(function (i, index, arr) {
                    return i.parentCategotyId==$fatherId;
                });
                $("#secondTable").html("");
                for(var k=0;k<Math.ceil(filterData.length/4);k++){
                    var $tr2=$("<tr></tr>");
                    for(let q=k*4;q<k*4+4&&q<filterData.length;q++){
                        var $td2=$("<td style=\"border: 0px solid transparent\"></td>");
                        var $btn2=$("<button class=\"btn btn-default\"></button>").text(filterData[q].categotyName);
                        $btn2.appendTo($td2);
                        $td2.appendTo($tr2);
                        $tr2.appendTo($("#secondTable"));
                    }
                }
                $('#myTab li:eq(2) a').tab('show');//跳轉到第二個標籤頁
                $("#secondTable button").click(function () {//給二級產品上的button添加點擊事件
                    item.n3=$(this).text();
                    $("#secondTable button").removeClass('btn-primary');
                    $(this).addClass("btn btn-primary");
                });
            });
            $("#submit").click(function () {//肯定按鈕
                if(!item.n1){
                    $("#error").text('請選擇產品類型');
                }else if(!item.n2){
                    $("#error").text('請選擇一級產品');
                }else if(!item.n3){
                    $("#error").text('請選擇二級產品');
                }else{
                    $("#myModal").modal('hide')
                    itemList.push(item);
                }
                var newList=$.map(itemList,function (obj) {
                   return  (obj.n1+"."+obj.n2+"."+obj.n3);
                })
               $("#choose").text(newList.join(";").toString());
            });
        });
    </script>
</head>
<body>

<!-- 按鈕觸發模態框 -->
<button class="btn btn-success btn-lg" id="showModel">
    開始演示模態框
</button>
<div id="choose"></div>
<!-- 模態框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
                <div class="modal-header" style="border: none;height: 15px">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h5  style="color: red" class="modal-title" id="error"></h5>
                </div>
            <div class="modal-body">
                <ul id="myTab" class="nav nav-tabs">
                    <li class="active">
                        <a href="#home" data-toggle="tab">產品類型
                        </a>
                    </li>
                    <li><a href="#ios" data-toggle="tab">一級產品</a></li>
                    <li><a href="#jmeter" data-toggle="tab">二級產品</a></li>
                </ul>
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade in active" id="home">
                        <table class="table" id="productTypeTable">
                        </table>
                    </div>
                    <div class="tab-pane fade" id="ios">
                        <table class="table" id="firstTable">
                        </table>
                    </div>
                    <div class="tab-pane fade" id="jmeter">
                        <table class="table" style="border: 0px solid transparent" id="secondTable">
                        </table>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-info" id="submit">
                                肯定
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>
</html>
效果圖：