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">
	var total = 0;
	$(function(){
		$('#fangwenliang').html(++total)
		$("#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>

<br/>
<div id="container" class="container bs-docs-container main_content">

	<div class="row">
		<div class="col-md-12" role="main">

			<a href="https://gitee.com/noworld/BuilderDynmic" >源码下载地址</a>
&nbsp;&nbsp;&nbsp;<a href="https://www.blog-china.cn" >博客访问</a> &nbsp;&nbsp;&nbsp;开发者：&nbsp;<span >郭鹏飞</span>&nbsp;&nbsp;&nbsp;微信:<span>zhongguoyantai</span>
<br/>
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1274107452'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s19.cnzz.com/z_stat.php%3Fid%3D1274107452%26online%3D1%26show%3Dline' type='text/javascript'%3E%3C/script%3E"));</script>
		</div>

	</div>
<br/>
	<div class="row">
				<div  class="col-md-12" role="main">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-7349154757944215"
     data-ad-slot="8066205510"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
		</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>