master

分支 (1)

管理

管理

master

BuilderDynmic
/
index.html

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--应用手机-->
<meta name="viewport" content="width=device-width,minimum-scale=1.0, maximum-scale=2.0" />
<!--显示适应手机-->
<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
<link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet"
	type="text/css">
<!-- bootstrap-date -->
<link href="css/bootstrap-datetimepicker.css" rel="stylesheet"
	type="text/css">
<!-- 主样式 -->
<link href="css/queryBuilder.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>

<script type="text/javascript"
	src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<!-- bootstrap-date -->
<script type="text/javascript" src="js/bootstrap-datetimepicker.js"></script>

<!-- bootstrap-typeahead -->
<script type="text/javascript" src="js/Bootstrap-3-Typeahead.js"></script>

<!-- 全局参数文件 -->
<script type="text/javascript" src="js/localPara.js"></script>

<!-- 自定义方法文件 -->
<script type="text/javascript" src="js/queryBuilder.method.js"></script>

<!-- 主方法文件 -->
<script type="text/javascript" src="js/jquery.queryBuilder.js" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
		$("#sql_builder").queryBuilder({
			sourceData : sourceData1,//元数据
			saveJson : saveJson1,//保存的查询结构
			propertiesTypes:propertiesTypes1,//属性-类型-值 对应关系
			submitButton:"submit_btn",
			SQLButton:"SQL_btn",
			SQL_reset:"SQL_reset",
			onPageClicked: function( entity,property,type) { //当属性和key-value连接符发生变化时，触发
//				alert(entity+'.....'+property);
				if(type == "string" ){
					return ["郭鹏飞-$-1001","李四-$-1005","张山-$-1002","王五-$-1003","郭达-$-1003","郭沫若-$-1003","郭叔-$-1003","郭子仪-$-1003"];
				}

				return null;
			},
			onSQLBuild:function(returnVal,type){   //传入SQL结构和SQL语句
				$('#result_sql').html(returnVal);
				$('#myModal').modal();
			}
		});
	});
</script>
</head>
<body>
	<div style="text-align: center;">
		<h2>QueryBuilder-jQuery 动态页面</h2>
	</div>
	<div class="mainDiv" id="sql_builder">
	</div>
		<div class="container-fluid" style="text-align: center;margin-top: 10px">
			<div class="btn-group btn-group-sm" role="group" aria-label="...">
				<button id="submit_btn" type="button" class="btn btn-primary">获取SQL结构</button>
				<button id="SQL_btn" type="button" class="btn btn-primary">解析SQL</button>
				<button id="SQL_reset" type="button" class="btn btn-primary">重置</button>
			</div>
		</div>
	</div>

	<!-- Modal -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title">结果显示</h4>
				</div>
				<div class="modal-body">
					<pre   id="result_sql"></pre>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>

				</div>
			</div>
		</div>
	</div>
</body>
</html>