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>

    <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);
            }
            if(!$.zui.store.get('hang')){
                $.zui.store.set('hang', 0);
                $.zui.store.set('lie', 0);
            }

            $("#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')});
            makeRowsAndCols($.zui.store.get('rows'),$.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
            });
            $('[data-toggle="tooltip"]').tooltip();
        });

        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');

            makeRowsAndCols(rows,cols);
        }

        function makeRowsAndCols(rows, cols){
            $("#topTR").html('');
            for(var i=0;i<rows;i++){
                var val = ' value = "'+i+'" ';
                var lie = $.zui.store.get('lie');
                if(i==lie){
                    val += ' checked';
                }
                var td = '<td class="topTD"><input type="radio" name="lie" '+val+' class="topRow" data-toggle="tooltip" data-placement="top" title="设为起始列"></td>';
                $("#topTR").append(td);
            }

            $("#colTable").html('<tr><td class="leftCol" ><input type="radio" disabled></td></tr>');
            for(var i=0;i<cols;i++){
                var val = ' value = "'+i+'" ';
                var hang = $.zui.store.get('hang');
                if(i==hang){
                    val += ' checked';
                }
                var tr = '<tr><td class="leftCol" data-toggle="tooltip" data-placement="right" title="设为起始排"><input class="left" name="hang" '+val+' type="radio" ></td></tr>';
                $("#colTable").append(tr);
            }

            $(".topRow").change(function() {
                $.zui.store.set('lie',$(this).val());
            });

            $(".left").change(function() {
                $.zui.store.set('hang',$(this).val());
            });

        }

    </script>
</head>
<body>
<nav class="navbar navbar-inverse header" role="navigation">
    <a class="navbar-brand" href="">会议排座系统</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;display:none;">
        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 class="g-bd1 f-cb">
                <div class="g-sd1">
                    <table id="colTable">
                        <tr>
                            <td class="leftCol" ><input type="radio" disabled></td>
                        </tr>
                        <tr>
                            <td class="leftCol"><input type="radio"></td>
                        </tr>

                    </table>
                </div>
                <div class="g-mn1">
                    <div class="g-mn1c">
                        <div>
                            <table>
                                <tr id="topTR">
                                    <td class="topTD"><input type="radio" name="row" class="topRow"></td>
                                </tr>
                            </table>

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

        </div>
    </div>

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