ASP.NET MVC 5 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>
View
(function () {
$(function () {
var _$projectsTable = $('#projectsTable');
var _projectService = abp.services.app.project;
var dataTable = _$projectsTable.DataTable({
paging: true,
serverSide: true,
processing: false,
listAction: {
ajaxFunction: _projectService.getProject
},
columnDefs: [
{
targets: 0,
data: null,
orderable: false,
autoWidth: false,
defaultContent: '',
rowAction: {
cssClass: 'btn btn-xs btn-primary blue',
text: '<i class="fa fa-cog"></i> ' + 'Actions' + ' <span class="caret"></span>',
items: [
]
}
},
{
targets: 1,
data: "name" },
{
targets: 2,
data: "address"
}
]
});
$('#RefreshprojectsButton').click(function (e) {
e.preventDefault();
getprojects();
});
function getprojects() {
dataTable.ajax.reload();
}
});
})();
JavaScript
然后调试数据展示成功。
ASP.NET MVC 5 ABP DataTables (二)的更多相关文章
- ASP.NET MVC 5 ABP DataTables (一)
1)ABP DataTables 应用(一) 2) ABP DataTables 应用(二) JS DataTables 这个组件绑定数据必须要有自己的返回数据格式.但是ABP返回的格式直接绑定是错 ...
- Asp.net mvc 知多少(二)
本系列主要翻译自<ASP.NET MVC Interview Questions and Answers >- By Shailendra Chauhan,想看英文原版的可访问http:/ ...
- ASP.NET MVC案例教程(二)
ASP.NET MVC案例教程(二) 让第一个页面跑起来 现在,我们来实现公告系统中的第一个页面——首页.它非常简单,只包括所有公告分类的列表,并且每个列表项是一个超链接.其中分类数据是用我们的Moc ...
- ASP.NET MVC +EasyUI 权限设计(二)环境搭建
请注明转载地址:http://www.cnblogs.com/arhat 今天突然发现博客园出问题了,老魏使用了PC,手机,平板都访问博客园了,都是不能正常的访问,原因是不能加载CSS,也就是不能访问 ...
- Asp.Net MVC学习总结(二)——控制器与动作(Controller And Action)
一.理解控制器 1.1.什么是控制器 控制器是包含必要的处理请求的.NET类,控制器的角色封装了应用程序逻辑,控制器主要是负责处理请求,实行对模型的操作,选择视图呈现给用户. 简单理解:实现了ICon ...
- ASP.NET MVC学习笔记(二)笔记
接下来我们一起了解ASP.NET MVC的最重要的核心技术,了解ASP.NET MVC的开发框架,生命周期,技术细节. 一.Routing与ASP.NET MVC生命周期 1.Routing——网址路 ...
- 基于ASP.NET MVC的ABP框架入门学习教程
为什么使用ABP 我们近几年陆续开发了一些Web应用和桌面应用,需求或简单或复杂,实现或优雅或丑陋.一个基本的事实是:我们只是积累了一些经验或提高了对,NET的熟悉程度. 随着软件开发经验的不断增加, ...
- [译]Asp.net MVC 之 Contorllers(二)
URL路由模块 取代URL重写 路由请求 URL路由模块的内部结构 应用程序路由 URL模式和路由 定义应用程序路由 处理路由 路由处理程序 处理物理文件请求 防止路由定义的URL 属性路由 书接上回 ...
- ASP.NET MVC简单编程之(二)经典路由篇
话题:请求从路由开始 在实际的ASP.NET MVC开发中,URL访问规则----路由的定义是非常重要的.因为任何一个请求都离不开路由.理解它,我们将能理解MVC处理请求的整个过程,灵活地定义系统各种 ...
随机推荐
- HDU5447 Good Numbers
http://acm.hdu.edu.cn/showproblem.php?pid=5447 网上好像只找到java的题解,写完就发一下c++代码咯,顺便纪念一下+存个int128板子 做法可以看tj ...
- return机制
C/C++中,函数内部的一切变量(函数内部局部变量,形参 )都是在其被调用时才被分配内存单元.子函数运行结束时,所有局部变量的内存单元会被系统释放.形参和函数内部的局部变量的生命期和作用域都是在函数内 ...
- linphone-android-客户端APP-工程解读
LinphoneLauncherActivity 是APP的入口组件,在这个组件里,它会启动LinphoneService这个后台服务,然后不断地判断这个后台服务是否已经启动完毕,如果已经启动完毕后, ...
- 通俗理解TCP握手次数是三次
理解之后,应该说是至少三次就可以保证可靠传输了. 看到网上一篇帖子http://www.cnblogs.com/TechZi/archive/2011/10/18/2216751.html是这么说的, ...
- VMWare 安装ubuntu,虚机设置静态IP接入公网
本文提供的kafka安装配置为Linux(ubuntu-16.04.3) 1.首先安装VMarea(14.0.0 build-6661328) 2.到http://www.ubuntu.org.cn/ ...
- map的本质
Map<String, String> map = new HashMap<String, String>(); map.put("1", "va ...
- php网站在服务器上邮件发送不了,在本地可以
标签: php邮箱 2015-11-27 13:58 879人阅读 评论(0) 收藏 举报 分类: php(2) 版权声明:本文为博主原创文章,未经博主允许不得转载. 最近在做phpmailer发送邮 ...
- svn冲突文件解决方法
svn冲突文件解决方法 工具/原料 svn客户端 方法/步骤 1 通过SVN客户端更新需要的文件,如果出现有感叹号的文件,找到出现感叹号的文件. 2 选择感叹号文件,即冲突文件,单击鼠标右键对冲突文件 ...
- 将DedeCMS从子目录移动到根目录的方法
http://www.commonie.com/a/chat/dedeskill/298.html 以前做了一个Wordpress的博客,后来觉得采用DedeCMS更好一点,所以就有了转向DedeCM ...
- 使用 IDEA和Maven 整合SSH框架
1.创建web工程 一路next 下去就行.完成后,IDEA会自动构建maven工程. 2.创建如下项目结构 需要将 java文件夹设置为SourcesRoot目录,否则无法创建package 设置操 ...