ABP进阶教程8 - 自定义按钮
程序员文章站
2024-02-01 17:35:58
点这里进入ABP进阶教程目录 在功能按钮区增加一个自定义按钮 - Add(创建课程) 添加按钮 打开展示层(即JD.CRS.Web.Mvc)的\wwwroot\view-resources\Views\Course\Index.js //用以存放Course查询相关脚本 自带按钮已有五个我们再添加一 ......
在功能按钮区增加一个自定义按钮 - 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'); } };
预览效果
点击新增按钮将弹出创建课程界面.