[DontWrapResult]
public JsonResult GetAllTasks(int limit, int offset, string sortfiled, string sortway, string search, string status) {
var sort = !string.IsNullOrEmpty(sortfiled) ? string.Format("{0} {1}", sortfiled, sortway) : "";
TaskState currentState;
if (!string.IsNullOrEmpty(status)) Enum.TryParse(status, true, out currentState);
var filter = new GetTasksInput {
SkipCount = offset,
MaxResultCount = limit,
Sorting = sort,
Filter = search
};
if (!string.IsNullOrEmpty(status)) if (Enum.TryParse(status, true, out currentState)) filter.State = currentState;
var pagedTasks = _taskAppService.GetPagedTasks(filter);
return Json(new {
total = pagedTasks.TotalCount,
rows = pagedTasks.Items
},
JsonRequestBehavior.AllowGet);
}
@using Abp.Web.Mvc.Extensions
@{
ViewBag.Title = L("BackendTaskList");
ViewBag.ActiveMenu = "BackendTaskList"; //Matches with the menu name in SimpleTaskAppNavigationProvider to highlight the menu item
}
<!-- 加载bootstrap-tablel的样式 -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.css" rel="external nofollow" >
@section scripts{
@Html.IncludeScript("~/Views/backendtasks/list.js");
<!-- 加载bootstrap-tablel的script脚本 -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>
}
<div class="row">
<div class="panel-body">
<!-- 过滤框 -->
<div class="panel panel-default">
<div class="panel-heading">查询条件</div>
<div class="panel-body">
<form id="formSearch" class="form-horizontal">
<div class="form-group" style="margin-top: 15px">
<label class="control-label col-sm-1" for="txt-filter">任务名称</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="txt-filter">
</div>
<label class="control-label col-sm-1" for="txt-search-status">状态</label>
<div class="col-sm-3">
@Html.DropDownList("TaskStateDropdownList", null, new {id = "txt-search-status", @class = "form-control "})
</div>
<div class="col-sm-4" style="text-align: left;">
<button type="button" style="margin-left: 50px" id="btn-query" class="btn btn-primary">查询</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- bootstrap-tablel指定的工具栏 -->
<div id="toolbar" class="btn-group">
<button id="btn-add" type="button" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
<button id="btn-edit" type="button" class="btn btn-success">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
</button>
<button id="btn-delete" type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
</button>
</div>
<!--bootstrap-table表体-->
<table id="tb-tasks"></table>
</div>
<!--通过初始加载页面的时候提前将创建任务模态框加载进来-->
@Html.Partial("_CreateTask")
<!--编辑任务模态框通过ajax动态填充到此div中-->
<div id="edit">
</div>
$(function() {
//1.初始化Table
var oTable = new TableInit();
oTable.Init();
//2.初始化Button的点击事件
var oButtonInit = new ButtonInit();
oButtonInit.Init();
});
var taskService = abp.services.app.task;
var $table = $('#tb-tasks');
var TableInit = function() {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function() {
$table.bootstrapTable({
url: '/BackendTasks/GetAllTasks', //请求后台的URL(*)
method: 'get', //请求方式(*)
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: true, //是否显示分页(*)
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams, //传递参数(*)
sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
pageNumber: 1, //初始化加载第一页,默认第一页
pageSize: 5, //每页的记录行数(*)
pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)
search: false, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
strictSearch: true,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
height: 500, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
uniqueId: "Id", //每一行的唯一标识,一般为主键列
showToggle: true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
columns: [
{
radio: true
}, {
field: 'Title',
title: '任务名称',
sortable: true
}, {
field: 'Description',
title: '任务描述'
}, {
field: 'AssignedPersonName',
title: '任务分配'
}, {
field: 'State',
title: '任务状态',
formatter: showState
}, {
field: 'CreationTime',
title: '创建日期',
formatter: showDate
}, {
field: 'operate',
title: '操作',
align: 'center',
valign: 'middle',
clickToSelect: false,
formatter: operateFormatter,
events: operateEvents
}
]
});
};
queryParams: oTableInit.queryParams, //传递参数(*)
//指定bootstrap-table查询参数
oTableInit.queryParams = function(params) {
var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
limit: params.limit,
//页面大小
offset: params.offset,
//页码
sortfiled: params.sort,
//排序字段
sortway: params.order,
//升序降序
search: $("#txt-filter").val(),
//自定义传参-任务名称
status: $("#txt-search-status").val() //自定义传参-任务状态
};
return temp;
};
//指定操作组
function operateFormatter(value, row, index) {
return [
'<a class="like" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="Like">',
'<i class="glyphicon glyphicon-heart"></i>',
'</a>',
' <a class="edit" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="Edit">',
'<i class="glyphicon glyphicon-edit"></i>',
'</a>',
' <a class="remove" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="Remove">',
'<i class="glyphicon glyphicon-remove"></i>',
'</a>'
].join('');
}
//指定table表体操作事件
window.operateEvents = {
'click .like': function(e, value, row, index) {
alert('You click like icon, row: ' + JSON.stringify(row));
console.log(value, row, index);
},
'click .edit': function(e, value, row, index) {
editTask(row.Id);
},
'click .remove': function(e, value, row, index) {
deleteTask(row.Id);
}
};
//bootstrap-table工具栏按钮事件初始化
var ButtonInit = function() {
var oInit = new Object();
var postdata = {};
oInit.Init = function() {
//初始化页面上面的按钮事件
$("#btn-add")
.click(function() {
$("#add").modal("show");
});
$("#btn-edit")
.click(function() {
var selectedRaido = $table.bootstrapTable('getSelections');
if (selectedRaido.length === 0) {
abp.notify.warn("请先选择要编辑的行!");
} else {
editTask(selectedRaido[0].Id);
}
});
$("#btn-delete")
.click(function() {
var selectedRaido = $table.bootstrapTable('getSelections');
if (selectedRaido.length === 0) {
abp.notify.warn("请先选择要删除的行!");
} else {
deleteTask(selectedRaido[0].Id);
}
});
$("#btn-query")
.click(function() {
$table.bootstrapTable('refresh');
});
};
return oInit;
};
var oButtonInit = new ButtonInit(); oButtonInit.Init();
$table.bootstrapTable('getSelections'):获取表格选择项
$table.bootstrapTable('refresh'):刷新表格
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码(独立后台)...苏ICP备2024110244号-2 苏公网安备32050702011978号 增值电信业务经营许可证编号:苏B2-20251499 | Copyright 2018 - 2025 源码网商城 (www.ymwmall.com) 版权所有