潘钊 / bsth_control · Files

<!-- 新增站点选择系统引用 -->
<div class="modal fade" id="station_tableDate_mobal" tabindex="-1" role="basic" aria-hidden="true">
	
	<div class="modal-dialog" style="width:800px;">
		
		<div class="modal-content">
		
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
				<h4 class="modal-title">系统引用</h4>
			</div>
			
			<div class="modal-body">
				<div class="portlet-body">
					<div class="table-container" style="margin-top: 10px">
						<table class="table table-striped table-bordered table-hover table-checkable" id="station_select_tabledate">
							<thead>
								<tr role="row" class="heading">
									<th width="3%">#</th>
									<th width="15%">站点名称</th>
									<th width="17%">站点编码</th>
									<th width="12%">经纬度</th>
									<th width="12%">图形类型</th>
									<th width="30%">操作</th>
								</tr>
								<tr role="row" class="filter">
									<td></td>
									<td>
										<input type="text"  class="form-control form-filter input-sm" id="stationName_eq" name="stationName_eq">
									</td>
									<td>
										<input type="text"  class="form-control form-filter input-sm" id="stationCod_like" name="stationCod_like">
									</td>
									 
									<td>
									</td>
									 <td>
									</td>
									<td>
										<button class="btn btn-sm green btn-outline filter-submit margin-bottom" >
											<i class="fa fa-search"></i> 搜索
										</button>
	                                                                
										<button class="btn btn-sm red btn-outline filter-cancel">
											<i class="fa fa-times"></i> 重置
										</button>
									</td>
								</tr>
							</thead>
							<tbody></tbody>
						</table>
						<div style="text-align: right;">
							<ul id="pagination" class="pagination"></ul>
						</div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn default" data-dismiss="modal">取消</button>
				<button type="button" class="btn btn-primary" id="stationTabledatenextButton">确定</button>
			</div>
		</div>
	</div>
</div>
<script type="text/html" id="station_tabledate_temp">
	{{each list as obj i }}
		<tr>
			<td style="vertical-align: middle;">
				<input type="checkbox" class="group-checkable icheck" data-id="{{obj.id}}" data-stationName="{{obj.stationName}}" data-stationCod="{{obj.stationCod}}">
			</td>
			<td>
				{{obj.stationName}}
			</td>
			<td>
				{{obj.stationCod}}
			</td>
			<td>
				{{obj.bJwpoints}}
			</td>
			<td>
				{{obj.shapesType}}
			</td>
			<td>
			</td>
		 </tr>
	{{/each}}
	{{if list.length == 0}}
		<tr>
			<td colspan=8><h6 class="muted">没有找到相关数据</h6></td>
		</tr>
	{{/if}}
</script>
<script type="text/javascript">

$(function(){
	
	// 延迟加载
	setTimeout(function(){
		
		$('#station_tableDate_mobal').modal({
		
		show : true,
		
		width : 'auto',
		
		backdrop: 'static', 
		
		keyboard: false
		
		
		});
		
	},200);
	
	
	// 选择确定事件
	$('#stationTabledatenextButton').on('click',function() {
		
		// 获取选中行元素
    	var arrChk = $("input[type='checkbox']:checked");
		
		if(arrChk.length==0) {
			
			// 弹出框 （0：感叹号；1：对号；2：错号；3：问号；4：锁；5：苦脸；6：笑脸）
    		layer.confirm('【请选择一行...】', {btn : [ '确定' ],icon: 0, title:'温馨提示'}, function(index) {
    			
    			// 关闭提示框
    			layer.close(index);
    			
    		});
			
		}else if(arrChk.length>1){
			
			// 弹出框 （0：感叹号；1：对号；2：错号；3：问号；4：锁；5：苦脸；6：笑脸）
    		layer.confirm('【请只选择一行...】', {btn : [ '确定' ],icon: 0, title:'温馨提示'}, function(index) {
    			
    			// 关闭提示框
    			layer.close(index);
    			
    		});
			
		}else {
			
			var stationId = arrChk.data('id');
			
			$post('/stationroute/systemQuote',{lineId:id,stationId:stationId},function() {
				
				
			});
			console.log();
			
		}
		
	});
	
	var stationNamebootbox = $('#stationNamebootbox').val();
	
	$('#stationName_eq').val(stationNamebootbox);
	
	/**
	 * -----page : 当前页
	 * 
	 * -----initPag :
	 * 
	 */
	var page = 0,initPag;
	
	// 选择框
	var icheckOptions = {
		    checkboxClass: 'icheckbox_flat-blue',
		    increaseArea: '20%'
		};
	
	// 表格数据分页加载
	loadTableDate({stationName_eq:stationNamebootbox},true);
	
	/**
	 * 重置按钮事件 
	 * 
	 */
	$('tr.filter .filter-cancel').on('click',function(){
		 // 清空搜索框值
		 $('tr.filter input,select').val('').change();
		 // 重新加载表格数据
		 loadTableDate(null,true);
	});
	
	/**
	 * 搜索按钮事件
	 * 
	 */
	$('tr.filter .filter-submit').on('click',function(){
		// cells 集合返回表格中所有（列）单元格的一个数组
		var cells = $('tr.filter')[0].cells;
		// 搜索参数集合
		var params = {};
		// 搜索字段名称
		var name;
		// 遍历cells数组
		$.each(cells, function(i, cell){
			// 获取第i列的input或者select集合
			var items = $('input,select', cell);
			// 遍历items集合
			for(var j = 0, item; item = items[j++];){
				// 获取字段名称
				name = $(item).attr('name');
				if(name){
					// 赋取相对应的值
					params[name] = $(item).val();
				}
			}
		});
		page = 0;
		
		loadTableDate(params,true);
	});
	
	/**
	 * 表格数据分页加载事件
	 * 
	 * ------@param : 查询参数
	 * 
	 * ------@isPon : 是否重新分页
	 * 
	 */
	function loadTableDate(param,isPon){
		// 搜索参数
		var params = {};
		if(param)
			params = param;
		// 排序（按更新时间）
		params['order'] = 'id';
		// 记录当前页数
		params['page'] = page;
		// 弹出正在加载层
		var i = layer.load(2);
		// 异步请求获取表格数据
		$.get('/station',params,function(result){
			console.log(result);
			// 把数据填充到模版中
			var tbodyHtml = template('station_tabledate_temp',{list:result.content});
			// 把渲染好的模版html文本追加到表格中
			$('#station_select_tabledate tbody').html(tbodyHtml);
			// 制定复选框
			$('#station_select_tabledate tbody').find('.icheck').iCheck(icheckOptions);
			// 复选框改变事件
			$('#station_select_tabledate tbody').find('.icheck').on('ifChanged', iCheckChange);
			// 是重新分页且返回数据长度大于0
			if(isPon && result.content.length > 0){
				// 重新分页
				initPag = true;
				// 分页栏
				showPagination(result);
			}
			// 关闭弹出加载层
			layer.close(i);
		});
	}
	
	/**
	 * 复选框组件
	 * 
	 */
	function iCheckChange(){
		// 获取当前的父节点tr
		var tr = $(this).parents('tr');
		
		// 判断当前是否选中
		if(this.checked)
			// 选中，则增添父节点tr的样式
			tr.addClass('row-active');
		else
			// 未选中，则删除父节点tr的样式
			tr.removeClass('row-active');
	}
	
	/**
	 * 分页栏组件
	 * 
	 */
	function showPagination(data){
		// 分页组件
		$('#pagination').jqPaginator({
			// 总页数
		    totalPages: data.totalPages,
		    // 中间显示页数
		    visiblePages: 6,
		    // 当前页
		    currentPage: page + 1,
		    first: '<li class="first"><a href="javascript:void(0);">首页<\/a><\/li>',
            prev:  '<li class="prev"><a href="javascript:void(0);">上一页<\/a><\/li>',
            next:  '<li class="next"><a href="javascript:void(0);">下一页<\/a><\/li>',
            last:  '<li class="last"><a href="javascript:void(0);">尾页<\/a><\/li>',
            page:  '<li class="page"><a href="javascript:void(0);">{{page}}<\/a><\/li>',
		    onPageChange: function (num, type) {
		    	if(initPag){
		    		initPag = false;
		    		return;
		    	}	
		    	page = num - 1;
		    	loadTableDate(null, false);
		    }
		});
	}
	
});
</script>