ASP.NET MVC 5 ABP DataTables （二）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1）ABP DataTables 应用（一）

2) ABP DataTables 应用（二）

JS DataTables 这个组件绑定数据必须要有自己的返回数据格式。但是ABP返回的格式直接绑定是错误。添加DataTables JS 扩展、数据加载等。ABP 原作者已经在ABP.ZERO CORE 项目有相应的应用。

DataTable JS 扩展：

/************************************************************************
* datatables AJAX 扩展 *
*************************************************************************/
(function ($) { if (!$.fn.dataTableExt) {
return;
} var doAjax = function (listAction, requestData, callbackFunction, settings) {
var inputFilter = {}; //设置表过滤器
if (listAction.inputFilter) {
inputFilter = $.extend(inputFilter, listAction.inputFilter());
} //设置分页过滤器
if (settings.oInit.paging) {
inputFilter = $.extend(inputFilter, {
maxResultCount: requestData.length,
skipCount: requestData.start
});
} //排序过滤器
if (requestData.order && requestData.order.length > 0) {
var orderingField = requestData.order[0];
if (requestData.columns[orderingField.column].data) {
inputFilter.sorting = requestData.columns[orderingField.column].data + " " + orderingField.dir;
}
} if (listAction.ajaxFunction) {
listAction.ajaxFunction(inputFilter)
.done(function (result) {
settings.rawServerResponse = result;
callbackFunction({
recordsTotal: result.totalCount, //总数
recordsFiltered: result.totalCount,
data: result.items //数据项
});
});
}
} if (!$.fn.dataTable) {
return;
} $.extend(true, $.fn.dataTable.defaults, {
ajax: function (requestData, callbackFunction, settings) {
if (!settings) {
return;
} if (!settings.oInit) {
return;
} if (!settings.oInit.listAction) {
return;
} doAjax(settings.oInit.listAction, requestData, callbackFunction, settings);
}
});
//重新加载
$.fn.dataTable.Api.register('ajax.reloadPage()', function () {
this.ajax.reload(null, false);
}); })(jQuery);

DataTables数据加载扩展

$.extend(true, $.fn.dataTable.defaults, {
language: {
url: '/Abp/Framework/scripts/Datatables/Translations/Chinese (Simplified, China).json'
},
lengthMenu: [5, 10, 25, 50, 100, 250, 500],
pageLength: 10,
responsive: true,
searching: false,
pagingType: "bootstrap_full_number",
dom: 'rt<"bottom"ilp><"clear">',
order: []
});

语言列表

/************************************************************************
* RECORD-ACTIONS extension for datatables *
*************************************************************************/
(function ($) { if (!$.fn.dataTableExt) {
return;
} var _createDropdownItem = function (record, fieldItem) {
var $li = $('<li/>');
var $a = $('<a/>'); if (fieldItem.text) {
$a.html(fieldItem.text);
} if (fieldItem.action) {
$a.click(function (e) {
e.preventDefault(); if (!$(this).closest('li').hasClass('disabled')) {
fieldItem.action({
record: record
});
}
});
} $a.appendTo($li);
return $li;
} var _createButtonDropdown = function (record, field) {
var $container = $('<div/>')
.addClass('btn-group')
.addClass('dropdown')
.addClass('action-button'); var $dropdownButton = $('<button/>')
.html(field.text)
.addClass('dropdown-toggle')
.attr('data-toggle', 'dropdown')
.attr('aria-haspopup', 'true')
.attr('aria-expanded', 'true'); if (field.cssClass) {
$dropdownButton.addClass(field.cssClass);
} var $dropdownItemsContainer = $('<ul/>').addClass('dropdown-menu'); for (var i = 0; i < field.items.length; i++) {
var fieldItem = field.items[i]; if (fieldItem.visible && !fieldItem.visible({ record: record })) {
continue;
} var $dropdownItem = _createDropdownItem(record, fieldItem); if (fieldItem.enabled && !fieldItem.enabled({ record: record })) {
$dropdownItem.addClass('disabled');
} $dropdownItem.appendTo($dropdownItemsContainer);
} if ($dropdownItemsContainer.find('li').length > 0) {
$dropdownItemsContainer.appendTo($container);
$dropdownButton.appendTo($container);
} if ($dropdownItemsContainer.children().length === 0) {
return "";
} return $container;
}; var _createSingleButton = function (record, field) {
$(field.element).data(record); if (field.visible === undefined) {
return field.element;
} var isVisibilityFunction = typeof field.visible === "function";
if (isVisibilityFunction) {
if (field.visible()) {
return field.element;
}
} else {
if (field.visible) {
return field.element;
}
} return "";
}; var _createRowAction = function (record, field, tableInstance) {
if (field.items && field.items.length > 1) {
return _createButtonDropdown(record, field, tableInstance);
} else if (field.element) {
var $singleActionButton = _createSingleButton(record, field);
if ($singleActionButton != "") {
return $singleActionButton.clone(true);
}
} return "";
} var hideColumnWithoutRedraw = function (tableInstance, colIndex) {
tableInstance.fnSetColumnVis(colIndex, false, false);
} var hideEmptyColumn = function(cellContent, tableInstance, colIndex) {
if (cellContent == "") {
hideColumnWithoutRedraw(tableInstance, colIndex);
}
}; var renderRowActions = function (tableInstance, nRow, aData, iDisplayIndex, iDisplayIndexFull) {
var columns;
if (tableInstance.aoColumns) {
columns = tableInstance.aoColumns;
} else {
columns = tableInstance.fnSettings().aoColumns;
} if (!columns) {
return;
} var cells = $(nRow).children("td"); for (var colIndex = 0; colIndex < columns.length; colIndex++) {
var column = columns[colIndex];
if (column.rowAction) {
var $actionContainer = _createRowAction(aData, column.rowAction, tableInstance);
hideEmptyColumn($actionContainer, tableInstance, colIndex); var $actionButton = $(cells[colIndex]).find(".action-button");
if ($actionButton.length === 0) {
$(cells[colIndex]).append($actionContainer);
}
}
}
}; var _existingApiRenderRowActionsFunction = $.fn.dataTableExt.oApi.renderRowActions;
$.fn.dataTableExt.oApi.renderRowActions = function (tableInstance, nRow, aData, iDisplayIndex, iDisplayIndexFull) {
if (_existingApiRenderRowActionsFunction) {
_existingApiRenderRowActionsFunction(tableInstance, nRow, aData, iDisplayIndex, iDisplayIndexFull);
} renderRowActions(tableInstance, nRow, aData, iDisplayIndex, iDisplayIndexFull);
}; if (!$.fn.dataTable) {
return;
} var _existingDefaultFnRowCallback = $.fn.dataTable.defaults.fnRowCallback;
$.extend(true, $.fn.dataTable.defaults, {
fnRowCallback: function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
if (_existingDefaultFnRowCallback) {
_existingDefaultFnRowCallback(this, nRow, aData, iDisplayIndex, iDisplayIndexFull);
} renderRowActions(this, nRow, aData, iDisplayIndex, iDisplayIndexFull);
}
}); })(jQuery);

数据操作扩展

{
"sProcessing": "处理中...",
"sLengthMenu": "显示 _MENU_ 项结果",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
}

语言 JSON

ABP应用层（只是做了演示的Demo）

[AutoMapTo(typeof(Project))]
public class CreateProjectDto
{
public string Name { get; set; }
public string Address { get; set; }
} public class GetProjectInput : PagedAndSortedResultRequestDto, IShouldNormalize
{
public void Normalize()
{
if (string.IsNullOrEmpty(Sorting))
{
Sorting = "Name";
}
}
} [AutoMapFrom(typeof(Project)), AutoMapTo(typeof(Project))]
public class ProjectDto:EntityDto<long>
{
public string Name { get; set; }
public string Address { get; set; }
}

Dto

public interface IProjectAppService : IAsyncCrudAppService<ProjectDto, long, PagedResultRequestDto, CreateProjectDto, ProjectDto>
{
PagedResultDto<ProjectDto> GetProject(GetProjectInput dto);
}
public class ProjectAppService : AsyncCrudAppService<Project, ProjectDto, long, PagedResultRequestDto, CreateProjectDto, ProjectDto>, IProjectAppService
{
public ProjectAppService(IRepository<Project, long> repository) : base(repository)
{ } public PagedResultDto<ProjectDto> GetProject(GetProjectInput input)
{
var query = Repository.GetAllList();
var queryAllCount = query.Count; var users = query.OrderBy(o=>o.Address).Skip(input.SkipCount).Take(input.MaxResultCount)
.ToList(); var projectDotlist = ObjectMapper.Map<List<ProjectDto>>(users); return new PagedResultDto<ProjectDto>(queryAllCount, projectDotlist); }
}

AppService

ABP展示层

@section Scripts{
<script src="~/lib/datatables/datatables.all.min.js"></script>
<script src="~/lib/datatables/plugins/bootstrap/datatables.bootstrap.js"></script>
<script src="~/Abp/Framework/scripts/Datatables/datatables.ajax.js"></script>
<script src="~/Abp/Framework/scripts/Datatables/datatables.defaults.js"></script>
<script src="~/Abp/Framework/scripts/Datatables/datatables.record-actions.js"></script>
<script src="~/Views/Projects/index.js"></script>
}
@section styles
{
<link href="~/lib/datatables/datatables.min.css" rel="stylesheet" />
<link href="~/lib/datatables/plugins/bootstrap/datatables.bootstrap.css" rel="stylesheet" />
}
<div class="row margin-bottom-5">
<div class="col-xs-6">
<div class="page-head">
<div class="page-title">
<h1>
<span>@L("Project")</span> <small>@L("ProjectHeaderInfo")</small>
</h1>
</div>
</div>
</div>
</div> <div class="portlet light margin-bottom-0">
<div class="portlet-title portlet-title-filter">
<div class="inputs inputs-full-width">
<div class="portlet-input">
<form>
<div class="row">
<div class="col-xs-6"> </div>
<div class="col-xs-6">
<div class="form-group">
<button id="RefreshProjectButton" class="btn btn-primary blue"><i class="fa fa-refresh"></i> @L("Refresh")</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="portlet-body">
<table id="ProjectTable" class="table table-striped table-bordered table-hover order-column">
<thead>
<tr>
<th>@L("Actions")</th>
<th>@L("RoleName")</th>
<th>@L("CreationTime")</th>
</tr>
</thead>
</table>
</div>
</div>