ABP进阶教程8 - 自定义按钮
2023-09-27 14:19:37 时间
在功能按钮区增加一个自定义按钮 - Add(创建课程)
添加按钮
打开展示层(即JD.CRS.Web.Mvc)的\wwwroot\view-resources\Views\Course\Index.js //用以存放Course查询相关脚本
自带按钮已有五个我们再添加一个:
// 自定义按钮 { extend: 'alert', text: '+' //text: '<i class="material-icons">add</i>' }
完整代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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进阶教程3 - 优化编辑
- ABP进阶教程6 - 布局配置
- ABP进阶教程0 - 目录
- Markdown新手教程
- 【教程分享】一键部署MySQL,轻松搞定Docker安装和配置!
- Windows下Vscode C++配置教程
- 【GStreamer开发】GStreamer播放教程03——pipeline的快捷访问
- AFNnetworking快速教程,官方入门教程译
- windows下Tomcat详细安装配置教程
- SOA体系结构基础培训教程-规范标准篇
- Hexo 简明教程
- Autodesk Revit Architecture 2014官方标准教程
- 【抽象代数】第一章 代数系统《抽象代数极简教程》/ By 禅与计算机程序设计艺术&ChatGPT
- 在linux下安装配置rabbitMQ详细教程
- Yii Framework2.0开发教程(8)输入验证
- OpenCV DNN模块官方教程(一)加载Caffe模型做图像分类
- linux下centos安装android sdk最新全面教程【可行】
- EPICS教程2 -- 在(RockyLinux 8/AlmaLinux 8)上所需的包