seating-in-china
/
index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>中国特色排座系统</title>

    <link href="./static/zui-1.8.1/css/zui.min.css" rel="stylesheet">

    <link href="./static/zui-1.8.1/css/zui-theme-indigo.css" rel="stylesheet">

    <!-- jQuery (ZUI中的Javascript组件依赖于jQuery) -->
    <script src="./static/zui-1.8.1/lib/jquery/jquery.js"></script>
    <!-- ZUI Javascript组件 -->
    <script src="./static/zui-1.8.1/js/zui.min.js"></script>

    <script src="./static/zui-1.8.1/lib/selectable/zui.selectable.js"></script>

    <link href="./static/seating-in-china/jquery.seating-in-china.css" rel="stylesheet">
    <script src="./static/seating-in-china/jquery.seating-in-china.js"></script>

    <link href="./static/zui-1.8.1/lib/bootbox/bootbox.min.css" rel="stylesheet">
    <script src="./static/zui-1.8.1/lib/bootbox/bootbox.min.js"></script>

    <style>
        body{
            background-color: #fff;
        }
        .header{
            margin-bottom: 0px;
        }
        .showBolder{
            border:1px solid red;
        }
        .tree-menu{
            border-radius: 0px;
        }
    </style>
    <script>
        $(function(){
            var options = {
                selector: '.seat', // #selectable 内的所有 div 都可以进行选中
                rangeStyle: {
                    border: '1px solid red' // 拖选范围指示矩形边框设置为红色
                },
                finish: function(data) {  // 选择结束时的回调函数
                    // 所有元素的选中或非选中状态

                    // 所有已选中的元素 ID 值的数组
                    var selectedData = data.selected;

                    $.zui.store.set('selectedData', selectedData);
                    $("#selectedDataDiv").html(selectedData.join(","));
                    $("#count").html(selectedData.length);

                    new $.zui.Messager('数据保存成功！', {
                        icon: 'check',
                        type: 'success',
                        placement:'bottom-right'
                    }).show();
                }
            };
            if(!$.zui.store.get('rows')){
                $.zui.store.set('rows', 20);
                $.zui.store.set('cols', 15);
            }

            $("#rows").val($.zui.store.get('rows'));
            $("#cols").val($.zui.store.get('cols'));

            $('#meetingPlace').selectable(options);
            $("#meetingPlace").seating({rows:$.zui.store.get('rows'),cols:$.zui.store.get('cols')});

            var mySelectable = $('#meetingPlace');
            var selectedData = $.zui.store.get('selectedData');

            if(selectedData){
                $("#meetingPlace").initSeatSelection(selectedData);
                $("#selectedDataDiv").html(selectedData.join(","));
                $("#count").html(selectedData.length);
            }
            var result = "一、点击会场定义，定义画布范围以及座次分布布局；<br/>" +
                         "二、点击会议座次安排可以先捋顺单位和人员的顺序；<br/>" +
                         "三、选择排座规则后点击自动排座即可。<br/>" +
                         "源码地址：https://gitee.com/caolj/seating-in-china";
            bootbox.alert({
                title: "会议排座使用步骤",
                message: result
            });

        });
        function settingMeetingPlace(){
            var rows = $("#rows").val();
            var cols = $("#cols").val();
            $("#meetingPlace").seating({rows:rows,cols:cols});
            $.zui.store.set('rows', rows);
            $.zui.store.set('cols', cols);
            $.zui.store.remove('selectedData');
        }

    </script>
</head>
<body>
<nav class="navbar navbar-inverse header" role="navigation" >
    <a class="navbar-brand" href="">会议排座DEMO</a>
    <ul class="nav navbar-nav ">
        <li><a href="./index.html">会场定义</a></li>
        <li><a href="./meetingPersons.html">会议座次安排</a></li>
    </ul>
    <div class="pull-right" style="color:#fff;padding:10px;font-weight:bolder;">
        https://gitee.com/caolj/seating-in-china
    </div>
</nav>
<div class="container-fluid with-padding" >
    <div class="row">
        <div class="col-md-2">
            <div class="panel" style="margin-bottom:0px;">
                <div class="panel-heading">
                    已选 <span id="count"></span> 座次
                </div>
                <div class="panel-body">
                    <div id="selectedDataDiv" style="word-break:break-all">

                    </div>
                </div>
            </div>

        </div>
        <div class="col-md-10">
            <div class="center-block" style="margin-bottom:5px;">
                <div class="input-group " style="width:320px;margin-bottom:5px;">
            <span class="input-group-addon">
                画布设置
            </span>
                    <input type="text" id="rows" value="" class="form-control">
                    <span class="input-group-addon">
                行
            </span>
                    <input type="text" id="cols" value="" class="form-control">
                    <span class="input-group-addon">
                列
            </span>
                    <span class="input-group-btn">
                <button class="btn btn-primary" type="button" onclick="settingMeetingPlace();">
                    <i class="icon icon-wrench"></i>
                    设置
                </button>
            </span>
                </div>
                <div >

                </div>

            </div>
            <div id="meetingPlace" class="meetingPlace" style="">
            </div>
        </div>
    </div>

</div>
</body>
</html>