CRUD导出excel功能增加导出完成前按钮变灰的功能
这一段当有confirmText(确认文案)时会出现bug,后面一小节有解决方案,但这个方案按钮变灰的更快,可以更好的防止快速点两下的情况
{
"type": "export-excel",
"onClick": "document.getElementsByClassName(\"excel-export-btn\")[1].classList.add(\"is-disabled\") \r\n",
"reload": "",
"perPageAvailable": [
10
],
"name": "exportExcelBtn",
"disabledOn": "",
"className": "excel-export-btn",
"label": "导出",
"api": {
"headers": {
"content-type": "application/json"
},
"method": "post",
"url": "/innerApp/appApi/custom/test_crud/crud",
"adaptor": "document.getElementsByClassName(\"excel-export-btn\")[1].classList.remove(\"is-disabled\");\nreturn {\n ...payload\n}"
},
"align": "right",
"target": ""
}
上述只是一个示例,方便你拷贝文字的,具体要改的地方在这里:
额外注意,有个名字是三项关联的,要改全改,因为你page里不见得只有一个crud,一定要单独起名字
继上面改造,导出时导出按钮不仅变灰,还显示一个loading图标,且规避当有confirmText时点否按钮不还原的问题
{
"type": "export-excel",
"confirmText": "确定导出吗?",
"className": "excel-export-btn",
"api": {
"headers": {
"content-type": "application/json"
},
"method": "post",
"requestAdaptor": "document.getElementsByClassName(\"excel-export-btn\")[1].children[0].classList.remove(\"hidden\");document.getElementsByClassName(\"excel-export-btn\")[1].classList.add(\"is-disabled\") \r\n return api;",
"adaptor": "document.getElementsByClassName(\"excel-export-btn\")[1].children[0].classList.add(\"hidden\");document.getElementsByClassName(\"excel-export-btn\")[1].classList.remove(\"is-disabled\");\nreturn payload;\n",
"url": "/innerApp/appApi/custom/test_crud/crud"
},
"label": "导出<%document.getElementsByClassName(\"excel-export-btn\")[1].children[0].classList.add(\"hidden\");%>",
"align": "right",
"loading": true
}
使用注意点:蓝色框内的名字,当同一页有两个导出按钮时,要起不同的名字,改名时同一按钮里所有蓝色框名字要一起改。
问题没有解决?请留言提问


