效果图
步骤:
1,引入插件
2,页面样式代码编写
3,设置sql弹窗样式,初始化弹窗变量值
//引入插件
<link href="${ctx}/static/js/plugins/codemirror-5.14.2/theme/eclipse.css" rel="stylesheet" type="text/css" />
<link href="${ctx}/static/js/plugins/codemirror-5.14.2/lib/codemirror.css" rel="stylesheet" />
<script type="text/javascript" src="${ctx}/static/js/plugins/codemirror-5.14.2/lib/codemirror.js"></script>
<script type="text/javascript" src="${ctx}/static/js/plugins/codemirror-5.14.2/mode/sql/sql.js"></script>
// 注意;sql弹窗的页面样式与父窗口的页面样式在同一个jsp文件中
<div id="defaultValue_div" style="display: none;">
<div class="div_border">
<div class="div_h">
<textarea id="zbsql" class="bi-width357 form-control"
type="text" placeholder=" " name="zbsql" class="bi-width140 form-control" style=" display: block; width:435px; "></textarea>
</div>
</div>
<div id="inenr_datagriddivbtn" style="margin-top: 10px;padding-top: 10px;;padding:3px;text-align:center;" >
<button type="button" onclick="layer.closeAll()" class="btn btn-primary input-sm">确定</button>
<button type="button" onclick=" layer.closeAll()" class="btn btn-danger btn-xs ">取消</button>
</div>
</div>
// 初始化sql弹窗数据以及弹窗的样式
editor = CodeMirror.fromTextArea(document.getElementById("zbsql"), {
lineNumbers: true,
matchBrackets: true,
lineWrapping:true,
mode: "text/x-plsql"
});
editor.setOption("theme", "eclipse");
editor.setSize('95%', '280px');
// 获取sql弹窗值的请求路径//这个sql只需要返回一个String类型即可
function dysql() {
if(!interId){
dLong.layerInfo("请选择导出接口.");
return;
}
layer.open({
type: 1,
area: ['600px', '400px'],
shade: false,
title: '对应SQL',
content:$('#defaultValue_div')
});
var jsonData={
};
$.ajax({
type: 'post',
url: "/BaexportInfController/dbInter?interId="+interId,
contentType: "application/json; charset=utf-8",
data: JSON.stringify(jsonData),
dataType: "json",
success: function (data) {
editor.setValue(data.sql);
}
});
}