3.8K Star 14.5K Fork 5K

卓源软件 / JeeSite 4.4 and 5.0

 / 详情

窗口最大化最小化时列表数据增加空行

Backlog
Opened this issue  
2022-04-20 08:51

是什么问题、该问题是怎么引起的?

表格列表页面动态加载列和数据
1.

重现步骤、期望结果、截图、代码

输入图片说明
输入图片说明
1.

这里贴你的代码块
```<% layout('/layouts/default.html', {title: '自媒体管理', libs: ['layout','zTree','dataGrid']}){ %>
<style>
	.lehand_title{
		line-height: 45px;
		text-align: center;
		font-size: 16px;
		color: #000000;
		margin-top: -10px;
		border-bottom: 1px solid #cccccc;
	}
	.lehand_title_ul{
		width: 100%;
		text-align: center;
	}
	.lehand_title_ul a{
		display: block;
		margin:0px;
		list-style: none;
		font-size: 14px;
		line-height: 35px;
		color: #000000;
		cursor: pointer;
	}
	.lehand_title_ul a:hover{
		color: #3c8dbc;
	}

	.lehand_title a{
		color: #000000;
		cursor: pointer;
	}
	.lehand_title a:hover{
		color: #3c8dbc;
	}
	.activeTi{
		color: #3c8dbc !important;
	}
	.layui-layer-molv .layui-layer-btn .layui-layer-btn1 {
		background: #009f95;
	.data_sm {
		/*position: absolute;*/
		/*font-size: 15px;*/
		/*top: 0;*/
		/*right: 30px;*/
		float: left;
	}
</style>
<div class="ui-layout-west">
	<div class="main-content">
		<div class="box box-main">
				<div class="box-title dropdown input-inline">
					<div class="dropdown-toggle" data-toggle="dropdown">
						<span id="groupTitle" style="margin-left: 15px;font-size: 20px">报表列表</span>
						<button type="button" class="btn btn-box-tool addTabPage" id="btnFolder" data-href="${ctx}/appFunction/index" title="${text('表单管理')}"><i class="fa fa-edit"></i></button>
						<div class="lehand_title_ul">
						</div>
					</div>
				</div>
		</div>
	</div>
</div>
<div class="ui-layout-center" id="Menus">
	<div class="main-content">
		<div class="box box-main">
			<div class="box-header">
				<div class="box-title addTitle">
				</div>
				<div class="box-tools pull-right">
					<a href="#" class="btn btn-default" id="btnSearch" title="${text('查询')}"><i class="fa fa-filter"></i> ${text('查询')}</a>
					<a onclick="addBtn()" id="addData" class="btn btn-default btnTool" title="${text('新增公众号统计表')}"><i class="fa fa-plus"></i> ${text('新增')}</a>
					<a onclick="exportExcel()" class="btn btn-default" title="${text('导出报表')}"><i class="glyphicon glyphicon-import"></i> ${text('导出')}</a>
					<a onclick="btnImport()" class="btn btn-default" title="${text('导入报表')}"><i class="glyphicon glyphicon-export"></i> ${text('导入')}</a>
				</div>
			</div>
			<div class="box-body">
				<#form:form id="searchForm" action="${ctx}/appFunction/getListData" method="post" class="form-inline hide"
				data-page-no="${parameter.pageNo}" data-page-size="${parameter.pageSize}" data-order-by="${parameter.orderBy}">
				<#form:hidden id="id" path = "id" value = "${initFormId}"/>
				<#form:hidden path = "searchTitle"/>
				<div class="bang-lione bang-lione-time arrowNole" style="">
				<div class="form-group" style="margin-bottom: 0px;">
					<p class="pingtai" style="line-height: 32px;float:left">搜索列:</p>
					<div class="header-search" style="display: block;width: 240px;float:left">
						<div class="today" style="width:224px;float: left;">
							<select id = 'selectTitle' style="width: 224px;height: 32px;border: 1px solid #caced6;border-radius: 4px;">
							</select>
						</div>
					</div>
				</div>
				<div class="form-group" style="margin-bottom: 0px;">
					<p class="pingtai" style="line-height: 32px;float:left">搜索内容:</p>
					<div class="header-search" style="display: block;width: 240px;float:left">
						<#form:input path="searchContent" maxlength="100" class="form-control"
						style="width:224px;padding-left: 9px;" placeholder="请输入内容" />
						<span class="ant-input-prefix"></span>
					</div>
				</div>
				<div class="form-group">
					<button onclick="btn()" type="button" class="btn btn-primary btn-sm">${text('查询')}</button>
					<button type="reset" class="btn btn-default btn-sm">${text('重置')}</button>
				</div>
				</div>
			</#form:form>
			<table id="dataGrid"></table>
			<div id="dataGridPage"></div>
		</div>
	</div>
</div>
</div>
<% } %>
<script>
	function btn() {
		var selectTitle = $("#selectTitle").val();
		$("#searchTitle").val(selectTitle)
        if($("#searchContent").val()){
            if(selectTitle == " "){
                js.showMessage("请选择要搜索列", "提示:", "error");
                return false;
            }
        }
		$("#searchForm").submit();
	}
	// 初始化布局
	$('body').layout({
		west__initClosed: $(window).width() <= 767, // 是否默认关闭
		west__size: 200
	});

	var list = ${toJson(AppFunctionList)};
	var formId = "${initFormId}";
	var formName =  list[0].appname;
	var a = '<i class="fa icon-notebook"></i>'+formName;
	$(".addTitle").append(a)
	var addUrl = list[0].appurl;
	if(list){
		// 主页框架
		$(function () {
			var a='';
			$.each(list,function (dex,value) {
				a = a + '<a class = "iteam" id = \'' + value.id + '\' onclick="jump2(\'' + value.id + '\',\'' + value.appurl + '\',\'' + value.appname + '\')">' + value.appname + '</a>'
			})
			$(".lehand_title_ul").append(a)
			$("#"+list[0].id).css("color","#3c8dbc");
			//初始化列表
			loadTitle(formId);
		});
	}
	//点击切换报表
	function jump2(k,v,n) {
		formId = k;
		$("#id").val(formId);
		addUrl = v;
		formName = n;
		$(".addTitle").empty();
		var a = '<i class="fa icon-notebook"></i>'+n;
		$(".addTitle").append(a);
		$(".iteam").css("color","#000000");
		$("#"+k).css("color","#3c8dbc");
		loadTitle(k);
	}

	//ajax请求获取表头
	function loadTitle(id) {
		$.ajax({
			url: "${ctx}/appFunction/getTitle",
			type: "post",
			cache: false,
			async: false,
			data: {
				"id": id
			},
			success: function (data) {
				initTitle(data)
			},
		});
	}

	//加载表头
	function initTitle(datas) {
		var mo = [];
		dataGrid = $("#Menus");
		content = dataGrid.parent();
		mo.push({
			header:  "id" ,
			name:  'id' ,
			index: '',
			width: 80,
			sortable:false,
			hidden:true,
			align: "center"
		});
		var listTitle = '<option value=" ">'+'请选择:'+'</option>';
		$.each(datas, function (dex, value) {
			mo.push({
				header:  value.label ,
				name:  value.id ,
				index: '',
				width: 80,
				sortable:true,
				align: "center"
			});
			//搜索下拉框封装
			listTitle += '<option value="'+value.id+'">'+value.label+'</option>';
		})
		mo.push({
			header: '${text("操作")}' ,
			name:  'actions' ,
			index: '',
			width: 80,
			sortable:false,
			align: "center",
			formatter: function(val, obj, row, act){
				var actions = [];
				actions.push('<a href="${ctx}/ledger/wpLedger/view?id='+row.id+'" class="btnList" title="${text("详情")}"><i class="icon-eye"></i></a>&nbsp;');
				actions.push('<a href="${ctx}/ledger/wpLedger/form?id='+row.id+'" class="btnList" title="${text("编辑")}"><i class="fa fa-pencil"></i></a>&nbsp;');
				actions.push('<a href="${ctx}/ledger/wpLedger/delete?id='+row.id+'" class="btnList" title="${text("删除")}" data-confirm="${text("确认要删除该条台账信息吗?")}"><i class="fa fa-trash-o"></i></a>&nbsp;');
				return actions.join('');
			}
		});
		$("#selectTitle").html(listTitle);
		$("#dataGrid").jqGrid('GridUnload');
		$('#dataGrid').dataGrid({
			searchForm: $("#searchForm"),
			columnModel: mo,
			showCheckbox: true,
			// frozenCols: true, 	// 启用冻结列,并在colModel中设置frozen:true
			autoGridHeight: function(){
				return content.height()-150;
			},
			// 加载成功后执行事件
			ajaxSuccess: function (data) {
				page(1,20,'dataGrid');
			}
		});

	}

	function addBtn() {
		if(formId == ""){
			js.showMessage("请先创建报表", "提示:", "error");
			return false;
		}
		//页面跳转
		$("#addData").attr('href',addUrl);
	}
	//导出报表
	function exportExcel() {
		if(formId == ""){
			js.showMessage("请先创建报表", "提示:", "error");
			return false;
		}
		var ids = $('#dataGrid').dataGrid('getSelectRows');
		if (ids.length > 0) {
			window.location.href = "${ctx}/appFunction/exportExcel?formId="+formId+"&ids="+ids;
			$('#dataGrid').dataGrid('reloadGrid');
		} else {
			js.showMessage("请至少选择一行", "提示:", "error");
		}
	}

	//导入报表
	function btnImport() {
		if(formId == ""){
			js.showMessage("请先创建报表", "提示:", "error");
			return false;
		}
		layer.open({
			type: 1,
			area: ['400px', '200px'],
			shadeClose: false,
			shade:0.6,
			// anim : 3,
			skin: 'layui-layer-molv',
			title:"导入"+formName+"数据",
			content: js.template('importTpl'),
			btn: ['下载模板','导入','关闭'],
			btn1: function(index){
				window.location.href = "${ctx}/appFunction/importTemplate?id="+formId;
				layer.close(index);
			},
			btn2: function(index,layero){
				var formData = new FormData();
				console.log(formData);
				formData.append("file",$("#importFile")[0].files[0]);
				var form = $("#importFile")[0].files[0];
				console.log(form);
				if (!form) {
					js.showMessage("${text('文件为空,请选择导入文件。')}", null, 'warning');
					return false;
				}else if(!js.endWith(form.name, '.xls') && !js.endWith(form.name, '.xlsx')){
					js.showMessage("${text('文件不正确,请选择后缀为“xls”或“xlsx”的文件。')}", null, 'warning');
					return false;
				}
				$.ajax({
					url: "${ctx}/appFunction/importForm?id="+formId,
					dataType: 'json',
					type: 'POST',
					data: formData,
					cache: false,
					processData: false,  // 不处理数据
					contentType: false,
					success: function(data){
						js.showMessage(data.message);
						$('#dataGrid').dataGrid('reloadGrid');
					}
				});
				layer.close(index);
			},
			btn3: function(index){
				layer.close(index);
			}
		});
	}
</script>
<script id="importTpl" type="text/template">
	<div id="importBox" v-show="!showListBtn">
		<form id="importForm" method="post" enctype="multipart/form-data"
			  style="padding-left:20px;text-align:center;">
			<input id="importFile" name="file" type="file" style="width:330px;margin-top: 15px"/>
			<font color="red" class="pull-left mt10">
				${text('提示:仅允许导入“xls”或“xlsx”格式文件!')}
			</font>  
		</form>
	</div>

</script>


### 实际结果、报错信息、截图

1. ![输入图片说明](https://images.gitee.com/uploads/images/2022/0420/085145_ab414e75_2130253.png "屏幕截图.png")

这里贴错误信息


### 环境版本:

- JDK版本:1.8、11、17
- 浏览器版本:Chrome xx、Firefox xx、IE xx
- 平台版本:JeeSite 4.x.x、5.x.x(pom.xml里查看)

Comments (1)

fanjs created任务

可能是没有卸载干净,可以试下这个方法:

$("#dataGrid").jqGrid('GridUnload');

替换为

$("#gbox_dataGrid").html('<table id="dataGrid"></table>');

Sign in to comment

Status
Assignees
Milestones
Pull Requests
Successfully merging a pull request will close this issue.
Branches
Planed to start   -   Planed to end
-
Top level
Priority
参与者(2)
6732 thinkgem 1651893329
Java
1
https://gitee.com/thinkgem/jeesite4.git
git@gitee.com:thinkgem/jeesite4.git
thinkgem
jeesite4
JeeSite 4.4 and 5.0

Search