點這裡進入ABP進階教程目錄 

在功能按鈕區增加一個自定義按鈕 - Add(創建課程) 

添加按鈕

打開展示層(即JD.CRS.Web.Mvc)的\wwwroot\view-resources\Views\Course\Index.js //用以存放Course查詢相關腳本

自帶按鈕已有五個我們再添加一個：

// 自定義按鈕
{
    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');
    }
};

預覽效果

點擊新增按鈕將彈出創建課程界面.