利用bootstrap的modal和tab制作的联动自定义UI

直接上代码。

<!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>


效果图:


选中后如图:

注意事项:

1. 模态框里面的各个按钮是button标签,在应用到项目中的时候,点击的话可能会出现页面刷新的情况。这时候要将动态生成的button标签改成type=button的input标签;

2.由于项目需要,这里的产品类型和一级产品之间并没有级联关系;

3.这里的例子带有校验功能,即产品类型、一级产品和二级产品都是必选项,有任意一个没有选择的话弹出框左上角会有错误提示;

4.这里的级联操作没有使用远程数据做演示,性质是一样的,只不过我在级联的时候用的是js中的filter函数作为过滤,而ajax的方式是用过滤的参数作为请求下一级数据的参数;

5.其实项目中选中的效果是这样的:。有时间的话会在下一章继续完善成这样的样式。

6.如果发现bug或待改进的地方,希望多多指正,谢谢!


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值