yf_zd
/
commonApp


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
							<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/common.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/mescroll.min.css">
		<style type="text/css">
			.faxSearchBox{
				padding: 6px 8px;
				position: relative;
				margin: 0px 0 8px;
			}
			.faxSearchBox .searchBtnBox{
				top: 6px;
			}
			ul,li{
				list-style: none;
			}
			#userList li{
				line-height: 35px;
			}
			.mescroll {
				position: fixed;
				top:52px;
				bottom: 0;
				height: auto;
				/*如设置bottom:50px,则需height:auto才能生效*/
			}
			.usergroupTxt{
				overflow: hidden;
				text-overflow: ellipsis;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div class="faxSearchBox">
				<div class="mui-input-row mui-search">
					<input type="search" id="searchInp" placeholder="请输入角色名称">
				</div>
				<div class="searchBtnBox">
					<span class="cutline">&nbsp;</span>
					<button id="searchBtn">搜索</button>
				</div>
			</div>
			<div id="scrollPlace" class="mescroll"> <!--id可以改,而"mescroll"的class不能删-->
				<div class="userlistbox">
			   		<div id="userList" class="mui-row" >
						<!--<div class="mui-col-xs-6">
							<div class="userinfo mui-active">
								<img src="../images/superuser.png" alt="" />
								<div>ykm</div>
								<div class="email">12312@qq.com</div>
							</div>
						</div>-->
			   		</div>
				</div>
			</div>
		</div>
		<script src="../js/jquery-2.1.0.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/mescroll.min.js" charset="utf-8"></script>
		<!-- <script src="../js/mui.previewimage.js"></script> -->
		<script src="../js/common.js"></script>
		<script type="text/javascript">
			var startPage = 1;
			var totalPage = 0;
			mui.init();
			var mescroll = new MeScroll("scrollPlace", {
				up: {
					callback: getListData, //上拉回调,此处可简写; 相当于 callback: function (page) { getListData(page); }
					isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
					clearEmptyId: "userList", //1.下拉刷新时会自动先清空此列表,再加入数据; 2.无任何数据时会在此列表自动提示空
					toTop:{ //配置回到顶部按钮
						src : "../images/totop.png", //默认滚动到1000px显示,可配置offset修改
						offset : 700
					},
					empty: {
						//列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
						warpId:	"userList", //父布局的id (1.3.5版本支持传入dom元素)
						icon: "../images/listNull.png", //图标,默认null,支持网络图
						tip: "暂无相关数据~" //提示
					},
					htmlNodata: '<p class="upwarp-nodata">-- 没有更多内容了 --</p>',
					noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
					lazyLoad: {
			        	use: true // 是否开启懒加载,默认false
			        }
				}
			});
			/*联网加载列表数据  page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
			function getListData(page){
				//联网加载数据
				getListDataFromNet(page.num, page.size, function(curPageData,totalSize){
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
					//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
					mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
					//设置列表数据,因为配置了emptyClearId,第一页会清空dataList的数据,所以setListData应该写在最后;
					setListData(curPageData);
				}, function(){
					//联网失败的回调,隐藏下拉刷新和上拉加载的状态;
					mescroll.endErr();
					mui.toast('数据请求失败');
				});
			}
			/*设置列表数据*/
			function setListData(curPageData){
				console.log(JSON.stringify(curPageData))
				var html = '';
				var dat = curPageData;
				for(var i = 0; i < dat.length; i++) {
					html += '<li class="mui-table-view-cell" data-name="' + dat[i].group_name + '">'+
							'<a class="mui-navigate-right"><div class="usergroupTxt">用户组名称：' + dat[i].group_name + '</div>'+
							'</a></li>';
				}
				$('#userList').append(html);
			}
			/*联网加载列表数据*/
			function getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {
					$.ajax({
						type: 'POST',
						url: 'http://120.27.222.26/app_user_group',
						timeout : 10000, //超时时间设置，单位毫秒
						data:{
							'page': pageNum,
							'fName': mui('#searchInp')[0].value,
						},
						dataType: 'json',
						success: function(data){
							successCallback(data.dat,data.nums);
						},
						error: function(){
							errorCallback();
						}
					});
			}

			mui.plusReady(function() {
				window.addEventListener('refresh', function(e) {
				//在父页面中添加监听事件，刷新页面
				    location.reload();  
				});
				//进入详情页面
				mui('.mui-row').on('tap', 'li', function() {
					var name = this.getAttribute('data-name');
					console.log(name)
					mui.openWindow({
						url: 'systemmanage_usergroup_detial.html',
						id: 'systemmanage_usergroup_detial',
						extras: {
							name: name
						}
					})
				})
			})


			//搜索操作
			document.getElementById('searchBtn').addEventListener('tap', function() {
				if(mui('#searchInp')[0].value) {
					startPage = 1;
					pullupRefresh(1);
				} else {
					mui.toast("请输入设备IMEI");
				}
			})

		</script>
	</body>

</html>