40 Star 101 Fork 21

Elmo / seating-in-china

加入 Gitee
与超过 600 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
index.html 8.20 KB
一键复制 编辑 Web IDE 原始数据 按行查看 历史
caolijian1987 提交于 2018-08-22 09:46 . 123
<!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>

评论 ( 0 )

你可以在登录后,发表评论

JavaScript
1
https://gitee.com/elmo87/seating-in-china.git
git@gitee.com:elmo87/seating-in-china.git
elmo87
seating-in-china
seating-in-china
master

搜索帮助

105716 1d94204e 1850385 105716 2d26be5c 1850385