p85126437
/
datagear
forked from p81075629/datagear
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

SQL工作台：引入ace代码编辑器库，用于输入SQL

This commit is contained in:
datagear 2019-03-11 20:18:14 +08:00
parent 6e8562fc44
commit c2ff52797d
16 changed files with 21625 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
datagear-web/src/main/webapp/WEB-INF/view/change_theme_data.ftl
View File

@ -14,5 +14,10 @@
"selector" : "#css_common",
"attr" : "href",
"value" : "${contextPath}/static/theme/<@spring.theme code='theme' />/common.css"
},
{
"selector" : "#css_ace",
"attr" : "href",
"value" : "${contextPath}/static/theme/<@spring.theme code='theme' />/ace-21.02.19/ace.css"
}
]

5
datagear-web/src/main/webapp/WEB-INF/view/include/html_head.ftl
View File

@ -11,6 +11,8 @@ var contextPath="${contextPath}";
<link href="${contextPath}/static/theme/jstree-3.3.7/style.css" type="text/css" rel="stylesheet" />
<link href="${contextPath}/static/theme/DataTables-1.10.18/datatables.min.css" type="text/css" rel="stylesheet" />
<link href="${contextPath}/static/theme/jQuery-File-Upload-9.21.0/jquery.fileupload.css" type="text/css" rel="stylesheet" />
<link href="${contextPath}/static/theme/ace-21.02.19/ace.css" type="text/css" rel="stylesheet" />
<link id="css_ace" href="${contextPath}/static/theme/<@spring.theme code='theme' />/ace-21.02.19/ace.css" type="text/css" rel="stylesheet" />
<link href="${contextPath}/static/theme/datagear-pagination.css" type="text/css" rel="stylesheet" />
<link href="${contextPath}/static/theme/common.css" type="text/css" rel="stylesheet" />
<link id="css_common" href="${contextPath}/static/theme/<@spring.theme code='theme' />/common.css" type="text/css" rel="stylesheet" />
@ -27,7 +29,8 @@ var contextPath="${contextPath}";
<script src="${contextPath}/static/script/jquery-validation-1.17.0/jquery.validate.js" type="text/javascript"></script>
<script src="${contextPath}/static/script/jquery-validation-1.17.0/additional-methods.js" type="text/javascript"></script>
<script src="${contextPath}/static/script/textarea-helper-0.3.1/textarea-helper.js" type="text/javascript"></script>
<script src="${contextPath}/static/script/jquery.actual-1.0.19/jquery.actual.js" type="text/javascript"></script>
<script src="${contextPath}/static/script/ace-21.02.19/ace.js" type="text/javascript"></script>
<script src="${contextPath}/static/script/ace-21.02.19/mode-sql.js" type="text/javascript"></script>
<script src="${contextPath}/static/script/datagear-pagination.js" type="text/javascript"></script>
<script src="${contextPath}/static/script/datagear-model.js" type="text/javascript"></script>
<script src="${contextPath}/static/script/datagear-modelcache.js" type="text/javascript"></script>

21
datagear-web/src/main/webapp/WEB-INF/view/sqlpad/sqlpad.ftl
View File

@ -25,21 +25,11 @@ Schema schema 数据库，不允许为null
<div class="content ui-widget ui-widget-content">
<div class="content-editor">
<div class="content-edit-content">
<p>select * from project;</p>
<p>select * from project;</p>
<p>select * from project;</p>
<p>select * from project;</p>
<p>select * from project;</p>
<p>select * from project;</p>
<p>select * from project;</p>
<p>select * from project;</p>
<div id="${pageId}-sql-editor" class="sql-editor"></div>
</div>
</div>
<div class="content-result">
<p>update ok</p>
<p>update ok</p>
<p>update ok</p>
<p>update ok</p>
<div>update ok</div>
</div>
</div>
<div class="foot">
@ -56,6 +46,11 @@ Schema schema 数据库，不允许为null
{
$.initButtons(po.element(".operation"));
po.sqlEditor = ace.edit("${pageId}-sql-editor");
var SqlMode = ace.require("ace/mode/sql").Mode;
po.sqlEditor.session.setMode(new SqlMode());
po.sqlEditor.setShowPrintMargin(false);
$.resizableStopPropagation(po.element(".content-editor"),
{
containment : "parent",
@ -72,7 +67,7 @@ Schema schema 数据库，不允许为null
ui.element.css("height", editorHeightPercent);
$(".content-result", parent).css("height", resultHeightpercent);
return false;
po.sqlEditor.resize();
}
});
})

21315
datagear-web/src/main/webapp/static/script/ace-21.02.19/ace.js Normal file
View File

File diff suppressed because it is too large Load Diff

17
datagear-web/src/main/webapp/static/script/ace-21.02.19/min/ace.js Normal file
View File

File diff suppressed because one or more lines are too long

8
datagear-web/src/main/webapp/static/script/ace-21.02.19/min/mode-sql.js Normal file
View File

@ -0,0 +1,8 @@
define("ace/mode/sql_highlight_rules",["require","exports","module","ace/lib/oop","ace/mode/text_highlight_rules"],function(e,t,n){"use strict";var r=e("../lib/oop"),i=e("./text_highlight_rules").TextHighlightRules,s=function(){var e="select|insert|update|delete|from|where|and|or|group|by|order|limit|offset|having|as|case|when|then|else|end|type|left|right|join|on|outer|desc|asc|union|create|table|primary|key|if|foreign|not|references|default|null|inner|cross|natural|database|drop|grant",t="true|false",n="avg|count|first|last|max|min|sum|ucase|lcase|mid|len|round|rank|now|format|coalesce|ifnull|isnull|nvl",r="int|numeric|decimal|date|varchar|char|bigint|float|double|bit|binary|text|set|timestamp|money|real|number|integer",i=this.createKeywordMapper({"support.function":n,keyword:e,"constant.language":t,"storage.type":r},"identifier",!0);this.$rules={start:[{token:"comment",regex:"--.*$"},{token:"comment",start:"/\\*",end:"\\*/"},{token:"string",regex:'".*?"'},{token:"string",regex:"'.*?'"},{token:"string",regex:"`.*?`"},{token:"constant.numeric",regex:"[+-]?\\d+(?:(?:\\.\\d*)?(?:[eE][+-]?\\d+)?)?\\b"},{token:i,regex:"[a-zA-Z_$][a-zA-Z0-9_$]*\\b"},{token:"keyword.operator",regex:"\\+|\\-|\\/|\\/\\/|%|<@>|@>|<@|&|\\^|~|<|>|<=|=>|==|!=|<>|="},{token:"paren.lparen",regex:"[\\(]"},{token:"paren.rparen",regex:"[\\)]"},{token:"text",regex:"\\s+"}]},this.normalizeRules()};r.inherits(s,i),t.SqlHighlightRules=s}),define("ace/mode/sql",["require","exports","module","ace/lib/oop","ace/mode/text","ace/mode/sql_highlight_rules"],function(e,t,n){"use strict";var r=e("../lib/oop"),i=e("./text").Mode,s=e("./sql_highlight_rules").SqlHighlightRules,o=function(){this.HighlightRules=s,this.$behaviour=this.$defaultBehaviour};r.inherits(o,i),function(){this.lineCommentStart="--",this.$id="ace/mode/sql"}.call(o.prototype),t.Mode=o}); (function() {
window.require(["ace/mode/sql"], function(m) {
if (typeof module == "object" && typeof exports == "object" && module) {
module.exports = m;
}
});
})();

110
datagear-web/src/main/webapp/static/script/ace-21.02.19/mode-sql.js Normal file
View File

@ -0,0 +1,110 @@
define("ace/mode/sql_highlight_rules",["require","exports","module","ace/lib/oop","ace/mode/text_highlight_rules"], function(require, exports, module) {
"use strict";
var oop = require("../lib/oop");
var TextHighlightRules = require("./text_highlight_rules").TextHighlightRules;
var SqlHighlightRules = function() {
var keywords = (
"select|insert|update|delete|from|where|and|or|group|by|order|limit|offset|having|as|case|" +
"when|then|else|end|type|left|right|join|on|outer|desc|asc|union|create|table|primary|key|if|" +
"foreign|not|references|default|null|inner|cross|natural|database|drop|grant"
);
var builtinConstants = (
"true|false"
);
var builtinFunctions = (
"avg|count|first|last|max|min|sum|ucase|lcase|mid|len|round|rank|now|format|" +
"coalesce|ifnull|isnull|nvl"
);
var dataTypes = (
"int|numeric|decimal|date|varchar|char|bigint|float|double|bit|binary|text|set|timestamp|" +
"money|real|number|integer"
);
var keywordMapper = this.createKeywordMapper({
"support.function": builtinFunctions,
"keyword": keywords,
"constant.language": builtinConstants,
"storage.type": dataTypes
}, "identifier", true);
this.$rules = {
"start" : [ {
token : "comment",
regex : "--.*$"
}, {
token : "comment",
start : "/\\*",
end : "\\*/"
}, {
token : "string", // " string
regex : '".*?"'
}, {
token : "string", // ' string
regex : "'.*?'"
}, {
token : "string", // ` string (apache drill)
regex : "`.*?`"
}, {
token : "constant.numeric", // float
regex : "[+-]?\\d+(?:(?:\\.\\d*)?(?:[eE][+-]?\\d+)?)?\\b"
}, {
token : keywordMapper,
regex : "[a-zA-Z_$][a-zA-Z0-9_$]*\\b"
}, {
token : "keyword.operator",
regex : "\\+|\\-|\\/|\\/\\/|%|<@>|@>|<@|&|\\^|~|<|>|<=|=>|==|!=|<>|="
}, {
token : "paren.lparen",
regex : "[\\(]"
}, {
token : "paren.rparen",
regex : "[\\)]"
}, {
token : "text",
regex : "\\s+"
} ]
};
this.normalizeRules();
};
oop.inherits(SqlHighlightRules, TextHighlightRules);
exports.SqlHighlightRules = SqlHighlightRules;
});
define("ace/mode/sql",["require","exports","module","ace/lib/oop","ace/mode/text","ace/mode/sql_highlight_rules"], function(require, exports, module) {
"use strict";
var oop = require("../lib/oop");
var TextMode = require("./text").Mode;
var SqlHighlightRules = require("./sql_highlight_rules").SqlHighlightRules;
var Mode = function() {
this.HighlightRules = SqlHighlightRules;
this.$behaviour = this.$defaultBehaviour;
};
oop.inherits(Mode, TextMode);
(function() {
this.lineCommentStart = "--";
this.$id = "ace/mode/sql";
}).call(Mode.prototype);
exports.Mode = Mode;
}); (function() {
window.require(["ace/mode/sql"], function(m) {
if (typeof module == "object" && typeof exports == "object" && module) {
module.exports = m;
}
});
})();

21
datagear-web/src/main/webapp/static/theme/ace-21.02.19/ace.css Normal file
View File

@ -0,0 +1,21 @@
@CHARSET "UTF-8";
/*编辑器*/
.ace-tm{
background-color: inherit;
color: inherit;
font-size: inherit;
}
/*行号单元格*/
.ace-tm .ace_gutter .ace_gutter-cell{
padding-left: 0.6em;
padding-right: 0.4em;
}
/*关键字*/
.ace-tm .ace_storage, .ace-tm .ace_keyword{
font-weight: bold;
}
/*括弧*/
.ace-tm .ace_paren{
font-weight: bold;
}

1
datagear-web/src/main/webapp/static/theme/ace-21.02.19/readme.txt Normal file
View File

@ -0,0 +1 @@
ace内置的主题是通过引入JS来实现的，不太好实现切换主题功能，因此这里通过自定义css文件来实现

15
datagear-web/src/main/webapp/static/theme/common.css
View File

@ -1212,6 +1212,9 @@ table.dataTable tbody tr .column-check .row-data-state .ui-icon{
right: 0;
top: 1.5em;
bottom: 1.5em;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.page-sqlpad .content .content-editor{
position: relative;
@ -1227,9 +1230,17 @@ table.dataTable tbody tr .column-check .row-data-state .ui-icon{
position: absolute;
left: 0;
top: 0;
bottom: 0.3em;
bottom: 0.45em;
width: 100%;
overflow: auto;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
overflow: hidden;
}
.page-sqlpad .content .content-editor .content-edit-content .sql-editor{
display: inline-block;
width: 100%;
height: 100%;
}
.page-sqlpad .content .content-editor .ui-resizable-s{
bottom: 0px;

40
datagear-web/src/main/webapp/static/theme/dark/ace-21.02.19/ace.css Normal file
View File

@ -0,0 +1,40 @@
@CHARSET "UTF-8";
/*行号区*/
.ace-tm .ace_gutter{
background-color: #222;
color: #7d7d7d;
}
/*当前行*/
.ace-tm .ace_gutter-active-line,
.ace-tm .ace_marker-layer .ace_active-line{
background-color: #111;
}
/*关键字*/
.ace-tm .ace_storage, .ace-tm .ace_keyword{
color: #eacd02;
}
/*字符串*/
.ace-tm .ace_string{
color: #999;
}
/*数字*/
.ace-tm .ace_constant.ace_numeric{
color: #069cd2;
}
/*括弧*/
.ace-tm .ace_paren{
color: #FFB90F;
}
/*鼠标指针*/
.ace-tm .ace_cursor{
border-left: 1px solid #eee;
}
/*选中区域*/
.ace-tm .ace_marker-layer .ace_selection{
background-color: #0080ff;
}
/**选中文本*/
.ace-tm .ace_marker-layer .ace_selected-word{
color: white;
}

1
datagear-web/src/main/webapp/static/theme/dark/ace-21.02.19/readme.txt Normal file
View File

@ -0,0 +1 @@
ace内置的主题是通过引入JS来实现的，不太好实现切换主题功能，因此这里通过自定义css文件来实现

40
datagear-web/src/main/webapp/static/theme/green/ace-21.02.19/ace.css Normal file
View File

@ -0,0 +1,40 @@
@CHARSET "UTF-8";
/*行号区*/
.ace-tm .ace_gutter{
background-color: #2e6c00;
color: #53af0e;
}
/*当前行*/
.ace-tm .ace_gutter-active-line,
.ace-tm .ace_marker-layer .ace_active-line{
background-color: #448f0c;
}
/*关键字*/
.ace-tm .ace_storage, .ace-tm .ace_keyword{
color: #eacd02;
}
/*字符串*/
.ace-tm .ace_string{
color: #999;
}
/*数字*/
.ace-tm .ace_constant.ace_numeric{
color: #069cd2;
}
/*括弧*/
.ace-tm .ace_paren{
color: #FFB90F;
}
/*鼠标指针*/
.ace-tm .ace_cursor{
border-left: 1px solid #333;
}
/*选中区域*/
.ace-tm .ace_marker-layer .ace_selection{
background-color: #0080ff;
}
/**选中文本*/
.ace-tm .ace_marker-layer .ace_selected-word{
color: white;
}

1
datagear-web/src/main/webapp/static/theme/green/ace-21.02.19/readme.txt Normal file
View File

@ -0,0 +1 @@
ace内置的主题是通过引入JS来实现的，不太好实现切换主题功能，因此这里通过自定义css文件来实现

40
datagear-web/src/main/webapp/static/theme/lightness/ace-21.02.19/ace.css Normal file
View File

@ -0,0 +1,40 @@
@CHARSET "UTF-8";
/*行号区*/
.ace-tm .ace_gutter{
background-color: #efefef;
color: #666666;
}
/*当前行*/
.ace-tm .ace_gutter-active-line,
.ace-tm .ace_marker-layer .ace_active-line{
background-color: #ddd;
}
/*关键字*/
.ace-tm .ace_storage, .ace-tm .ace_keyword{
color: #0000f0;
}
/*字符串*/
.ace-tm .ace_string{
color: #999;
}
/*数字*/
.ace-tm .ace_constant.ace_numeric{
color: #f58400;
}
/*括弧*/
.ace-tm .ace_paren{
color: #0000a0;
}
/*鼠标指针*/
.ace-tm .ace_cursor{
border-left: 1px solid #333;
}
/*选中区域*/
.ace-tm .ace_marker-layer .ace_selection{
background-color: #0080ff;
}
/**选中文本*/
.ace-tm .ace_marker-layer .ace_selected-word{
color: white;
}

1
datagear-web/src/main/webapp/static/theme/lightness/ace-21.02.19/readme.txt Normal file
View File

@ -0,0 +1 @@
ace内置的主题是通过引入JS来实现的，不太好实现切换主题功能，因此这里通过自定义css文件来实现