jsonConfig.jsp 7.95 KB

Raw Blame History Permalink

<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@ include file="/mobilemode/admin/init.jsp"%>

<%
	String topMenu = Util.null2String(request.getParameter("topMenu"));
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>模拟数据</title>
<link rel="stylesheet" type="text/css" href="./scriptlib/scriptLib.css" />
<style type="text/css">
.wrapper .main {
	margin-left:0px;
}
.r0 > label {
    line-height: 30px;
    font-size: 14px;
}
.main .fn-config{
	padding: 10px 15px;
}
</style>
</head>
<body class="lang<%=user.getLanguage()%>">
	<div class="wrapper">
		<div class='main active'>
			<div class="fn-config">
				<div class="temp-container">
					<h4><span id="fn-title"></span>&nbsp;<%=SystemEnv.getHtmlLabelName(500338, user.getLanguage())%></h4> <!--示例说明 -->
					<form class="r0">
					    <label>
					    <% if(user.getLanguage() == 7){ %>
					    	使用模拟数据快速配置列表进行展示，模拟数据为json数组格式，可参照示例json配置。</br>在列表展示中通过<b>{字段名}</b>获取字段值。</br>例如在列表中显示示例json中的name，配置为<b>{name}</b>
					    <% }else if(user.getLanguage() == 8){ %>
					    	Quick Configuration using mock data for list display, the analog data is json array format, can be arranged with reference to exemplary json. </Br> Obtain the value by <b> {field name} </b> in the list display. </Br> For example json display example of the list name configured to <b> {name} </b>
					    <% }else if(user.getLanguage() == 9){ %>
					    	使用模擬數據快速配置列表進行展示，模擬數據為json數組格式，可參照示例json配置。</br>在列表展示中通過<b>{字段名}</b>獲取字段值。</br>例如在列表中顯示示例json中的name，配置為<b>{name}</b>
					    <% } %>
					    </label>
					</form>
				</div>
				<div class="fn-example">
					<h4><%=SystemEnv.getHtmlLabelName(82159, user.getLanguage())%></h4> <!-- 示例 -->
					<div id="example">
						<div class="wrapper">
							<pre>

[
  { "id": "1", "name": "杨文元", "age": "43", "birthday": "1976-02-20"},
  { "id": "2", "name": "刘长庚", "age": "45", "birthday": "1978-03-26"},
  { "id": "3", "name": "付蕾", "age": "34", "birthday": "1985-08-09"}
]
							</pre>
						</div>
					</div>
				</div>
				<div class="config-shrink"></div>
			</div>
			<div class="scriptCode">
				<div id="scriptCode" name="scriptCode"></div>
			</div>
		</div>
	</div>

	<script type="text/javascript">
		// 传参 作为全局变量使用
		var isTopMenu = "<%=topMenu%>" === "true";
		var mec = top.require('mec');
		(function(){
			// 模板管理
			var template = {
				defConfig: {// 存放元素.fn-config的高度和padding高度
					height: 0,
					padHeight: 0
				},
				calcHeight: function() { // 重新计算fn-config, scriptCode的高度
					var $form = $(".temp-container").find("form"),
						$pre = $("#example").find("pre"),
						maxHeight =  Math.max($pre.outerHeight(), $form.outerHeight() );
						confHeight = maxHeight + template.defConfig.height;
					$(".fn-config").height(confHeight);
					$(".scriptCode").css("padding-top", confHeight + template.defConfig.padHeight);
					// 重置编辑器的高度
					setTimeout(function() {
						editor.resize();
					}, 300); // 动画时间
				}
			};

			// 初始化编辑器
			var defer = top.$ && top.$.Deferred();
			require(['htmlEditor'], function(htmlEditor) {
				var scriptCode = document.querySelector('#scriptCode');
				var val = top.mockJsonData;
				window.editor = htmlEditor.editor('scriptCode', 'json');

				//自动换行,设置为off关闭
				editor.setOption("wrap", "free")
				editor.setValue(val, true);
				scriptCode.style.visibility = "visible";
				defer && defer.resolve(window.editor);
			});

			window.getEditor = function(cb) {
				defer && defer.then(function(editor) {
					cb && cb(editor, window);
				});
			};

			// 初始化快捷键
			var appdesigner = top.appdesigner;
			var canInitMenu = appdesigner && isTopMenu;

			require(["shortcut"], function(shortcut) {
				var handler = onOK;

				if(canInitMenu) {
					handler = appdesigner.save;
				}

				shortcut.init({
					container: document,
					shortcuts: {
						"ctrl+s": {
							preventDefault: true,
							handler: handler
						}
					}
				});
			})

			// 初始化右键菜单
			require(['contextMenu'], function (contextMenu) {
				if (canInitMenu) {
					appdesigner.rightMenu(document.body, contextMenu, true);
					$("body").on("mousedown.contextmenu", function () {
						var doc = top.document;
						var $contextmenu = $(doc).find(".context-menu");

						if (!$contextmenu.length) return;

						$contextmenu[0].contextmenu.toggle(false);
					});
				}

				contextMenu.init({
					items: [{
						icon: "icon-save",
						name: SystemEnv.getHtmlNoteName(3515), // 保存
						shortcut: "Ctrl+S",
						handler: onOK
					}, {
						icon: "icon-cancel",
						name: SystemEnv.getHtmlNoteName(3787), // 关闭
						handler: onCancel
					}, {}, {
						icon: "icon-sourceUrl",
						name: SystemEnv.getHtmlNoteName(4695), // 页面地址
						handler: function () {
							window.prompt(SystemEnv.getHtmlNoteName(4695), location.href);
						}
					}]
				});
			});

			// 供外部调用 重新刷新当前菜单
			window.renderRightMenu = function() {
				if(canInitMenu) {
					require(['contextMenu'], function (contextMenu) {
						appdesigner.rightMenu(document.body, contextMenu, true);
					});
				}
			}

			require(['components/common'], function(common) {
				var $funcs = $(".funcs"),
					funcs = [],
					store = common.store;

				Common = common; // 供外部调用

				//初始化config默认高度值
				var $fnConfig = $(".fn-config");
				template.defConfig = {
					height: 38,
					padHeight: $fnConfig.outerHeight() - $fnConfig.height()
				};
				// 为fn-config绑定calcHeight，可供外部或模板内调用
				$fnConfig.on("calcHeight", template.calcHeight);

				// 初始化配置示例
				var val = top.mockJsonData || "";
				$(".config-shrink").addClass("config-down");

				// 计算高度
				setTimeout(function() {
					template.calcHeight();
				}, 100);

				// 收缩函数列表
				$(".arrow").on("click", function() {
					$(".wrapper").toggleClass("toggle");
					$(this).toggleClass("right");
					setTimeout(function() { // 动画
						window.editor && window.editor.resize();
					}, 250);
				});
				// 收缩函数配置和函数示例
				$(".config-shrink").on("click", function() {
					var $this = $(this),
						$config = $(".fn-config"),
						height = $config.outerHeight();
					if($this.hasClass('config-down')){
						$this.removeClass('config-down');
						template.calcHeight();
						$config.css('margin-top','-'+height+'px');
						$(".scriptCode").css("padding-top", '10px');
					}else{
						$this.addClass('config-down');
						$config.css('margin-top','0px');
						template.calcHeight();
					}
				});

				// 模板内公共操作的回调
				var operations = {
					add: function(tmplId){
						var $opEl = $(this),
							$parent = $opEl.parent(),
							temp = $("#"+tmplId).html();

						 $(temp).insertAfter($parent);
					},
					addParams: function() {
						operations.add.call(this, "fn-params");
					},
					delParams: function() {
						$(this).parent().remove();
					},
					addMenus: function(){
						operations.add.call(this, "menu-params");
					}
				};

				// 为模板绑定公共的操作事件
				$(".main").on("click.operation", "[data-operation]", function() {
					var operation = $(this).data("operation"),
						cb = operations[operation];

					cb && cb.call(this);
					template.calcHeight();
				});
			});
		})();

		function getScriptCode(){
			return editor.getValue();
		}

		function onOK(){
			if(top && top.callTopDlgHookFn){
				var result = {
					"scriptCode" : getScriptCode()
				};
				top.callTopDlgHookFn(result);
			}
			onCancel();
		}

		function onCancel(){
			top.closeTopDialog();
		}
	</script>
</body>
</html>