index.html

<style>
    /*样式写这里*/
    .sqliteadmin-table table tbody tr td span{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width:580px;
        display:block;
    }
   .sqliteadmin hr {
		margin-top: 10; 
		margin-bottom: 10; 
	}
	#sPath{min-width:432px;}
	#folder{min-width:300px;}
	#show-Result a{cursor:pointer;}
</style>
<div class="bt-form sqliteadmin">
    <div class="bt-w-main" >
        <!--菜单部分-->
        <div class="bt-w-menu bt-soft-menu" >
            <p class="bgw" onclick="sqliteadmin.get_index()">数据库</p>
            <p onclick="sqliteadmin.run_sql()">SQL操作</p>
        </div>
        <!--内容部分-->
		
        <div class="bt-w-con pd15" style="margin-bottom:5px">
            <label id="db_info" style="display:none">当前选择数据库：<span class="dbpath"></span></label>
            <div class="plugin_body mf-tab1">
			
				<div style="margin-bottom:1px"> 
					<label> 数据库文件(绝对路径): </label> <input id="sPath" class="sl300 bt-input-text mr5"> 
					<button class="btn btn-success btn-sm" onclick="sqliteadmin.add_db()">添加数据库</button>
				</div>
				<hr />
				<label>已保存的数据库</label>
				<div>
				    <table class="table table-hover">
                        <thead><tr><th width="150">操作</th><th>sqlite3文件路径(PATH)</th></tr></thead>
                        <tbody class="save_db"></tbody>
                    </table>
                    <small>Tips：此处删除只会删除保存的链接，不会删除数据库源文件</small>
				</div>
				<hr>
				<div  style="margin-bottom:1px"> 
					<label> 目录: </label> <input  id="folder" name="folder" class="sl300 bt-input-text mr5 server_path"  value="/www/wwwroot"> 
					<span data-id="folder" class="glyphicon cursor mr5 glyphicon-folder-open" onclick="bt.select_path('server_path')"></span>
					<label> 文件类型: </label> <input id="exts"  class="sl300 bt-input-text mr5"    value="*.db;*.sqlite;*sqlite3" required="required">	
					<button class="btn btn-success btn-sm" onclick="sqliteadmin.get_scan()">扫描</button>
				</div>
			
			<hr />
			<div id="show-rs-tpl" style="display:none">
				<div>
					<a style="cursor: pointer;" onclick="GetFiles(1,'name')">文件名
					<span data-id="status" class="glyphicon glyphicon-triangle-bottom" style="margin-left:5px;color:#bbb"></span></a>
				</div>
				<div>
				<br>
				</div>
			</div>
			<div id="show-Result"></div>
			<div class="bt-w-con pd15"><div class="plugin_body_add"></div></div>
			</div>
			<div class="plugin_body mf-tab2" style="display:none">
				<div class="tab2_content"></div>
			</div>
			<div class="plugin_body mf-tab3" style="display:none">
				<textarea rows="5" name="text" id="sql_text" class="text" tabindex="5" required="" style="width:100%"></textarea>
				<button onclick="sqliteadmin.run_sql_db()">运行SQL</button>
				<div class="sql_result" style="margin-top:10px"></div>
			</div>
		</div>
    </div>
</div>

<!--JS脚本部分，不要将JS脚本写在其它地方-->
<script type="text/javascript">
    var db_path = '';
    //定义窗口尺寸
    $('.layui-layer-page').css({ 'width': '1000px' });

    //左测菜单切换效果
    $(".bt-w-menu p").click(function () {
        $(this).addClass('bgw').siblings().removeClass('bgw')
    });

    /**
     * 插件交互对象
     * 您的所有JS代码可以写在里面
     * 若不习惯JS的面向对象编程，可删除此对象，使用传统函数化的方式编写
     * */
    var sqliteadmin = {
        //构造概览内容
        get_index: function () {
           $('.mf-tab1').show();$('.mf-tab2').hide();$('.mf-tab3').hide();
           request_plugin('sqliteadmin', 'get_dbs', '', function (res) {
               var html = '';
               var data = res.result;
               for(var item of data) {
                   html+=`<tr>
                                <td>
                                    <a onclick="sqliteadmin.manage_db('${item}')">管理</a> ｜ 
                                    <a onclick="sqliteadmin.del_db('${item}')">删除</a>
                                </td>
                                <td><span>${item}</span></td>
                            </tr>`
               }
                $('.save_db').html(html);
            });
        },
        
        run_sql: function (){
            $('.mf-tab1').hide();$('.mf-tab2').hide();$('.mf-tab3').show();
        },
        
        add_db: function (sPath) {
            var sPath = sPath || $('#sPath').val();
            request_plugin('sqliteadmin', 'add_dbs', {db_path:sPath}, function (res) {
               layer.msg(res.msg, { icon: 1 });
               sqliteadmin.get_index();
            });
        },
        
        del_db: function (db_path) {
            request_plugin('sqliteadmin', 'del_dbs', {db_path:db_path}, function (res) {
               layer.msg(res.msg, { icon: 1 });
               sqliteadmin.get_index();
            });
        },
        
		manage_db: function (db_path) {
		    $('.mf-tab1').hide();$('.mf-tab2').show();$('#db_info').show();$('.mf-tab3').hide();
		    $('.dbpath').html(db_path);
		    var db_path = db_path || $('.dbpath').text();
		    request_plugin('sqliteadmin', 'get_tables', {db_path:db_path}, function (res) {
                $('.tab2_content').html(`<pre>${JSON.stringify(res, null, 2)}</pre>`);
                var html =`<table class="table table-hover">
                        <thead><tr><th width="150">操作</th><th>表名</th></tr></thead>
                        <tbody>`;
               var data = res.result;
               for(var item of data) {
                   html+=`<tr>
                                <td>
                                    <a onclick="sqliteadmin.get_table_data('${item}')">查看</a>
                                </td>
                                <td><span>${item}</span></td>
                            </tr>`
               }
                $('.tab2_content').html(html+'</tbody></table>');
            });
        },
        
        get_table_data: function (table_name) {
            var db_path = $('.dbpath').text();
		    request_plugin('sqliteadmin', 'get_table_rows', {db_path:db_path,table_name:table_name}, function (res) {
                var html =`<label>当前数据表：${res.table_name}  | <a onclick="sqliteadmin.manage_db('${db_path}')">返回数据库</a></label><table class="table table-hover">
                        <thead><tr>`;
                for(var item of res.col_names[0]) {
                    html += `<th width="150">${item}</th>`
                }
                html+='</tr></thead><tbody>'
               var data = res.datas;
               for(var item of data) {
                   html+='<tr>'
                   for (var i of item){
                       html+=`<td><span>${i}</span></td>`
                   }
                   html+='</tr>'
               }
                $('.tab2_content').html(html+'</tbody></table>');
            });
        },
		
		run_sql_db: function(){
		    var db_path = $('.dbpath').text();
		    if(!db_path) return layer.msg('请先选择数据库！', { icon: 2 });
		    var sql = $('#sql_text').val();
		    $('.sql_result').html('<center>SQL 执行中...</center><br><br>'+sql);
			request_plugin('sqliteadmin', 'run_sql', {db_path:db_path,sql:sql}, function (res) {
				layer.msg(res.msg, { icon: res.flag });
				if (res.flag == 2){
				    return $('.sql_result').html('<br><h3>请检查SQL语句是否错误：</h3><br>'+res.msg);
				}
				var html =`<table class="table table-hover"><tbody>`
               var data = res.datas;
               for(var item of data) {
                   html+='<tr>'
                   for (var i of item){
                       html+=`<td><span>${i}</span></td>`
                   }
                   html+='</tr>'
               }
                $('.sql_result').html(html+'</tbody></table>');
			})
		},
		
		get_scan: function(){
			var folderPth = $('#folder').val(), exts=$('#exts').val();
			if(!folderPth){layer.msg("目录不能为空", { icon: 2 }); return}
			if(!exts){layer.msg("文件类型不能为空", { icon: 2 }); return}
			$('.sqliteadmin button').attr('disabled',true);
			$('#show-Result').html('<center>扫描中...</center>');
			request_plugin('sqliteadmin', 'get_scan', {folder:folderPth, exts:exts}, function (rdata) {
				$('.sqliteadmin button').attr('disabled',false)
				if(rdata.error){
					layer.msg(rdata.error, { icon: 2 });
				}else{
					//window.open('/sqliteadmin/home/','_pyblank').focus();
					if(!rdata.result&&rdata.msg){
                        layer.msg(rdata.msg, { icon: 2 });
                        return;
                    }
					var rs=rdata.result, log_body = '';
					for (var i = 0; i < rs.length; i++) {
						log_body += '<tr><td><a onclick="sqliteadmin.add_db('
						               +"'" +rs[i] + "')"+'"'+">添加</a>"
						+ '</td><td><span>' + rs[i] + '</span></td></tr>'
					}

					var my_body = '<div class="sqliteadmin-table"><div class="divtable">'
								+'<table class="table table-hover">'
									+'<thead>'
										+'<tr><th width="150">操作</th><th>sqlite3文件路径(PATH)</th></tr>'
									+'</thead>'
									+'<tbody>'+ log_body + '</tbody>'
								+'</table>'
						+ '</div></div>'
						//+ '</div><div class="page" style="margin-top:15px">' + rdata.page + '</div</div>';

					$('#show-Result').html(my_body);
				}
			})
		}
    }

    
    function request_plugin(plugin_name, function_name, args, callback, timeout) {
        $.ajax({
            type:'POST',
            url: '/plugin?action=a&s=' + function_name + '&name=' + plugin_name,
            data: args,
            timeout:timeout || 3600 * 1000,
            success: function(rdata) {
                if (!callback) return layer.msg(res.msg, { icon: res.status ? 1 : 2 });
                return callback(rdata);
            },
            error: function(ex) {
                if (!callback) return layer.msg('请求过程发现错误!', { icon: 2 });
                return callback(ex);
            }
        });
    }

    //第一次打开窗口时调用
    sqliteadmin.get_index();

</script>