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

最新推荐文章于 2023-12-13 10:12:34 发布

aocheqing0591

最新推荐文章于 2023-12-13 10:12:34 发布

阅读量6.1k

点赞数 1

文章标签： javascript java ui ViewUI

原文链接：http://www.cnblogs.com/zhukaixin/p/10562970.html

版权

本文介绍了如何在使用Bootstrap Table的后台管理页面中添加超链接<a>标签，以实现跳转到不同页面的功能。详细讲解了页面样式调整、控制器代码修改和页面添加的步骤，帮助开发者实现前端交互。

摘要由CSDN通过智能技术生成

后台管理页面采用 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