orico-official-website-old/app/admin/view/dbmanager/index.html

<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            数据库
        </h1>
        <ol class="breadcrumb">
            <li><a href="<?php echo url('/admin/index/index');?>"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li><a href="<?php echo url('/admin/dbmanager/lists');?>"> 数据库表</a></li>
            <li class="active"> 数据库</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-md-10">
                <form class="form-horizontal" action="" method="post" id="sqlqueryform">
                    <div class="nav-tabs-custom">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#navfirst" data-toggle="tab"><i class="fa fa-cog text-green"></i> 命令行工具</a></li>
                        </ul>
                        <div class="tab-content">
                            <div class="active tab-pane" id="navfirst">
                                <div class="form-group">
                                    <label for="querytype" class="col-sm-2 control-label">查询类型</label>
                                    <div class="col-sm-10">
                                        <label class="radio-inline">
                                            <input type="radio" name="querytype" value="1" checked>  单行命令（支持简单SELECT查询）
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" name="querytype" value="2"> 其他命令（返回执行的结果信息）
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="sqlquery" class="col-sm-2 control-label">运行SQL命令行</label>
                                    <div class="col-sm-10">
                                        <textarea class="form-control" id="sqlquery" name="sqlquery" rows="6"></textarea>
                                    </div>
                                    <div class="col-sm-10 col-sm-offset-2">
                                        <span class="help-block">(不支持删除记录和表的操作)</span>
                                    </div>
                                </div>
                            </div>
                            <!-- /.tab-pane -->
                        </div>
                        <!-- /.tab-content -->
                        <div class="nav-footer row">
                            <div class="col-sm-2 col-sm-offset-2">
                                <p><button id="reset-btn" type="button" class="btn btn-warning btn-block">重置</button></p>
                            </div>
                            <div class="col-sm-2">
                                <p><button id="submit-btn" type="button" class="btn btn-danger btn-block">查询</button></p>
                            </div>
                            <!-- /. row -->
                        </div>
                    </div>
                    <!-- /.nav-tabs-custom -->
                </form>
            </div>
            <div class="col-md-2">
                <div class="box box-primary">
                    <div class="box-header">
                        <h3 class="box-title">快捷入口</h3>
                    </div>
                    <div class="box-body">
                        <a href="<?php echo url('/admin/dbmanager/lists');?>" class="btn btn-block btn-primary">数据库表</a>
                        <a href="<?php echo url('/admin/dbmanager/databaklist');?>" class="btn btn-block btn-primary">备份列表</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- /.content -->
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="modal-sql" tabindex="-1">
    <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>
                <h5 class="modal-title blue" id="modal-title">执行结果</h5>
            </div>
            <div class="modal-body">
                <div id="ajaxcontent"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<style>
    .table thead > tr > td, .table tbody > tr > td {
        vertical-align: middle;
    } 
</style>
<!-- /.content-wrapper -->
<script type="text/javascript">
    $(function() {
        $("#reset-btn").click(function(event) {
            if (confirm('确认重置所有表单项吗?')) {
                this.form.reset();
            }
        });
        $('#submit-btn').click(function(event) {
            var that = this;
            var options = {
                url: "<?php echo url('admin/dbmanager/sqlquery');?>",
                type: "post",
                cache: false,
                dataType: "json",
                data: $("#sqlqueryform").serialize(),
                beforeSend: function() {
                    $(that).tooltip({trigger: 'manual', placement: 'top', html: 'true', title: '<i class="fa fa-spinner fa-spin"></i>  提示！正在处理中...'});
                    $(that).tooltip('show');
                },
                success: function(data) {
                    //alert(data);
                    console.log(data);
                    if (data.code > 0) {
                        switch (data.code) {
                            case 1:
                                $("#ajaxcontent").html('<p>' + data.msg + '</p>' + getTempContent(data.data));
                                $('#modal-sql').modal({show: true, backdrop: 'static'});
                                break;
                            case 2:
                                $("#ajaxcontent").html('<p>' + data.msg + '</p>');
                                $('#modal-sql').modal({show: true, backdrop: 'static'});
                                break;
                            default:
                                alert(data.msg);
                                break;
                        }
                    } else {
                        alert(data.msg);
                    }
                },
                complete: function(xhr, status) {
                    setTimeout(function() {
                        $(that).tooltip('hide');
                    }, 1000);
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert("上传失败，请检查网络后重试");
                }
            };
            $.ajax(options);
        });
        function getTempContent(data) {
            var html = '<div class="table-responsive"><table class="table table-hover table-bordered text-center">',
                    len = data.length, i, row, p;
            row = data[0];
            html += '<tr>';
            for (p in row) {
                html += '<th>' + p + '</th>';
            }
            html += '</tr>';
            for (i = 0; i < len; i++) {
                row = data[i];
                html += '<tr>';
                for (p in row) {
                    html += '<td>' + row[p] + '</td>';
                }
                html += '</tr>';
            }
            html += '</table></div>';
            return html;
        }
    });
</script>