xwh
/
wms-pda-app
派生自 project/wms-pda-app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
							<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="../js/mui.min.js"></script>
		<script src="https://cdn.wilddog.com/js/client/current/wilddog.js"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
		<style type="text/css">
			.title{
				background-color: rgba(0,0,0,.25);
				font-weight: 400;
			}
			
			#list td{
				padding:5px 5px;
				word-break: break-word;
			}
			
			#list tr:active{
				background-color: rgba(0,0,0,.25);
			}

			
			#popover{
				min-width: 282px;
				height: 300px ;
				top:50% !important;
				margin-top: -150px;
				left: 50% !important;
				margin-left: -141px;
			}
			
			@media (min-width: 400px){
				#popover{
					width: 80%;
					margin-left: -40%;
				}
			}
			
			.mui-popover .mui-popover-arrow{
				display: none !important;
			}
			
			.operate{
				text-align: center;
				margin-top: 20px
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<a class="mui-icon mui-icon-plusempty mui-pull-right" id="open"></a>
			<h1 class="mui-title">cloud DB（云端数据库）</h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded">
				<p style="text-indent: 22px;">这是mui无后端开发示例，集成野狗云服务，通过js操作云端数据库，实现常见的增删改查功能。
				</p>
			</div>
			<div style="background-color: #fff;padding-bottom: 15px;">
				<div class="mui-content-padded" >
					<h4 style="text-align: center;margin-bottom: 15px;padding-top: 15px;">云端数据库</h4>
					<table id="list" border="1" width="100%" style="padding: 0;text-align: center;table-layout: fixed;" >
						
					</table>
				</div>
			</div>
			
		</div>
		
		
		<div id="popover" class="mui-popover">
			<div class="mui-popover-arrow"></div>
			<div class="mui-content-padded">
				<h4 id="title" style="text-align: center;margin-top: 20px;">新增数据</h4>
				<form class="mui-input-group" style="margin-top: 30px;">
					<div class="mui-input-row">
						<label>字段1：</label>
						<input type="text" class="mui-input-clear" id="col1" placeholder="请输入">
					</div>
					<div class="mui-input-row">
						<label>字段2：</label>
						<input type="text" class="mui-input-clear" id="col2" placeholder="请输入">
					</div>
					<div class="mui-input-row">
						<label>字段3：</label>
						<input type="text" class="mui-input-clear" id="col3" placeholder="请输入">
					</div>
				</form>
				<div id="add_div" class="operate mui-hidden">
					<button type="button" class="mui-btn mui-btn-blue" id="add">确定</button>
				</div>
				<div id="edit_div" class="operate mui-hidden">
					<button type="button" class="mui-btn mui-btn-blue" id="update" style="margin-right: 30px;">修改</button>
					<button type="button" class="mui-btn mui-btn-red" id="del">删除</button>
				</div>
			</div>
		</div>
		
		<script type="text/javascript">
		
			function trim(str){ //删除左右两端的空格
		　　     return str.replace(/(^\s*)|(\s*$)/g, "");
		　　 }
		
		
			var network = false;
			var ref = null;
			mui.plusReady(function () {
				if(plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE){
					mui.toast("当前网络不给力，无法连接云端数据库~");
				}else{
					network = true;
					ref = new Wilddog("https://muidemo.wilddogio.com/demo");
					getList();
				}
			});

			var list = document.getElementById("list");
			var col1 = document.getElementById("col1");
			var col2 = document.getElementById("col2");
			var col3 = document.getElementById("col3");
			
			var add_div = document.getElementById("add_div");
			var edit_div = document.getElementById("edit_div");

			var title = document.getElementById("title");

			document.getElementById("open").addEventListener('tap',function () {
				if(!network){
					mui.toast("当前网络不给力，请稍后再试");
				}else{
					//清空数据
					col1.value = "";
					col2.value = "";
					col3.value = "";
					title.innerHTML = "新增数据";
					add_div.classList.remove("mui-hidden");
					if(!edit_div.classList.contains("mui-hidden")){
						edit_div.classList.add("mui-hidden");
					}
					mui("#popover").popover("toggle");
				}
			});
			
			
			document.getElementById("add").addEventListener('tap', function() {
				if(!ref){
					mui.toast("当前网络不给力，请稍后再试");
				}else{
					var check = true;
					mui(".mui-input-group input").each(function () {
						if(!this.value||trim(this.value)==""){
							var label = this.previousElementSibling;
							mui.alert(label.innerText+"不允许为空");
							check = false;
							return false;
						}
					});
					if(check){
						var newRef = ref.push({
							"col1": col1.value,
							"col2": col2.value,
							"col3": col3.value,
						});
						add_div.classList.add("mui-hidden");
						//关闭modal
						mui("#popover").popover("toggle");
						mui.toast("添加成功~");
						//刷新界面
						getList();
					}
				}
				
			});
			document.getElementById("update").addEventListener("tap", function() {
				var check = true;
				mui(".mui-input-group input").each(function () {
					if(!this.value||trim(this.value)==""){
						var label = this.previousElementSibling;
						mui.alert(label.innerText+"不允许为空");
						check = false;
						return false;
					}
				});
				if(check){
					var newRef = ref.child(document.getElementById("col1").getAttribute("demoid"));
					newRef.update({
						"col1": col1.value,
						"col2": col2.value,
						"col3": col3.value,
					});
					//关闭modal
					mui("#popover").popover("toggle");
					edit_div.classList.add("mui-hidden");
					mui.toast("修改成功~");
					//刷新界面
					getList();
				}
			})
			document.getElementById("del").addEventListener("tap", function() {
				var newRef = ref.child(document.getElementById("col1").getAttribute("demoid"));
				newRef.remove();
				//关闭modal
				mui("#popover").popover("toggle");
				if(!edit_div.classList.contains("mui-hidden")){
					edit_div.classList.add("mui-hidden");
				}
				mui.toast("删除成功~");
				//刷新界面
				getList();
			})
			//列表事件绑定，点击编辑数据
			 mui("#list").on("tap", "tr", function() {
			 	var id = this.getAttribute("id");
			 	if(id){
			 		document.getElementById("col1").value = this.querySelector(".col1").innerHTML;
					document.getElementById("col2").value = this.querySelector(".col2").innerHTML;
					document.getElementById("col3").value = this.querySelector(".col3").innerHTML;
					document.getElementById("col1").setAttribute("demoid", id);
					title.innerHTML = "编辑数据";
					if(!add_div.classList.contains("mui-hidden")){
						add_div.classList.add("mui-hidden");
					}
					edit_div.classList.remove("mui-hidden");
					mui("#popover").popover("toggle");
			 	}
				
			})
				/**
				 * 获取最新记录
				 */

			function getList() {
				ref.once("value", function(snapshot) {
					list.innerHTML = "<tr class='title'><td>字段1</td><td>字段2</td><td>字段3</td></tr>";
					var result = snapshot.val();
					mui.each(result, function(key, elem) {
						var li = document.createElement("tr");
						li.setAttribute("id", key);
						var col1 = document.createElement("td");
						col1.className = "col1"
						col1.innerHTML = elem.col1;
						li.appendChild(col1);
						var col2 = document.createElement("td");
						col2.className = "col2"
						col2.innerHTML = elem.col2;
						li.appendChild(col2);
						var col3 = document.createElement("td");
						col3.className = "col3"
						col3.innerHTML = elem.col3;
						li.appendChild(col3);
						list.appendChild(li);
					})
				});
			}
		</script>
	</body>

</html>