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

ABP进阶教程8 - 自定义按钮

程序员文章站 2024-02-01 17:35:58
点这里进入ABP进阶教程目录 在功能按钮区增加一个自定义按钮 - Add(创建课程) 添加按钮 打开展示层(即JD.CRS.Web.Mvc)的\wwwroot\view-resources\Views\Course\Index.js //用以存放Course查询相关脚本 自带按钮已有五个我们再添加一 ......

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

在功能按钮区增加一个自定义按钮 - add(创建课程) 

添加按钮

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

自带按钮已有五个我们再添加一个:

ABP进阶教程8 - 自定义按钮

// 自定义按钮
{
    extend: 'alert',
    text: '+'
    //text: '<i class="material-icons">add</i>'
}

完整代码

 1 //button
 2 buttons:
 3 [
 4     {// 自定义按钮
 5         extend: 'alert',
 6         text: '+'
 7         //text: '<i class="material-icons">add</i>'
 8     },
 9     { //复制到剪贴板
10         extend: 'copy',
11         text: 'copy'
12     },
13     { //导出csv
14         extend: 'csv',
15         text: 'csv',
16         bom: true
17     },
18     { //导出excel
19         extend: 'excel',
20         text: 'excel'
21     },
22     { //导出pdf
23         extend: 'pdf',
24         text: 'pdf'
25     },
26     { //打印
27         extend: 'print',
28         text: 'print'
29         //text: '<i class="material-icons">print</i>'
30     }
31 ]

绑定方法

为按钮绑定方法

//绑定方法 - 显示createmodal
var _$modal = $('#coursecreatemodal');
$.fn.datatable.ext.buttons.alert = {
    classname: 'buttons-alert',
    action: function (e, dt, node, config) {
        _$modal.modal('show');
    }
};

预览效果

点击新增按钮将弹出创建课程界面.

ABP进阶教程8 - 自定义按钮