250 lines
7.8 KiB
HTML
250 lines
7.8 KiB
HTML
{% extends "groups/base.html" %}
|
||
{% load static %}
|
||
{% block headother%}
|
||
<link rel="stylesheet" href="{% static 'groups/bower_components/layer/theme/default/layer.css' %}">
|
||
<link rel="stylesheet" href="{% static 'groups/bower_components/bootstrap-table/bootstrap-table.min.css' %}">
|
||
{% endblock %}
|
||
|
||
|
||
{% block title %}公司列表{% endblock %}
|
||
|
||
{% block pagehead %}
|
||
<section class="content-header">
|
||
<ol class="breadcrumb">
|
||
<li><a href="{% url 'groups_index' %}"><i class="fa fa-dashboard"></i> 主页</a></li>
|
||
<li class="active">公司列表</li>
|
||
</ol>
|
||
</section>
|
||
{% endblock %}
|
||
{% block content %}
|
||
<!-- Main content -->
|
||
<section class="content">
|
||
<div class="box">
|
||
<!-- /.box-header -->
|
||
<div class="box-body">
|
||
<div id="toolbar">
|
||
{% if request.session.issuper %}
|
||
<button id="btnCreate" class="btn btn-primary" >
|
||
<i class="glyphicon glyphicon-plus"></i> 新增
|
||
</button>
|
||
{% endif %}
|
||
</div>
|
||
<table
|
||
id="table">
|
||
</table>
|
||
</div>
|
||
<!-- /.box-body -->
|
||
</div>
|
||
<!-- /.box -->
|
||
|
||
<!-- /.col -->
|
||
|
||
<!-- /.row -->
|
||
</section>
|
||
<!-- /.content -->
|
||
{% endblock %}
|
||
|
||
|
||
{% block endother%}
|
||
<script src="{% static 'groups/bower_components/bootstrap-table/bootstrap-table.min.js' %}"></script>
|
||
<script src="{% static 'groups/bower_components/bootstrap-table/locale/bootstrap-table-zh-CN.min.js' %}"></script>
|
||
<script src="{% static 'groups/bower_components/layer/layer.js' %}"></script>
|
||
<script>
|
||
var $table = $('#table')
|
||
var $remove = $('#remove')
|
||
var selections = []
|
||
function getIdSelections() {
|
||
return $.map($table.bootstrapTable('getSelections'), function (row) {
|
||
return row.id
|
||
})
|
||
}
|
||
|
||
function responseHandler(res) {
|
||
$.each(res.rows, function (i, row) {
|
||
row.state = $.inArray(row.id, selections) !== -1
|
||
})
|
||
return res
|
||
}
|
||
|
||
function detailFormatter(index, row) {
|
||
var html = []
|
||
$.each(row, function (key, value) {
|
||
html.push('<p><b>' + key + ':</b> ' + value + '</p>')
|
||
})
|
||
return html.join('')
|
||
}
|
||
|
||
function operateFormatter(value, row, index) {
|
||
return [
|
||
'<a class="change btn btn-warning" href="javascript:void(0)">',
|
||
'修改',
|
||
'</a> ',
|
||
'<a class="viewpw btn btn-primary" href="javascript:void(0)">',
|
||
'密码',
|
||
'</a> ',
|
||
'<a class="viewusers btn btn-primary" href="user/',
|
||
row.partid,
|
||
'">',
|
||
'查看员工',
|
||
'</a>'
|
||
].join('')
|
||
}
|
||
|
||
window.operateEvents = {
|
||
'click .change': function (e, value, row, index) {
|
||
layer.open({
|
||
type: 2,
|
||
title: '编辑公司',
|
||
shadeClose: false,
|
||
maxmin: true,
|
||
area: ['800px', '300px'],
|
||
content: "{% url 'company-update' %}" + '?id=' + row.partid,
|
||
end: function () {
|
||
//关闭时做的事情
|
||
//oDataTable.ajax.reload();
|
||
//location.reload();
|
||
$table.bootstrapTable('refresh')
|
||
}
|
||
});
|
||
},
|
||
'click .viewpw': function (e, value, row, index) {
|
||
$.ajax({
|
||
type: "get",
|
||
url: "/groups/api/admininfo/"+row.partid+'/',
|
||
data: {},
|
||
//async: false, // ajax同步使用false
|
||
success: function (data) {
|
||
layer.alert(data.username + '/'+data.password)
|
||
|
||
}
|
||
});
|
||
},
|
||
}
|
||
|
||
function totalTextFormatter(data) {
|
||
return '合计'
|
||
}
|
||
|
||
function totalNameFormatter(data) {
|
||
return data.length
|
||
}
|
||
|
||
|
||
function initTable() {
|
||
$table.bootstrapTable('destroy').bootstrapTable({
|
||
//height: 550,
|
||
url: '{% url "company-list" %}', //请求后台的URL（*）
|
||
method: 'GET', //请求方式（*）
|
||
toolbar: '#toolbar', //工具按钮用哪个容器
|
||
striped: true, //是否显示行间隔色
|
||
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
|
||
pagination: true, //是否显示分页（*）
|
||
sortable: true, //是否启用排序
|
||
sortOrder: "asc", //排序方式
|
||
sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
|
||
pageNumber: 1, //初始化加载第一页，默认第一页,并记录
|
||
pageSize: 10, //每页的记录行数（*）
|
||
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
|
||
search: true, //是否显示表格搜索
|
||
strictSearch: false,
|
||
showColumns: true, //是否显示所有的列（选择显示的列）
|
||
showRefresh: true, //是否显示刷新按钮
|
||
minimumCountColumns: 2, //最少允许的列数
|
||
clickToSelect: true, //是否启用点击选中行
|
||
//height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
|
||
uniqueId: "ID", //每一行的唯一标识，一般为主键列
|
||
showToggle: true, //是否显示详细视图和列表视图的切换按钮
|
||
cardView: false, //是否显示详细视图
|
||
detailView: false, //是否显示父子表
|
||
columns: [
|
||
[{
|
||
field: 'state',
|
||
checkbox: true,
|
||
rowspan: 2,
|
||
align: 'center',
|
||
valign: 'middle'
|
||
}, {
|
||
title: '公司名',
|
||
field: 'partname',
|
||
rowspan: 2,
|
||
align: 'center',
|
||
valign: 'middle',
|
||
sortable: true,
|
||
footerFormatter: totalNameFormatter,
|
||
}, {
|
||
title: '公司详情',
|
||
colspan: 4,
|
||
align: 'center'
|
||
}],
|
||
[{
|
||
field: 'role__name',
|
||
title: '公司类型',
|
||
sortable: true,
|
||
|
||
align: 'center'
|
||
}, {
|
||
field: 'position.formatted_address',
|
||
title: '地址',
|
||
sortable: true,
|
||
align: 'center',
|
||
searchable: false,
|
||
},
|
||
{
|
||
field: 'creattime',
|
||
title: '创建时间',
|
||
sortable: true,
|
||
align: 'center',
|
||
}, {
|
||
field: 'operate',
|
||
title: '操作',
|
||
align: 'center',
|
||
clickToSelect: false,
|
||
events: window.operateEvents,
|
||
formatter: operateFormatter,
|
||
footerFormatter: totalTextFormatter
|
||
}]
|
||
]
|
||
})
|
||
$table.on('check.bs.table uncheck.bs.table ' +
|
||
'check-all.bs.table uncheck-all.bs.table',
|
||
function () {
|
||
$remove.prop('disabled', !$table.bootstrapTable('getSelections').length)
|
||
|
||
// save your data, here just save the current page
|
||
selections = getIdSelections()
|
||
// push or splice the selections if you want to save all data selections
|
||
})
|
||
$table.on('all.bs.table', function (e, name, args) {
|
||
console.log(name, args)
|
||
})
|
||
$remove.click(function () {
|
||
var ids = getIdSelections()
|
||
$table.bootstrapTable('remove', {
|
||
field: 'id',
|
||
values: ids
|
||
})
|
||
$remove.prop('disabled', true)
|
||
})
|
||
}
|
||
|
||
$(function() {
|
||
initTable()
|
||
})
|
||
$("#btnCreate").click(function () {
|
||
layer.open({
|
||
type: 2,
|
||
title: '新建公司',
|
||
shadeClose: false,
|
||
maxmin: true,
|
||
area: ['800px', '300px'],
|
||
content: "{% url 'company-create' %}",
|
||
end: function () {
|
||
//关闭时做的事情
|
||
//oDataTable.ajax.reload();
|
||
//location.reload();
|
||
initTable()
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
{% endblock %} |