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');

    }

};

预览效果

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