虚拟主机对网站seo有哪些影响,郑州哪里做网站汉狮,装修旧房翻新价格表,如何在各种网站投放广告这个表格加持还是不错了#xff0c;自带了全局搜索#xff0c;分页#xff0c;数据导出#xff0c;卡片视图#xff0c;等#xff0c;本次整合添加了数据添加弹窗和编辑数据回显弹窗#xff0c;附完整页面代码#xff0c;只需要拿过来替换自己实际的接口即可。 效果图 … 这个表格加持还是不错了自带了全局搜索分页数据导出卡片视图等本次整合添加了数据添加弹窗和编辑数据回显弹窗附完整页面代码只需要拿过来替换自己实际的接口即可。 效果图 接口案例
数据列表
{code: 200,msg: ok,data: [{categoryId: 52,categoryName: 哈哈哈},{categoryId: 53,categoryName: 哈哈哈地方},{categoryId: 7,categoryName: 悬疑灵异},{categoryId: 4,categoryName: 武侠仙侠},{categoryId: 3,categoryName: 玄幻奇幻}]
}增/novel-category/add
删/novel-category/delete/{id}
改/novel-category/update
查/novel-category/list
批量删/novel-category/deleteBatch
对应后端实现
package com.xxx.readverse.controller;import cn.dev33.satoken.util.SaResult;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.xxx.readverse.entity.Category;
import com.xxx.readverse.service.CategoryService;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.dao.DuplicateKeyException;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;import java.util.Arrays;
import java.util.List;Controller
RequestMapping(/novel-category)
Api(tags 小说分类)
CrossOrigin
public class CategoryController {Autowiredprivate CategoryService novelCategoryService;GetMapping(/list)ApiOperation(分类列表)ResponseBodypublic SaResult getNovelCategories() {ListCategory categoryList novelCategoryService.list(new QueryWrapperCategory().last(limit 12));return SaResult.data(categoryList);}PostMapping(/add)ApiOperation(新增分类)ResponseBodypublic SaResult add(Category novelCategory) {try {novelCategoryService.save(novelCategory);} catch (DuplicateKeyException e) {return SaResult.error(操作未成功可能是因为数据重复导致的);}return SaResult.data(novelCategory.getCategoryId());}GetMapping(/deleteBatch)ApiOperation(批量删除)ResponseBodypublic SaResult deleteBatch(RequestParam(ids) Integer[] ids) {novelCategoryService.removeByIds(Arrays.asList(ids));return SaResult.ok();}GetMapping(/delete/{id})ApiOperation(删除分类)ResponseBodypublic SaResult delete(PathVariable Integer id) {novelCategoryService.removeById(id);return SaResult.ok();}PostMapping(/update)ApiOperation(修改分类)ResponseBodypublic SaResult update(Category novelCategory) {novelCategoryService.updateById(novelCategory);return SaResult.ok();}GetMapping(/{id})ApiOperation(获取某个分类信息)ResponseBodypublic SaResult getById(PathVariable Integer id) {Category category novelCategoryService.getById(id);return SaResult.data(category);}} 页面完整代码
需要注意的问题 注意依赖引进 方法异步操作特别是弹窗组件 数据项的ID并不是每个都是id根据实体数据来确认。 新增编辑使用弹窗控制弹窗的显示和关闭$(‘xxx’).modal(‘show’), $(‘xxx’).modal(‘hide’) 基本通用直接换接口名称就行。
!doctype html
html langenheadmeta charsetUTF-8meta nameviewportcontentwidthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0meta http-equivX-UA-Compatible contentieedgetitle表格演示/titlelink hrefhttps://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css relstylesheetlink hrefhttps://cdn.jsdelivr.net/npm/bootstrap-table1.22.3/dist/bootstrap-table.min.css relstylesheetscript srchttps://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js/scriptscript srchttps://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js/scriptscript srchttps://cdn.jsdelivr.net/npm/bootstrap-table1.22.3/dist/bootstrap-table.min.js/scriptscript srchttps://cdn.jsdelivr.net/npm/bootstrap-table1.22.3/dist/locale/bootstrap-table-zh-CN.min.js/scriptlink hrefhttps://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css relstylesheetscript srchttps://cdn.jsdelivr.net/npm/tableexport.jquery.plugin1.28.0/tableExport.min.js/scriptscript srchttps://cdn.jsdelivr.net/npm/sweetalert211/scriptstyle.select,#locale {width: 100%;}.edit {margin-right: 10px;}/style
/headbody!-- 新增弹窗 --!-- Modal Body --!-- if you want to close by clicking outside the modal, delete the last endpoint:data-bs-backdrop and data-bs-keyboard --div classmodal fade idaddModal tabindex-1 data-bs-backdropstatic data-bs-keyboardfalse roledialogaria-labelledbymodalTitleId aria-hiddentruediv classmodal-dialog modal-dialog-scrollable modal-dialog-centered modal-md roledocumentform idaddFormdiv classmodal-contentdiv classmodal-headerh5 classmodal-title idmodalTitleId新增/h5button typebutton classbtn-close data-bs-dismissmodal aria-labelClose/button/divdiv classmodal-bodydiv classform-floating mb-3input typetext classform-control namecategoryName idcategoryName placeholder /label forcategoryNameName/label/div/divdiv classmodal-footerbutton typebutton classbtn btn-secondary data-bs-dismissmodal关闭/buttonbutton typereset classbtn btn-outline-danger清空/buttonbutton typesubmit classbtn btn-primary保存/button/div/div/form/div/div!-- 编辑弹窗 --!-- Modal Body --!-- if you want to close by clicking outside the modal, delete the last endpoint:data-bs-backdrop and data-bs-keyboard --div classmodal fade ideditModal tabindex-1 data-bs-backdropstatic data-bs-keyboardfalse roledialogaria-labelledbymodalTitleId aria-hiddentruediv classmodal-dialog modal-dialog-scrollable modal-dialog-centered modal-md roledocumentform ideditFormdiv classmodal-contentdiv classmodal-headerh5 classmodal-title idmodalTitleId编辑/h5button typebutton classbtn-close data-bs-dismissmodal aria-labelClose/button/divdiv classmodal-bodyinput typehidden namecategoryIddiv classform-floating mb-3input typetext classform-control namecategoryName idcategoryName placeholder /label forcategoryNameName/label/div/divdiv classmodal-footerbutton typebutton classbtn btn-secondary data-bs-dismissmodal关闭/buttonbutton typereset classbtn btn-outline-danger清空/buttonbutton typesubmit classbtn btn-primary保存/button/div/div/form/div/divdiv classcontainer!-- 自定义工具栏 --div idtoolbarbutton idadd classbtn btn-primary data-bs-togglemodal data-bs-target#addModali classbi bi-plus-square/i 新增/buttonbutton idexport classbtn btn-successi classbi bi-file-earmark-spreadsheet/i 导出/buttonbutton idremove classbtn btn-danger disabledi classbi bi-trash/i 批量删除/button/div!-- 表格初始化 --table idtable data-toolbar#toolbar data-searchtrue data-show-refreshtrue data-show-toggletruedata-show-fullscreentrue data-show-columnstrue data-show-columns-toggle-alltrue data-detail-viewtruedata-show-exporttrue data-click-to-selecttrue data-detail-formatterdetailFormatterdata-minimum-count-columns2 data-show-pagination-switchtrue data-paginationtrue data-id-fieldiddata-page-list[5,10, 25, 50, 100, all] data-show-footertrue data-side-paginationclientdata-url/novel-category/list data-response-handlerresponseHandler/table/div/body
script// 获取组件var $table $(#table)var $remove $(#remove)var selections []// 获取被选中行的IDfunction getIdSelections() {return $.map($table.bootstrapTable(getSelections), function (row) {return row.categoryId})}// 处理远程响应的数据可以指定要在表格显示的数据function responseHandler(res) {return res.data;}// 自定义显示样式function detailFormatter(index, row) {var html []$.each(row, function (key, value) {html.push(pb key :/b value /p)})return html.join()}function operateFormatter(value, row, index) {return [button typebutton classbtn btn-outline-primary edit btn-sm title编辑,i classbi bi-pencil/i 编辑,/button ,button typebutton classbtn btn-outline-danger remove btn-sm title删除,i classbi bi-trash/i 删除,/button].join();}// 按钮点击事件window.operateEvents {click .edit: function (e, value, row, index) {// 弹窗编辑回显$.each(row, function (key, value) {$(#editForm input[name key ]).val(value);// 如果表单字段是input标签之外的其他类型也可以使用类似的方式进行赋值});$editModal.modal(show);// alert(You click edit action, row: JSON.stringify(row))},// 移除click .remove: async function (e, value, row, index) {if (await askDelete()) {// 从表格中移除选中的行remove(row.categoryId);}}}// 表格初始化function initTable() {$table.bootstrapTable(destroy).bootstrapTable({exportDataType: all,height: 550,locale: $(#locale).val(),columns: [[{field: state,checkbox: true,align: center,valign: middle},{title: ID编号,field: categoryId,align: center,valign: middle,sortable: true,},{title: 分类名,field: categoryName,sortable: true,align: center},{field: operate,title: 操作,align: center,clickToSelect: false,events: window.operateEvents,formatter: operateFormatter}]]})// 监听表格的选择事件当表格中的行被选中或取消选中时触发$table.on(check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table,function () {// 根据当前选中的行的数量来启用或禁用删除按钮$remove.prop(disabled, !$table.bootstrapTable(getSelections).length)// 保存你的数据这里只保存当前页的数据selections getIdSelections()console.log(当前选中: selections)// 如果你想要保存所有选中的数据可以在这里使用 push 或 splice 方法})// 监听表格的所有事件用于调试目的$table.on(all.bs.table, function (e, name, args) {// console.log(name, args)})// 点击删除按钮时执行的操作$remove.click(async function () {// 获取所有选中行的 IDvar ids getIdSelections()if (await askDelete()) {// 从表格中移除选中的行console.log(要删除的ids ids)removeBatch(ids);// 禁用删除按钮$remove.prop(disabled, true)}})}// 绑定导出按钮点击事件$(#export).click(function () {$table.tableExport({type: excel, // 导出文件类型可选 csv, txt, sql, json, xml, excel, doc, png, pdfescape: false // 是否使用转义默认为 true});});$(function () {initTable();$(#locale).change(initTable)})// 删除确认弹窗async function askDelete() {const result await Swal.fire({title: 确定要删除它吗?,text: 删除后无法恢复!,icon: warning,showCancelButton: true,confirmButtonColor: #3085d6,cancelButtonColor: #d33,confirmButtonText: 确定!});return result.isConfirmed;}// 操作提示function mess() {Swal.fire({position: top-end,icon: success,title: 操作OK,showConfirmButton: false,timer: 1500});}var $addModal $(#addModal);var $editModal $(#editModal);// 新增$(#addForm).submit(function (event) {event.preventDefault();var data $(#addForm).serialize();console.log(data);save(data)$addModal.modal(hide);})// 保存编辑$(#editForm).submit(function (event) {event.preventDefault();var data $(#editForm).serialize();console.log(data);update(data);$editModal.modal(hide);})function save(data) {$.post(/novel-category/add, data, function (data) {if (data.code 200) {mess();refresh();}})}function update(data) {$.post(/novel-category/update, data, function (data) {if (data.code 200) {mess();refresh();}})}function remove(id) {$.get(/novel-category/delete/ id, function (data) {if (data.code 200) {refresh();mess();}})}function removeBatch(data) {$.get(/novel-category/deleteBatch?ids data.join(,), function (data) {if (data.code 200) {mess();refresh();}})}function refresh() {$table.bootstrapTable(refresh);}/script/html注意数据的对接特别是每行数据的id项根据实际数据调整。
