欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ABP进阶教程7 - 功能按钮

程序员文章站 2022-05-29 09:23:29
点这里进入ABP进阶教程目录 下载插件 打开Datatables官网(https://datatables.net/download/) 勾选Extensions/Buttons,下载插件,复制到JD.CRS.Web.Mvc\wwwroot\lib\dataTables目录. 引入插件 打开展示层( ......

点这里进入abp进阶教程目录 

下载插件

打开datatables官网(https://datatables.net/download/)

勾选extensions/buttons,下载插件,复制到jd.crs.web.mvc\wwwroot\lib\datatables目录.

ABP进阶教程7 - 功能按钮 

引入插件

打开展示层(即jd.crs.web.mvc)的views/course/index.cshtml //course查询视图

添加以下代码,引入插件.

<link href="~/lib/datatables/datatables/css/jquery.datatables.css" rel="stylesheet" asp-append-version="true" />
<link href="~/lib/datatables/buttons/css/buttons.datatables.css" rel="stylesheet" asp-append-version="true" />
<script src="~/lib/datatables/datatables/js/jquery.datatables.js" asp-append-version="true"></script>
<script src="~/lib/datatables/buttons/js/datatables.buttons.js" asp-append-version="true"></script>
<script src="~/lib/datatables/buttons/js/buttons.flash.js" asp-append-version="true"></script>
<script src="~/lib/datatables/buttons/js/buttons.html5.js" asp-append-version="true"></script>
<script src="~/lib/datatables/buttons/js/buttons.print.js" asp-append-version="true"></script>
<script src="~/lib/datatables/jszip/jszip.js" asp-append-version="true"></script>
<script src="~/lib/datatables/pdfmake/pdfmake.js" asp-append-version="true"></script>
<script src="~/lib/datatables/pdfmake/vfs_fonts.js" asp-append-version="true"></script>

更新配置

打开展示层(即jd.crs.web.mvc)的\wwwroot\view-resources\views\course\index.js //用以存放course查询相关脚本

自带按钮有五个:

copy //复制到剪贴板
csv //导出csv
excel //导出excel
pdf //导出pdf
print //打印

基础绑定

采用默认格式

ABP进阶教程7 - 功能按钮 

//button
buttons:
[ 
'copy', //复制到剪贴板
'csv', //导出csv
'excel', //导出excel
'pdf', //导出pdf
'print' //打印
],

定制绑定

采用自定义格式

ABP进阶教程7 - 功能按钮

buttons:
[
    {
        extend: 'copy',
        text: '复制' //可以中文
    },
    {
        extend: 'csv',
        text: 'csv' //可以英文
    },
    {
        extend: 'excel',
        text: 'excel'
    },
    {
        extend: 'pdf',
        text: 'pdf'
    },
    {
        extend: 'print',
        text: '<i class="material-icons">print</i>' //可以图标
    }
],

预览效果

基础绑定

ABP进阶教程7 - 功能按钮 

 定制绑定

ABP进阶教程7 - 功能按钮