bootstrap table 超链接的添加 a标签
生活随笔
收集整理的這篇文章主要介紹了
bootstrap table 超链接的添加 a标签
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
后臺管理頁面采用 bootstrap table
頁面樣式：
?
?
現在需要在操作中添加一個<a>標簽，跳轉到不同的頁面
{title: '操作',align: 'center',formatter: function(value, row, index) {var actions = [];actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="#" οnclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>修改</a> ');actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="#" οnclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>刪除</a> ');actions.push('<a class="btn btn-warning btn-xs " href="#" οnclick="createMenuItem(\'' + ctx + '/module/informations/?resourceId='+ row.id + '&type=' +row.resourceType + '\',\'拓片管理\')"><i class="fa fa-remove"></i>拓片管理</a> ');return actions.join('');}跳轉的頁面修改：
<!DOCTYPE HTML> <html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"> <meta charset="utf-8"> <head th:include="include :: header"></head> <body class="gray-bg"> <div class="container-div"><div class="btn-group-sm hidden-xs" id="toolbar" role="group"><a class="btn btn-success" οnclick="$.operate.add()" shiro:hasPermission="module:informations:add"><i class="fa fa-plus"></i> 添加</a><a class="btn btn-primary btn-edit disabled" οnclick="$.operate.edit()"shiro:hasPermission="module:informations:edit"><i class="fa fa-edit"></i> 修改</a><a class="btn btn-danger btn-del btn-del disabled" οnclick="$.operate.removeAll()"shiro:hasPermission="module:informations:remove"><i class="fa fa-remove"></i> 刪除</a></div><div class="col-sm-12 select-table table-striped"><table id="bootstrap-table" data-mobile-responsive="true"></table></div> <input type="hidden" name="resourceId" id="resourceId" th:value="*{resourceId}"><input type="hidden" name="type" id="type" th:value="*{type}"> </div> <div th:include="include :: footer"></div> <script th:inline="javascript">var editFlag = [[${@permission.hasPermi('module:informations:edit')}]];var removeFlag = [[${@permission.hasPermi('module:informations:remove')}]];var prefix = ctx + "module/informations";var resourceId = $('#resourceId').val();var type = $('#type').val();$(function () {var options = {url: prefix + "/list?resourceId=" + resourceId + "&type=" + type,createUrl: prefix + "/add?resourceId=" + resourceId + "&type=" + type,updateUrl: prefix + "/edit/{id}",removeUrl: prefix + "/remove",modalName: "拓片/石刻",uniqueId: "id",columns: [{checkbox: true},{title: '序號',align: "center",width: 40,formatter: function (value, row, index) {var table = $('#bootstrap-table');var pageSize = table.bootstrapTable('getOptions').pageSize;//獲取當前是第幾頁var pageNumber = table.bootstrapTable('getOptions').pageNumber;//返回序號，注意index是從0開始的，所以要加上1return pageSize * (pageNumber - 1) + index + 1;}},/* {field: 'id',title: '主鍵'},{field: 'resourceId',title: '資源id'},{field: 'type',title: '資源類型'},*/{field: 'name',title: '名稱'},{field: 'description',title: '描述'},{field: 'path',title: '附件'},/*{field: 'pro1',title: '備用字段'},{field: 'pro2',title: '備用字段'},*/{title: '操作',align: 'center',formatter: function (value, row, index) {var actions = [];actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="#" οnclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>修改</a> ');actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="#" οnclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>刪除</a>');return actions.join('');}}]};$.table.init(options);}); </script> </body> </html>?
后臺代碼 controller 修改：
package cn.cmodes.project.module.informations.controller;import cn.cmodes.framework.aspectj.lang.annotation.Log; import cn.cmodes.framework.aspectj.lang.enums.BusinessType; import cn.cmodes.framework.web.controller.BaseController; import cn.cmodes.framework.web.domain.AjaxResult; import cn.cmodes.framework.web.page.Page; import cn.cmodes.project.module.informations.domain.Informations; import cn.cmodes.project.module.informations.service.IInformationsService; import org.apache.shiro.authz.annotation.RequiresPermissions; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.ModelMap; import org.springframework.web.bind.annotation.*;import java.util.List;/*** 拓片/石刻 信息操作處理** @author dqj* @date 2019-03-19*/ @Controller @RequestMapping("/module/informations") public class InformationsController extends BaseController {@Autowiredprivate IInformationsService informationsService;@RequiresPermissions("module:informations:view")@GetMapping()public String informations(String resourceId,String type,ModelMap map){ map.addAttribute("resourceId",resourceId);map.addAttribute("type",type);return "module/informations/informations";}/*** 查詢拓片/石刻列表*/@RequiresPermissions("module:informations:list")@PostMapping("/list")@ResponseBodypublic Page list(Informations informations){startPage();List<Informations> list = informationsService.selectInformationsList(informations);return getDataTable(list);}/*** 新增拓片/石刻*/@GetMapping("/add")public String add(String resourceId,String type,ModelMap map){ map.addAttribute("resourceId",resourceId);map.addAttribute("type",type);return "module/informations/add";}/*** 新增保存拓片/石刻*/@RequiresPermissions("module:informations:add")@Log(title = "拓片/石刻", businessType = BusinessType.INSERT)@PostMapping("/add")@ResponseBodypublic AjaxResult addSave(Informations informations){return toAjax(informationsService.insertInformations(informations));}/*** 修改拓片/石刻*/@GetMapping("/edit/{id}")public String edit(@PathVariable("id") String id, ModelMap mmap){Informations informations = informationsService.selectInformationsById(id);mmap.put("informations", informations);return "module/informations/edit";}/*** 修改保存拓片/石刻*/@RequiresPermissions("module:informations:edit")@Log(title = "拓片/石刻", businessType = BusinessType.UPDATE)@PostMapping("/edit")@ResponseBodypublic AjaxResult editSave(Informations informations){return toAjax(informationsService.updateInformations(informations));}/*** 刪除拓片/石刻*/@RequiresPermissions("module:informations:remove")@Log(title = "拓片/石刻", businessType = BusinessType.DELETE)@PostMapping( "/remove")@ResponseBodypublic AjaxResult remove(String ids){return toAjax(informationsService.deleteInformationsByIds(ids));}}?
添加頁面修改：
<!DOCTYPE HTML> <html lang="zh" xmlns:th="http://www.thymeleaf.org"> <meta charset="utf-8"> <head th:include="include :: header"></head> <body class="white-bg"><div class="wrapper wrapper-content animated fadeInRight ibox-content"><!--/*@thymesVar id="informations" type="cn.cmodes.project.module.informations.domain.Informations"*/--><form class="form-horizontal m" id="form-informations-add"> <input id="resourceId" name="resourceId" type="hidden" th:value="*{resourceId}" >//隱藏域<input id="type" name="type" type="hidden" th:value="*{type}" > //隱藏域<div class="form-group"> <label class="col-sm-3 control-label">名稱：</label><div class="col-sm-8"><input id="name" name="name" class="form-control" type="text" ></div></div><div class="form-group"> <label class="col-sm-3 control-label">描述：</label><div class="col-sm-8"><!--<input id="description" name="description" class="form-control" type="text" >--><script id="description" name="description" type="text/plain"></script></div></div><div class="form-group"> <label class="col-sm-3 control-label">附件：</label><div class="col-sm-8"><!--<input id="path" name="path" class="form-control" type="text" >--><input id="path" name="path" class="form-control" type="hidden"><input id="pathInputFile" name="files" type="file" data-input="path"data-allowedFileExtensions="doc,docx,pdf,jpg,jpeg,png" class="file-loading inputFile"/></div></div><!--<div class="form-group"><label class="col-sm-3 control-label">備用字段：</label><div class="col-sm-8"><input id="pro1" name="pro1" class="form-control" type="text" ></div></div><div class="form-group"> <label class="col-sm-3 control-label">備用字段：</label><div class="col-sm-8"><input id="pro2" name="pro2" class="form-control" type="text" ></div></div>--><div th:include="include::formBtnGroup"></div></form></div><div th:include="include::footer"></div><script type="text/javascript">var prefix = ctx + "module/informations";$("#form-informations-add").validate({rules:{xxxx:{required:true}}});//富文本初始化richTextInit('description');//上傳文本框初始化fileUploadInit("path");function submitHandler() {if ($.validate.form()) {$.operate.save(prefix + "/add", $('#form-informations-add').serialize());}else {//滑到錯誤位置$('html,body').animate({scrollTop: $("label.error").offset().top-20}, 100);}}</script> </body> </html>?
修改頁面：
<!DOCTYPE HTML> <html lang="zh" xmlns:th="http://www.thymeleaf.org"> <meta charset="utf-8"> <head th:include="include :: header"></head> <body class="white-bg"><div class="wrapper wrapper-content animated fadeInRight ibox-content"><!--/*@thymesVar id="informations" type="cn.cmodes.project.module.informations.domain.Informations"*/--><form class="form-horizontal m" id="form-informations-edit" th:object="${informations}"> <input id="id" name="id" th:field="*{id}" type="hidden"><input id="resourceId" name="resourceId" type="hidden" th:value="*{resourceId}" ><input id="type" name="type" type="hidden" th:value="*{type}" ><!--<div class="form-group"><label class="col-sm-3 control-label">資源id：</label><div class="col-sm-8"><input id="resourceId" name="resourceId" th:field="*{resourceId}" class="form-control" type="text" ></div></div><div class="form-group"> <label class="col-sm-3 control-label">資源類型：</label><div class="col-sm-8"><input id="type" name="type" th:field="*{type}" class="form-control" type="text" ></div></div>--><div class="form-group"> <label class="col-sm-3 control-label">名稱：</label><div class="col-sm-8"><input id="name" name="name" th:field="*{name}" class="form-control" type="text" ></div></div><div class="form-group"> <label class="col-sm-3 control-label">描述：</label><div class="col-sm-8"><!-- <input id="description" name="description" th:field="*{description}" class="form-control" type="text" >--><script id="description" name="description" th:utext="*{description}" type="text/plain"></script></div></div><div class="form-group"> <label class="col-sm-3 control-label">附件：</label><div class="col-sm-8"><!-- <input id="path" name="path" th:field="*{path}" class="form-control" type="text" >--><input id="path" name="path" th:field="*{path}" class="form-control" type="hidden"><input id="pathInputFile" name="files" type="file" data-allowedFileExtensions="doc,docx,pdf,jpg,jpeg,png" th:value="*{path}"class="file-loading"/></div></div><!-- <div class="form-group"><label class="col-sm-3 control-label">備用字段：</label><div class="col-sm-8"><input id="pro1" name="pro1" th:field="*{pro1}" class="form-control" type="text" ></div></div><div class="form-group"> <label class="col-sm-3 control-label">備用字段：</label><div class="col-sm-8"><input id="pro2" name="pro2" th:field="*{pro2}" class="form-control" type="text" ></div></div>--><div th:include="include::formBtnGroup"></div></form></div><div th:include="include::footer"></div><script type="text/javascript">var prefix = ctx + "module/informations";$("#form-informations-edit").validate({rules:{xxxx:{required:true}}});//富文本初始化richTextInit('description');//上傳文本框初始化fileUploadInit("path");function submitHandler() {if ($.validate.form()) {$.operate.save(prefix + "/edit", $('#form-informations-edit').serialize());}else {//滑到錯誤位置$('html,body').animate({scrollTop: $("label.error").offset().top-20}, 100);}}</script> </body> </html>?
前臺頁面的樣子：
?
轉載于:https://www.cnblogs.com/zhukaixin/p/10562970.html
總結
以上是生活随笔為你收集整理的bootstrap table 超链接的添加 a标签的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于jmstudio 调用本地摄像头的问
- 下一篇： 建造智能食用菌大棚，用菌菇养殖管理系统管