프런트 엔드 SQL 편집 팝업

효과 사진

단계:

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);
            }
        });
    }