前端bootstraptable + jquery + python 实现人员分组管理
<!-- 新建、修改小组-->
<div class="modal fade" tabindex="-1" id="group_info" role="dialog">
<div class="modal-dialog" style="width: 60%;margin-top: -2%">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span>
</button>
<h4 class="modal-title" id="change_title"></h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label>小组名称:</label>
<input type="text" class="form-control" id="group_name" placeholder="队伍名" maxlength="10">
<span class="span_tip"> * 最大长度不得超过10个字符</span>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>队长:</label>
<select class="form-control select2 select2-hidden-accessible" style="width: 100%;" tabindex="-1" aria-hidden="true" id="captain_id">
</select>
<span class="span_tip"> * 每个小组最多一名队长</span>
</div>
</div>
<div class="col-lg-5">
<label>人员列表：</label>
<div class="person_list">
<table id="person_all"></table>
</div>
</div>
<div class="col-lg-2" style="text-align: center;">
<button id="arrow_left" type="button" class="btn btn-default" style="margin-top: 100%"><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span></button>
<br><br>
<button id="arrow_right" type="button" class="btn btn-default"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span></button>
</div>
<div class="col-lg-5">
<label>选中组员：（<span id="sel_count"></span>）</label>
<div class="person_list">
<div class="bootstrap-table">
<div class="fixed-table-toolbar">
<!-- <div class="pull-right search">-->
<!-- <input class="form-control" type="text" placeholder="搜索" disabled="disabled">-->
<!-- </div>-->
</div>
<div class="fixed-table-container" style="padding-bottom: 0px;">
<div class="fixed-table-header" style="display: none;">
<table>
</table>
</div>
<div class="fixed-table-body">
<table id="person_sel" class="table table-hover table-striped">
<thead style="">
<tr>
<th class="bs-checkbox " style="text-align: center; vertical-align: middle; width: 36px; " data-field="state">
<div class="th-inner ">
<input name="btSelectAll" id="btSelectAll" type="checkbox">
</div>
<div class="fht-cell">
</div>
</th>
<th style="text-align: center; vertical-align: middle; " data-field="username">
<div class="th-inner ">用户名</div>
<div class="fht-cell"></div>
</th>
<th style="text-align: center; vertical-align: middle; " data-field="name">
<div class="th-inner ">姓名</div>
<div class="fht-cell"></div>
</th>
<th style="text-align: center; vertical-align: middle; " data-field="power">
<div class="th-inner ">权限</div>
<div class="fht-cell"></div>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row footer_modal">
<button type="button" id="submit_btn" class="btn btn-success">确定</button>
<button type="button" id="cancel_btn" class="btn btn-default">取消</button>
<button type="button" id="reset_btn" class="btn btn-primary">重置</button>
</div>
</div>
</div>
</div>
</div>
</div>
// 全选按钮
$('#btSelectAll').unbind('click').on('click',function(){
$('input[name ="btSelectItem_selected"]').prop('checked',this.checked);
});
// 加载选择参赛小组队员列表
$('#person_all').bootstrapTable({
url: '/drill/get_person_all_list/',
locale: 'zh-CN',
pageList: [10, 25, 50, 100, 200],
pageSize: 15,
checkboxHeader: true,
clickToSelect: true,
search: true,
showColumns: false,
showRefresh: false,
minimumCountColumns: 2,
striped: true,
queryParams: function (params) {
return {
user_name:$('#search_name').val(),
};
},
columns: [
{field: 'state', checkbox: true, align: 'center', valign: 'middle' },
// {field: 'id', title: '用户ID', align: 'center', valign: 'middle',},
{field: 'username', title: '用户名', align: 'center', valign: 'middle',},
{field: 'name', title: '姓名', align: 'center', valign: 'middle',},
{field: 'power', title: '权限', align: 'center', valign: 'middle',
formatter: function (value, row, index) {
if (value == '1'){
return '管理员';
}else if (value == '11'){
return '导调员';
}else if (value == '12'){
return '设计师';
}else if (value == '13'){
return '评估师';
}else if (value == '14'){
return '参赛人员';
}
}
},
],
onClickRow: function (row) {
},
onDblClickRow: function (row) {
}
});
// 创建小组
$('#group_add_btn').unbind('click').on('click',function(){
$('#group_info').modal('show');
$('#change_title').text('创建小组');
msg_init(null);
// 重置按钮点击
$('#reset_btn').unbind('click').on('click',function(){
msg_init(null);
});
//确认添加按钮点击事件
$('#submit_btn').unbind('click').on('click',function(){
if($('#group_name').val()==null ||$('#group_name').val()==''){
$('#message_tips').modal('show');
$('#message').text("请输入小组名称！");
}else{
var flag = true;
// 获取队长id
var captain_id = $('#captain_id').val();
//获取队员id
var member_ids = '';
var member_ids_list = []
var selected_person_list = $('input[name ="btSelectItem_selected"]');
if(selected_person_list != null && selected_person_list.length !=0){
for (var i = 0;i<selected_person_list.length;i++){
if (i == selected_person_list.length-1){
member_ids += $(selected_person_list[i]).val();
}else {
member_ids += $(selected_person_list[i]).val() + ';';
}
member_ids_list.push($(selected_person_list[i]).val())
}
for (var j=0;j<member_ids_list.length;j++){
if (captain_id == member_ids_list[j]){
flag = false;
break;
}
}
if (flag){
// 执行添加小组
$.ajax({
async:true,
type: 'post',
url: '/drill/group_add/',
data:{
"group_name":$('#group_name').val(),
"captain_id":$('#captain_id').val(),
"member_ids":member_ids,
},
success: function (data) {
if(data.code ==200){
$('#group_table').bootstrapTable('refresh');
$('#group_info').modal('hide');
$('#message_tips').modal('show');
$('#message').text(data.data);
}else{
$('#group_info').modal('hide');
$('#message_tips').modal('show');
$('#message').text(data.data);
}
},
error: function(data) {
$('#group_info').modal('hide');
$('#message_tips').modal('show');
$('#message').text(data.data);
}
});
}else {
$('#message_tips').modal('show');
$('#message').text("队长与队员选择冲突！");
}
}else {
$('#message_tips').modal('show');
$('#message').text("还未选择队员！");
}
}
});
});
// 点击右箭头选中参赛人员
$('#arrow_right').unbind('click').on('click',function(){
var selected_person_id_list = [];
var select_person_list = $('#person_all').bootstrapTable('getSelections');
var selected_person_list = $('input[name ="btSelectItem_selected"]');
if(selected_person_list != null){
for (var i = 0;i<selected_person_list.length;i++){
selected_person_id_list.push($(selected_person_list[i]).val())
}
}
for(var i = 0;i<select_person_list.length;i++){
var flag = true;
var id = select_person_list[i].id;
var power;
var value = select_person_list[i].power;
if (value == '1'){
power = '管理员';
}else if (value == '11'){
power = '导调员';
}else if (value == '12'){
power = '设计师';
}else if (value == '13'){
power = '评估师';
}else if (value == '14'){
power = '参赛人员';
}
for (var j=0;j<selected_person_id_list.length;j++){
if (id == selected_person_id_list[j]){
flag = false;
break;
}
}
// 判断已选列表不存在即添加
if (flag){
$('<tr data-index="'+select_person_list[i].id+'" class="selected">' +
' <td class="bs-checkbox ">' +
'<input data-index="'+select_person_list[i].id+'" value="'+select_person_list[i].id+'" name="btSelectItem_selected" type="checkbox">' +
'</td> ' +
'<td style="text-align: center; vertical-align: middle; ">' +
select_person_list[i].username +
'</td> ' +
'<td style="text-align: center; vertical-align: middle; ">' +
select_person_list[i].name +
'</td> ' +
'<td style="text-align: center; vertical-align: middle; ">' +
power +
'</td> ' +
'</tr>').appendTo($('#person_sel > tbody'));
}
}
if($('input[name ="btSelectItem_selected"]')!=null){
$('#sel_count').text($('input[name ="btSelectItem_selected"]').length);
}else {
$('#sel_count').text("0");
}
});
// 点击左箭头移除选中的参赛人员
$('#arrow_left').unbind('click').on('click',function(){
var select_person_list = $('input[name="btSelectItem_selected"]:checked');
if(select_person_list != null){
for (var i = 0;i<select_person_list.length;i++){
$(select_person_list[i]).parent().parent().remove();
}
$('#btSelectAll').attr('checked',false);
}
if($('input[name ="btSelectItem_selected"]')!=null){
$('#sel_count').text($('input[name ="btSelectItem_selected"]').length);
}else {
$('#sel_count').text("0");
}
});
# 查询所有用户，不包括管理员
def get_person_all_list(request):
res = {'code': 400, 'flag': False, 'data': ""}
sql = """select id, username, name, power from person_table where power <> 0 and power <> 1 order by register_time desc"""
result = db.query_sql(sql)
try:
res['code'] = 200
res['flag'] = True
res['data'] = result
except Exception as e:
res['data'] = "查询失败！ERROR: "+str(e)
return JsonResponse(res)
# 根据id查询参赛用户
def get_person_by_ids(request):
res = {'code': 400, 'flag': False, 'data': ""}
ids = request.POST.get('ids')
id_list = ids.replace(';',',')
sql = """select id, username, name, power from person_table where id in ("""+id_list+""")"""
result = db.query_sql(sql)
try:
res['code'] = 200
res['flag'] = True
res['data'] = result
except Exception as e:
res['data'] = "查询失败！ERROR: "+str(e)
return JsonResponse(res)
修改信息初始化
function msg_init(row){
if (row == null){
//重置内容
$('#sel_count').text("0");
$('#group_name').val('');
$('#captain_id').val('');
$('#person_all').bootstrapTable('refresh');
$('#person_sel > tbody').html('');
$('#select2-captain_id-container').text('');
$('#select2-captain_id-container').attr("title",'');
}else {
$('#group_name').val(row.group_name);
$('#captain_id').val(row.captain_id);
$('#person_all').bootstrapTable('refresh');
$('#person_sel > tbody').html('');
$.ajax({
async: false,
type: 'post',
url: '/drill/get_person_by_ids/',
data:{
"ids":row.member_id,
},
success: function (data) {
var res = data.data
$('#sel_count').text(res.length);
for(var i = 0;i<res.length;i++){
var power;
var value = res[i].power;
if (value == '1'){
power = '管理员';
}else if (value == '11'){
power = '导调员';
}else if (value == '12'){
power = '设计师';
}else if (value == '13'){
power = '评估师';
}else if (value == '14'){
power = '参赛人员';
}
$('<tr data-index="'+res[i].id+'" class="selected">' +
' <td class="bs-checkbox ">' +
'<input data-index="'+res[i].id+'" value="'+res[i].id+'" name="btSelectItem_selected" type="checkbox">' +
'</td> ' +
'<td style="text-align: center; vertical-align: middle; ">' +
res[i].username +
'</td> ' +
'<td style="text-align: center; vertical-align: middle; ">' +
res[i].name +
'</td> ' +
'<td style="text-align: center; vertical-align: middle; ">' +
power +
'</td> ' +
'</tr>').appendTo($('#person_sel > tbody'));
}
}
});
$('#select2-captain_id-container').text($('#captain_id option:selected').text());
$('#select2-captain_id-container').attr("title",$('#captain_id option:selected').text());
}
}
浙公网安备 33010602011771号