268 lines
7.8 KiB
HTML
268 lines
7.8 KiB
HTML
<!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> |