从函数调用bootstrap模态

时间:2015-11-03 12:00:16

标签: javascript twitter-bootstrap bootstrap-modal

我正在尝试使用模态,但我似乎没有找到正确的方向

这个功能

function operateFormatter(value, row, index) {
            return [
                '<a class="info btn btn-warning btn-xs" title="Editar" id="bt" data-unique-id="',row.id,'" data-toggle="myModal" data-target="#myModal',row.id,'">',
                '<i class="glyphicon glyphicon-edit"></i>',
                '</a>',
                ''<a href="#myModal" class="danger btn btn-danger btn-xs" title="Remover" id="bt" data-unique-id="',row.id,'" data-toggle="myModal" data-target="#myModal',row.id,'">',                    '<i class="glyphicon glyphicon-remove"></i>',
                '</a>'
            ].join('');
        }

我想从该函数中调用我的模态

 function removeItem(index, row){
             var id_itens = JSON.stringify(row.id_itens);
             $('#myModal').modal('show');
        }

但没有任何表现......任何帮助?

UPDATE 本页的所有内容

    <?php
error_reporting(E_ALL | E_NOTICE);
ini_set('display_errors', '1');
include_once 'dbconfig.php';

?>

<!DOCTYPE html>
<html>
    <head>
        <title>Itens Registados</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="bootstrap/css/style_no_image.css" type="text/css"  />
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="bootstrap/css/bootstrap-table.css">
        <link rel="stylesheet" href="bootstrap/css/bootstrap-editable.css">
        <script src="js/jquery.min.js"></script>
        <script src="js/jquery-1.6.min.js"></script>
        <style>
            #bt {
                margin-left: 20px;
            }

            th.alinhado{
                text-align: center;
            }
        </style>

    </head>
    <body>
        <div class="header">
            <div class="left">
                <label><a href="http://www.esmaior.pt/agrupamento/">ESMAIOR- Gestão Biblioteca</a></label>
            </div>
            <div class="right">
                <label><a href="logout.php?logout=true"><i class="glyphicon glyphicon-log-out"></i> Sair</a></label>
            </div>
        </div>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <?php include 'menu_admin.php'; ?>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <h3>Visualização e Edição de Registos</h3>
            <table id="table" class="table table-bordered table-striped"
                   data-toggle="table"
                   data-pagination="true"
                   data-search="true"
                   data-show-refresh="true"
                   data-show-toggle="true"
                   data-show-columns="true"
                   data-toolbar="#toolbar"
                   data-url='pdoGetItens.php'>
                <thead>
                    <tr>
                        <th data-field="id_itens" class="hidden">ID</th>
                        <th data-field="nome" data-editable="true" class="alinhado">Nome</th>
                        <th data-field="descricao" data-editable="true" class="alinhado">Descrição</th>
                        <th data-field="tipo" data-editable="true" class="alinhado" data-align="center">Tipo</th>
                        <th data-field="estado" data-editable="true" class="alinhado" data-align="center">Estado</th>
                        <th data-field="data" data-editable="true" class="alinhado" data-align="center">Data</th>
                        <th data-field="quantidade" data-editable="true" class="alinhado" data-align="center">Quantidade</th>
                        <th data-field="operate" data-formatter="operateFormatter" data-events="operateEvents" class="alinhado" data-align="center">Opções</th>
                    </tr>
                </thead>
            </table>
        </div>
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                         <h3 class="modal-title" id="myModalLabel">Atenção!</h3>
                    </div>
                    <div class="modal-body">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" id="btnDelteYes" href="#">Sim</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Não</button>
                    </div>
                </div>
            </div>
        </div>
        <script src="js/bootstrap-table.js"></script>
        <script src="js/bootstrap-table-pt-PT.js"></script>
        <script>
            function operateFormatter(value, row, index) {
                return [
                    "<a class='info btn btn-warning btn-xs' title='Editar' id='bt' data-unique-id='"+row.id+"' data-toggle='myModal' data-target='#myModal"+row.id+"'>",                
                    "<i class='glyphicon glyphicon-edit'></i>",
                    "</a>",
                    "<a href='#myModal' class='danger btn btn-danger btn-xs' title='Remover' id='bt' data-unique-id='"+row.id+"' data-toggle='myModal' data-target='#myModal'"+row.id+"'>",
                    "<i class='glyphicon glyphicon-remove'></i>",
                    "</a>"
                ].join('');
            }

            function removeItem(row){
             var id_itens = JSON.stringify(row.id_itens);
             $('#myModal').modal('show');
            }


        </script>
    </body>
</html>

更新2

<script>
        function operateFormatter(value, row, index) {
            return [
                "<a class='info btn btn-warning btn-xs' title='Editar' id='bt'>",                
                "<i class='glyphicon glyphicon-edit'></i>",
                "</a>",
                '<a class="remove btn btn-danger btn-xs" href="#myModal" title="Remover">',
                '<i class="glyphicon glyphicon-remove"></i>',
                '</a>'      
            ].join(' ');
        }

         window.operateEvents = {
        'click .like': function (e, value, row, index) {
            alert('You click like icon, row: ' + JSON.stringify(row));
            console.log(value, row, index);
        },
        'click .edit': function (e, value, row, index) {
            alert('You click edit icon, row: ' + JSON.stringify(row));
            console.log(value, row, index);
        },
        'click .remove': function (e, value, row, index) {
            $('#myModal').modal('show').find('.modal-body #nome').val(JSON.stringify(row.nome));
            $('#myModal').modal('show').find('.modal-body #id_itens').val(JSON.stringify(row.id_itens));
        }
    }

e o meu modal devia chamarafunção

 <form onsubmit="submitForm('#myForm'); return false;" id='myForm'>

功能

function submitForm(formId) {
            var user_id = $('input[id="id_itens"]').val();
            console.log(user_id);}

mas nada acontece

1 个答案:

答案 0 :(得分:0)

更清楚地编写代码,以便我们更好地理解。

现在我可以告诉你在返回的构造中有几个错误。

我认为它的工作更好

function operateFormatter(value, row, index) {
    return [
        "<a class='info btn btn-warning btn-xs' title='Editar' id='bt' data-unique-id='"+row.id+"' data-toggle='myModal' data-target='#myModal"+row.id+"''>",                
        "<i class='glyphicon glyphicon-edit'></i>",
        "</a>",
        "<a href='#myModal' class='danger btn btn-danger btn-xs' title='Remover' id='bt' data-unique-id='"+row.id+"' data-toggle='myModal' data-target='#myModal"+row.id+"'>",
        "<i class='glyphicon glyphicon-remove'></i>",
        "</a>"
    ].join('');
}