<!VDNDOC "PageBase":"nvo_dwedit">
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>DW2JSON</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" href="css/AppStyle.css" />
		<style>
			.mui-control-content {
				padding: 0px;
				padding-top: 55px;
			}
			
			.mui-bar {
				height: 55px;
				top: 0px;
			}
			
			table {
				border-spacing: 1;
				border-collapse: collapse;
				background: white;
				border-radius: 6px;
				overflow: hidden;
				width: 100%;
				margin: 0 auto;
				position: relative;
				background: #9BC86A;
			}
			
			table td,
			table th {
				padding-left: 0px;
			}
			
			table thead tr,
			.cus-header {
				height: 40px;
				background: #FFED86;
				font-size: 16px;
				text-align: center;
			}
			
			.cus-header .mui-table-cell {
				vertical-align: middle;
				font-size: 16px;
				font-weight: bold;
			}
			
			.cus-header-detail .mui-table-cell {
				vertical-align: middle;
				font-size: 14px;
				font-weight: bold;
			}
			
			.mui-collapse-content .mui-table .mui-table-cell {
				border-bottom: 1px solid #E3F1D5;
				font-size: 14px;
				height: 30px;
				vertical-align: middle;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis
			}
			
			table tbody tr {
				height: 40px;
				border-bottom: 1px solid #E3F1D5;
				background: white;
			}
			
			table tbody tr:last-child {
				border: 0;
			}
			
			table tbody tr td input {
				color: 0;
				margin-bottom: 0px !important;
			}
			
			table tbody .selected,
			table tbody .selected input {
				background: lightsalmon;
				color: white;
			}
			
			table tbody .filter,
			table tbody .filter input {
				background: green;
				color: white;
			}
			
			body {
				font: 400 16px 'Calibri', 'Arial';
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div class="mui-button-row btn-padding  mui-text-left">
				<button type="button" id='b_query' class="mui-btn mui-btn-primary">检索</button>
				<button type="button" id='b_new' class="mui-btn mui-btn-green">新增</button>
				<button type="button" id='b_del' data-loading-text="删除中" class="mui-btn mui-btn-red">删除</button>
				<button type="button" id='b_save' data-loading-text="提交中" class="mui-btn mui-btn-primary">保存(SQL)</button>
				<button type="button" id='b_save2' data-loading-text="提交中" class="mui-btn mui-btn-yellow">保存(DS)</button>
			</div>
			<div class="mui-input-row">
				<label>前台搜索</label>
				<input id="search"  placeholder="请输入搜索信息"/>
			</div>
			<div>
				<span><label>后台合计:</label><label id="pb_sum">0</label></span>
				<span><label>前台合计:</label><label id="js_sum">0</label></span>
			</div>
			<table>
				<thead>
					<tr>
						<th class="mui-col-xs-6 mui-col-sm-6">服务门店</th>
						<th class="mui-col-xs-4 mui-col-sm-4">客户</th>
						<th class="mui-col-xs-2 mui-col-sm-2">数量</th>
					</tr>
				</thead>
				<tbody id="t_content">

				</tbody>
			</table>

			<!--------------------嵌入式模板------------------------->
			<!--表格编辑-->
			<script id="item_data" type="text/x-jquery-tmpl">
				<tr rowid="${c_id}" status="NotModified">
					<td class="mui-col-xs-6  mui-col-sm-6">${c_store}</td>
					<td class="mui-col-xs-4  mui-col-sm-4"><input type='text' col='c_user' value='${c_user}' /></td>
					<td class="mui-col-xs-2  mui-col-sm-2"><input type='number' col='n_num' value='${n_num}' class="cus-num" /></td>
				</tr>
			</script>
			<script src="js/mui.min.js"></script>
			<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
			<script type="text/javascript" src="js/jquery.tmpl.js"></script>
			<script type="text/javascript" src="js/vdn.js"></script>
			<script>
				mui.init({
					swipeBack: true //启用右滑关闭功能
				});
				//vdn.disableBack();
				//初始化
				mui.ready(function() {

				});
				/* 表格编辑 动态加载数据 */
				$(document).on("tap", "#b_query", function() {
					mui("#b_query").button('loading');
					$("#t_content").empty();
					//获取明细数据
					vdn.get({
							method: 'nvo_dwedit.getdata_json'
						}, function(data) {
							//此处使用嵌入式模板
							vdn.appendTo("t_content", $("#item_data"), data.Result.data);
							//后台传来的合计
							$("#pb_sum").text(data.Result.sum);
							//前台动态合计
							f_sum();
						},
						function(err) {
							alert(err.Message + "(" + err.Code.toString() + ")");
						});
					mui("#b_query").button('reset');
				});
				//new
				$(document).on('tap', '#b_new', function() {
					var data_new = {
						"c_id": "",
						"c_store": "模拟门店",
						"c_user": "初始值"
					};
					vdn.prependTo("t_content", $("#item_data"), data_new);
					$("#t_content tr").first().attr("status","New");//行状态
				});
				//选中文本
				$(t_content).on("focus", "input", function() {
					this.select();
				});
				//修改状态 本页只用了DataModified和NotModified两种状态，新增通过c_id为空判断，具体可以灵活运用
				$("#t_content").on("input", "input", function() {
					if($(this).parents("tr").attr("status") == "NotModified") {
						$(this).parents("tr").attr("status", "DataModified")
					} else if($(this).parents("tr").attr("status") == "New") {
						$(this).parents("tr").attr("status", "NewModified")
					}
				});
				//前台修改关联合计
				$("#t_content").on("change", ".cus-num", function() {
					f_sum();
				});

				//获取要保存的数据集合
				function GetUpdateData() {
					//过滤被改动的数据
					var rows = $("#t_content tr[status='DataModified'],[status='NewModified']")
					var datas = [];
					//组织JSON
					$.each(rows, function(index, row) {
						var values = {};
						//id
						values["c_id"] = $(row).attr("rowid");
						//门店
						values["c_store"] = $(row).children("td").text();
						//输入的数据
						var inputs = $(row).find("input");
						$.each(inputs, function(index, item) {
							values[$(item).attr("col")] = item.value;
						});
						datas.push(values);
					});
					if(datas.length > 0) {
						return JSON.stringify(datas);
					} else {
						return "";
					}
				}
				//Save 后台通过SQL保存
				$(document).on('tap', '#b_save', function() {
					datas = GetUpdateData();
					if(datas.length == 0) {
						mui.toast("没有需要保存的数据");
						return;
					}
					mui("#b_post").button('loading');
					console.log(datas);
					//提交
					vdn.post({
							method: 'nvo_dwedit.f_save',
							params: [datas]
						}, function(data) {
							mui.toast(data.Result);
							mui("#b_post").button('reset');
							//重新加载数据
							$("#b_query").trigger("tap");
						},
						function(err) {
							alert(err.Message + "(" + err.Code.toString() + ")");
							mui("#b_post").button('reset');
						});
				});
				//Save 后台通过DataStore保存
				$(document).on('tap', '#b_save2', function() {
					datas = GetUpdateData();
					if(datas.length == 0) {
						mui.toast("没有需要保存的数据");
						return;
					}
					mui("#b_post").button('loading');
					//提交
					vdn.post({
							method: 'nvo_dwedit.f_save2',
							params: [datas]
						}, function(data) {
							mui.toast(data.Result);
							mui("#b_post").button('reset');
							//重新加载数据
							$("#b_query").trigger("tap");
						},
						function(err) {
							alert(err.Message + "(" + err.Code.toString() + ")");
							mui("#b_post").button('reset');
						});
				});
				//Del
				mui(document).on('tap', '#b_del', function() {
					//集合ID
					var count = 0;
					var list = [];
					$.each($("#t_content .selected"), function(index, item) {
						list.push($(item).attr("rowid"));
						count++;
					})
					if(count == 0 || !confirm("确定删除选中的" + count.toString() + "条记录？")) return;
					//发送给后台删除
					mui("#b_del").button('loading');
					vdn.post({
							method: 'nvo_dwedit.f_del',
							params: [JSON.stringify(list)]
						}, function(data) {
							mui.toast(data.Result);
							$("#t_content .selected").remove();
							mui("#b_del").button('reset');
						},
						function(err) {
							alert(err.Message + "(" + err.Code.toString() + ")");
							mui("#b_del").button('reset');
						});
				});

				//表单多选
				$("#t_content").on("tap", "tr", function() {
					//这一句的作用点击输入框不选中
					if(event.target.tagName != "TD") {
						return;
					};
					if($(this).hasClass("selected")) {
						//已经选择则取消
						$(this).removeClass("selected");
					} else {
						//选择
						$(this).addClass("selected");
					}
				});

				//前台合计
				function f_sum() {
					var n_sum = 0;
					$("#t_content").find(".cus-num").each(function(index, item) {
						n_sum += parseInt($(item).val());
					});
					$("#js_sum").text(n_sum);
				}
				
				//前台搜索
				$(document).on('input', '#search', function() {
					$(".filter").removeClass("filter");
					var sVal=$(this).val();
					if (sVal.length==0)
					{
						return;
					}
					var rows=$("#t_content").find("td:contains('"+sVal+"'),input[value*='"+sVal+"']").parents("tr");
					rows.addClass("filter");
				});
			</script>

	</body>

</html>