以关注页面为例：
html:
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel" style="margin-top: 0px; padding-top: 0px;">
<div class="x_title">
<!--本页图标-->
<div class="btn-group">
<a href="/task_mgm/taskinfo_finished" style="font-size: 28px; padding-bottom: 5px"><i
class="fa fa-home" style="padding-top: 4px"></i> </a>
</div>
<!--与我相关-->
<div class="btn-group" style="margin-left: 4px">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"
style="background-color: #fff; color: #73879C; border-color: #73879C; margin-top: 5px">与我相关
</button>
</button>
<ul class="dropdown-menu" id="select_task1" role="menu">
<li id="create_mine"><a href="#">我创建的任务</a>
</li>
<li id="res_mine"><a href="#">我负责的任务</a>
</li>
<li id="exe_mine"><a href="#">我参与的任务</a>
</li>
<li class="divider"></li>
</ul>
</div>
<!--到期时间-->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" style="background-color: #fff; color: #73879C; border-color: #73879C; margin-top: 5px">到期时间</button></button>
<ul class="dropdown-menu" id="select_task2" role="menu">
<li style="">
<lable style="margin-left: 10px">从：</lable>
<input type="text" id="rz1" class="calendar-control select_input4" style="width: 140px; margin-left: 8px;" autocomplete="off"></li>
</li>
<li style="">
<lable style="margin-left: 10px">到：</lable>
<input type="text" id="rz2" class="calendar-control select_input5" style="width: 140px; margin-left: 8px;" autocomplete="off"></li>
</li>
<input id="sub_date" type="button" style="float: right; margin: 2px 8px 5px" value=" 确 定 ">
</ul>
</div>
<!--任务进度-->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"
style="background-color: #fff; color: #73879C; border-color: #73879C; margin-top: 5px">任务进度
</button>
</button>
<ul class="dropdown-menu" id="task_advance" role="menu">
<li id="advance_0"><a href="#"> 0%</a>
</li>
<li id="advance_2"><a href="#"> 20%</a>
</li>
<li id="advance_4"><a href="#"> 40%</a>
</li>
<li id="advance_6"><a href="#"> 60%</a>
</li>
<li id="advance_8"><a href="#"> 80%</a>
</li>
<li id="advance_10"><a href="#"> 100%</a>
</li>
<li class="divider"></li>
</ul>
</div>
<!--更多-->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" style="background-color: #fff; color: #73879C; border-color: #73879C; margin-top: 5px">筛 选</button>
<ul class="dropdown-menu" id="select_task3" role="menu">
<li style="text-align: center"><input type="text" class="select_input1" placeholder="按创建人筛选" style="border: #FFFFFF; margin-top: 6px">
</li>
<li style="text-align: center"><input type="text" class="select_input2" placeholder="按负责人筛选" style="border: #FFFFFF; margin-top: 3px">
</li>
<li style="text-align: center"><input type="text" class="select_input3" placeholder="按参与人筛选" style="border: #FFFFFF; margin-top: 3px">
</li>
<li class="divider"></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
<div class="x_content">
<table id="datatable-buttonss" class="table table-hover bulk_action" style="width:100%">
<thead>
<tr>
<th>id</th>
<th></th>
<th>任务名称</th>
<th>紧急程度</th>
<th> 进度</th>
<th>创建人</th>
<th>责任人</th>
<th>参与人</th>
<th style="text-align: center">状态</th>
<th>更新时间</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
js:
<script>
(function ($) {
$.extend({
urlGet: function () {
var aQuery = window.location.href.split("?"); //取得Get所有参数
var aGET = new Array();
if (aQuery.length > 1) {
var aBuf = aQuery[1].split("&");
for (var i = 0, iLoop = aBuf.length; i < iLoop; i++) {
var aTmp = aBuf[i].split("="); //分离key与Value
aGET[aTmp[0]] = aTmp[1];
}
} else {
flagForShow = true;
}
return aGET;
}
})
})(jQuery);
var GetIt = $.urlGet(); // 可根据key值获取get请求参数值
function goSearch() {
var stime = $("#rz1").val();
var etime = $("#rz2").val();
var myparas = "?stime="+stime+"&etime="+etime;
window.location.href="/task_mgm/taskinfo_focus"+myparas;
}
$(function () {
//我创建任务
$("#create_mine").click(function () {
var myparas = "?which=create_mine";
window.location.href="/task_mgm/taskinfo_focus"+myparas;
});
//我负责任务
$("#res_mine").click(function () {
var myparas = "?which=res_mine";
window.location.href="/task_mgm/taskinfo_focus"+myparas;
});
//我参与任务
$("#exe_mine").click(function () {
var myparas = "?which=exe_mine";
window.location.href="/task_mgm/taskinfo_focus"+myparas;
});
//到期日功能
$("#sub_date").click(function () {
$("#select_task2").hide();
goSearch();
});
//任务进度0%
$("#advance_0").click(function () {
var myparas = "?advance=advance_0";
window.location.href="/task_mgm/taskinfo_focus"+myparas;
});
//任务进度20%
$("#advance_2").click(function () {
var myparas = "?advance=advance_2";
window.location.href="/task_mgm/taskinfo_focus"+myparas;
});
//任务进度40%
$("#advance_4").click(function () {
var myparas = "?advance=advance_4";
window.location.href="/task_mgm/taskinfo_focus"+myparas;
});
//任务进度60%
$("#advance_6").click(function () {
var myparas = "?advance=advance_6";
window.location.href="/task_mgm/taskinfo_focus"+myparas;
});
//任务进度80%
$("#advance_8").click(function () {
var myparas = "?advance=advance_8";
window.location.href="/task_mgm/taskinfo_focus"+myparas;
});
//任务进度100%
$("#advance_10").click(function () {
var myparas = "?advance=advance_10";
window.location.href="/task_mgm/taskinfo_focus"+myparas;
});
var myparas = "?stime="+GetIt["stime"]+"&etime="+GetIt["etime"]+"&which="+GetIt["which"]+"&advance="+GetIt["advance"];
// 表数据定义
var table = $("#datatable-buttonss").DataTable({
"aaSorting": [[9, "desc"]],
// "sDom": '<"x_content"B><"top"lf>rt<"bottom"ip><"clear">',
// buttons: [ ], 两者共用才能出效果 单用报错
"sPaginationType": "full",
"bPaginate": true, //翻页功能
"bInfo": true,//页脚信息
"bAutoWidth": true,//自动宽度
responsive: true,
// "bRetrieve": true,
// "bProcessing": true, //DataTables载入数据时，是否显示‘进度’提示
ajax: "/task_mgm/taskDataFocus"+myparas,
"columnDefs": [
{
"targets": [0],
"visible": false,
},
{
"targets": [1],
"sorting": false,
"width": "3%", },
{
"sorting": false,
"targets": [2],
"render": function (data, type, row, meta) {
var pageType = '?pageType=focusPage';
if (row[3] == 0) {
var rr = '<a style="color: forestgreen"> 0%</a>';
if (type === 'display' && data.length > 20) {
return '<a id="rrrrr" href="/task_mgm/taskinfo_editID=' + row[0] + pageType + '">' + data.substr(0, 16) + '...' + rr + '</a>'
}
else {
return '<a id="taskFocus" href="/task_mgm/taskinfo_editID=' + row[0] + pageType + '">' + data + rr + '</a>'
}
}
else if (row[3] == 1) {
var rr = '<a style="color: forestgreen"> 20%</a>';
if (type === 'display' && data.length > 20) {
return '<a id="rrrrr" href="/task_mgm/taskinfo_editID=' + row[0] + pageType + '">' + data.substr(0, 16) + '...' + rr + '</a>'
}
else {
return '<a id="taskFocus" href="/task_mgm/taskinfo_editID=' + row[0] + pageType + '">' + data + rr + '</a>'
}
}
else if (row[3] == 2) {
var rr = '<a style="color: forestgreen"> 40%</a>';
if (type === 'display' && data.length > 20) {
return '<a id="rrrrr" href="/task_mgm/taskinfo_editID=' + row[0] + pageType + '">' + data.substr(0, 16) + '...' + rr + '</a>'
}
else {
return '<a id="taskFocus" href="/task_mgm/taskinfo_editID=' + row[0] + pageType + '">' + data + rr + '</a>'
}
}
else if (row[3] == 3) {
var rr = '<a style="color: forestgreen"> 60%</a>';
if (type === 'display' && data.length > 20) {
return '<a id="rrrrr" href="/task_mgm/taskinfo_editID=' + row[0] + pageType + '">' + data.substr(0, 16) + '...' + rr + '</a>'
}
else {
return '<a id="taskFocus" href="/task_mgm/taskinfo_editID=' + row[0] + pageType + '">' + data + rr + '</a>'
}
}
else if (row[3] == 4) {
var rr = '<a style="color: forestgreen"> 80%</a>';
if (type === 'display' && data.length > 20) {
return '<a id="rrrrr" href="/task_mgm/taskinfo_editID=' + row[0] + pageType + '">' + data.substr(0, 16) + '...' + rr + '</a>'
}
else {
return '<a id="taskFocus" href="/task_mgm/taskinfo_editID=' + row[0] + pageType + '">' + data + rr + '</a>'
}
}
else if (row[3] == 5) {
var rr = '<a style="color: forestgreen"> 100%</a>';
if (type === 'display' && data.length > 20) {
return '<a id="rrrrr" href="/task_mgm/taskinfo_editID=' + row[0] + pageType + '">' + data.substr(0, 16) + '...' + rr + '</a>'
}
else {
return '<a id="taskFocus" href="/task_mgm/taskinfo_editID=' + row[0] + pageType + '">' + data + rr + '</a>'
}
}
}
},
{
"sorting": true,
"targets": [3],
"visible": false
},
{
"sortable": true,
"targets": [4],
"width": "10%",
"render": function (data, type, row, meta) {
if (data == '非常紧急') {
return '<a class="sorting_1" style="background-color: #D94600;">' + data + '</a>'
}
else if (data == '紧急任务') {
return '<a class="sorting_1" style="background-color: #F9F900">' + data + '</a>'
}
else {
return '<a class="sorting_1" style="background-color: #4DFFFF">' + data + '</a>'
}
}
},
{
"sorting": true,
"width": "8%",
"targets": [5],
},
{
"targets": [6],
"visible": false
},
{
"targets": [7],
"visible": false
},
{
"sorting": false,
"targets": [8],
"width": "10%",
"text-align": "right",
"data": null,
"render": function (data, type, row, meta) {
if (row[8] == 1) {
return "<i class=\"fa fa-star\" id=\"focus\">已关注</i>";
}
else {
return ""
}
},
},
{
"targets": [9],
"visible": false
},
],
});
// 行号设置
table.on('order.dt search.dt', function () {
table.column(1, {search: 'applied', order: 'applied'}).nodes().each(function (cell, i) {
cell.innerHTML = i + 1;
});
}).draw();
// 筛选
$('#select_task3 .select_input1').on( 'keyup change', function () {
table
.columns( 5 )
.search( this.value )
.draw(false);
});
$('#select_task3 .select_input2').on( 'keyup change', function () {
table
.columns( 6 )
.search( this.value )
.draw(false);
});
$('#select_task3 .select_input3').on( 'keyup change', function () {
table
.columns( 7 )
.search( this.value )
.draw(false);
});
$(".calendar-control").datetimepicker({
language: 'zh-CN',
// format: 'yyyy-mm-dd hh:ii',//显示格式
format: 'yyyy-mm-dd 00:00',//显示格式
todayHighlight: 1,//今天高亮
minView: "month",//设置只显示到月份
// minView: 0,//设置显示到分钟
startView: 2,
weekStart: 1,
forceParse: 0,
showMeridian: 1,
autoclose: 1,
});
// 取消关注
$('#datatable-buttonss tbody').on('click', '#focus', function () {
if (confirm('确定取消？')) {
var data = table.row($(this).parents('tr')).data();
$.get('/task_mgm/taskinfo_focusID=' + data[0], function (res) {
if (res.errno == "OK") {
return console.log('取消关注成功')
}
else {
return console.log("取消关注失败")
}
});
window.location.reload()
}
});
});
</script>
后台falsk:
# 关注任务数据
@task_mgm.route('/taskDataFocus')
@sso_wrapper
def taskinfo_dataFocus_fun():
try:
which = request.values.get('which')
advance = request.values.get('advance')
startTime = request.values.get('stime') # 起时
endTime = request.values.get('etime')
time_str = setTime()
if startTime is None or startTime is '' or startTime == 'undefined':
startTime = time_str.split("|")[0]
if endTime is None or endTime is '' or endTime == 'undefined':
endTime = time_str.split("|")[1] # 应该根据用户名或ID 的到自己的任务 现在先暂时应任务ID
if which == "undefined" and advance == "undefined":
tasks = Task.query.filter(
and_(Task.isDelete != 1, Task.ifFocus == 1, Task.endTime >= startTime, Task.endTime <= endTime,
)).order_by(Task.updateTime.desc()).all()
elif which == "create_mine":
tasks = Task.query.filter(
and_(Task.isDelete != 1, Task.ifFocus == 1, Task.createPeople == g.name
)).order_by(Task.updateTime.desc()).all()
elif which == "res_mine":
tasks = Task.query.filter(
and_(Task.isDelete != 1, Task.ifFocus == 1, Task.resPeople == g.name
)).order_by(Task.updateTime.desc()).all()
elif which == "exe_mine":
tasks = Task.query.filter(
and_(Task.isDelete != 1, Task.ifFocus == 1, Task.exePeople == g.name
)).order_by(Task.updateTime.desc()).all()
elif advance == "advance_0":
tasks = Task.query.filter(
and_(Task.isDelete != 1, Task.ifFocus == 1, Task.advanceId == 0
)).order_by(Task.updateTime.desc()).all()
elif advance == "advance_2":
tasks = Task.query.filter(
and_(Task.isDelete != 1, Task.ifFocus == 1, Task.advanceId == 1
)).order_by(Task.updateTime.desc()).all()
elif advance == "advance_4":
tasks = Task.query.filter(
and_(Task.isDelete != 1, Task.ifFocus == 1, Task.advanceId == 2
)).order_by(Task.updateTime.desc()).all()
elif advance == "advance_6":
tasks = Task.query.filter(
and_(Task.isDelete != 1, Task.ifFocus == 1, Task.advanceId == 3
)).order_by(Task.updateTime.desc()).all()
elif advance == "advance_8":
tasks = Task.query.filter(
and_(Task.isDelete != 1, Task.ifFocus == 1, Task.advanceId == 4
)).order_by(Task.updateTime.desc()).all()
elif advance == "advance_10":
tasks = Task.query.filter(
and_(Task.isDelete != 1, Task.ifFocus == 1, Task.advanceId == 5
)).order_by(Task.updateTime.desc()).all() data = sql3json(tasks, ["id", "endState", "taskName", "advanceId", "urgentId", "createPeople", "resPeople", "exePeople", "ifFocus", "updateTime"])
return data
except Exception as e:
logging.error(e)