文档章节

bootstrap table 超链接的添加 <a>标签

o
 osc_fmg49rzg
发布于 2019/03/20 09:47
字数 1501
阅读 17
收藏 0

精选30+云产品,助力企业轻松上云!>>>

后台管理页面采用 bootstrap table

页面样式:

 

 

现在需要在操作中添加一个<a>标签,跳转到不同的页面

 {
                        title: '操作',
                        align: 'center',
                        formatter: function(value, row, index) {
                            var actions = [];
                            actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="#" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>修改</a>  ');
                            actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="#" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>  ');
                            actions.push('<a class="btn btn-warning btn-xs " href="#" onclick="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" onclick="$.operate.add()" shiro:hasPermission="module:informations:add">
            <i class="fa fa-plus"></i> 添加
        </a>
        <a class="btn btn-primary btn-edit disabled" onclick="$.operate.edit()"
           shiro:hasPermission="module:informations:edit">
            <i class="fa fa-edit"></i> 修改
        </a>
        <a class="btn btn-danger btn-del btn-del disabled" onclick="$.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开始的,所以要加上1
                        return 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="#" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>修改</a> ');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="#" onclick="$.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
{

    @Autowired
    private 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")
    @ResponseBody
    public 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")
    @ResponseBody
    public 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")
    @ResponseBody
    public AjaxResult editSave(Informations informations)
    {
        return toAjax(informationsService.updateInformations(informations));
    }

    /**
     * 删除拓片/石刻
     */
    @RequiresPermissions("module:informations:remove")
    @Log(title = "拓片/石刻", businessType = BusinessType.DELETE)
    @PostMapping( "/remove")
    @ResponseBody
    public 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>

 

前台页面的样子:

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
源码开发一茶一念商城系统

<div id="subnav01"class="sub_nav">源码开发一茶一念商城系统,150微1305电3356,<a一茶一念商城平台开发,href="http://www.myco一茶一念商城系统开发des.net/5/">ASP源码</a>一茶一念商城......

xiaoli789
2018/07/31
0
0
a标签href不跳转 禁止跳转

<div id="cnblogspostbody" class="blogpost-body"><p><span style="font-family:华文细黑">a标签href不跳转 禁止跳转</span></p><p><span style="font-family:华文细黑">当页面中a标签不需要......

osc_sd6j22mg
2018/07/03
3
0
a标签href不跳转 禁止跳转

<div id="cnblogspostbody" class="blogpost-body"><p><span style="font-family:华文细黑">a标签href不跳转 禁止跳转</span></p><p><span style="font-family:华文细黑">当页面中a标签不需要......

osc_5aksh307
2018/08/21
2
0
HTML5元素周期表

<h1 id="html5-">HTML5元素周期表</h1><ol><li><p>根元素</p><pre><code>1. html 文档根元素</code></pre><hr></li><li><p>元数据和脚本</p><pre><code>1. head HTML文档中的第一个元素。包含......

osc_o48qx32p
2019/09/02
2
0
Html快速上手

Html 概述 HTML文档 Doctype Meta Title Link Style Script 常用标签 各种符号 p 和 br a 标签 H 标签 select input:checkbox input:redio input:password input:button input:file textare......

osc_v8xs2czi
2018/09/11
2
0

没有更多内容

加载失败,请刷新页面

加载更多

2020-07-03:有1亿个数字,其中有2个是重复的,快速找到它,时间和空间要最优

福哥答案2020-07-03: 1.双重遍历。 时间复杂度是O(N^2)。 2.排序。 采用外部排序。时间复杂度是O(NlogN)。 3.遍历加哈希存储。 空间换时间,时间复杂度是O(N),空间复杂度是O(N)。这种方法适...

osc_ix000whh
18分钟前
17
0
O2OA开源免费开发平台:在O2门户页面中使用React(三)

在前面的章节中,我们介绍了两种在O2OA中使用React开发应用的方式,已经可以满足绝大多数的情况了。如果您考虑完全脱离O2的web服务器,自己搭建web服务器,那就请阅读本章。   我们还是使用...

O2OA企业信息化平台
18分钟前
18
0
harbor 2.0 搭建docker私有仓库

harbor Harbor 是一个CNCF基金会托管的开源的可信的云原生docker registry项目,可以用于存储、签名、扫描镜像内容,Harbor 通过添加一些常用的功能如安全性、身份权限管理等来扩展 docker r...

osc_l7zl78wt
20分钟前
17
0
Java并发编程(06):Lock机制下API用法详解

本文源码:GitHub·点这里 || GitEE·点这里 一、Lock体系结构 1、基础接口简介 Lock加锁相关结构中涉及两个使用广泛的基础API:ReentrantLock类和Condition接口,基本关系如下: Lock接口 ...

osc_kiub62pt
21分钟前
22
0
DNS存在的问题

1、域名缓存问题 本地做一个缓存,直接返回缓存数据。可能会导致全局负载均衡失败,因为上次进行的缓存,不一定是这次离客户最近的地方,可能会绕远路。 2、域名转发问题 如果是A运营商将解析...

mind-blowing
22分钟前
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部