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

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

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

添加按钮

打开展示层(即JD.CRS.Web.Mvc)的\wwwroot\view-resources\Views\Course\Index.js //用以存放Course查询相关脚本

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

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

完整代码

//Button
buttons:
[
    {// 自定义按钮
        extend: 'alert',
        text: '+'
        //text: '<i class="material-icons">add</i>'
    },
    { //复制到剪贴板
        extend: 'copy',
        text: 'Copy'
    },
    { //导出CSV
        extend: 'csv',
        text: 'CSV',
        bom: true
    },
    { //导出Excel
        extend: 'excel',
        text: 'Excel'
    },
    { //导出PDF
        extend: 'pdf',
        text: 'PDF'
    },
    { //打印
        extend: 'print',
        text: 'Print'
        //text: '<i class="material-icons">print</i>'
    }
]

绑定方法

为按钮绑定方法

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

预览效果

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