关于easyui同页面显示多个datagrid问题求助

门口塘 2020-10-26 09:26:30

各位大佬，对于同一页面显示多个datagrid的问题，求教下我想让我的表格居中，且后面多余的无数据的边条去除应该怎么处理？而且在我第一个表格$("#analysisResultAvg").datagrid的设置中，设置fit为true，这样的话第二个表格就显示不出来。这是为什么？

我的页面源代码



<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

	<meta charset="UTF-8">

	<title>考试列表</title>

	<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">

	<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">

	<link rel="stylesheet" type="text/css" href="easyui/css/demo.css">

	<script type="text/javascript" src="easyui/jquery.min.js"></script>

	<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

	<script type="text/javascript" src="easyui/themes/locale/easyui-lang-zh_CN.js"></script>

</head>

<body οnlοad="setLabel()">

	<label id="content"></label>

	

	<input type="hidden" id="examids" value="<%=request.getParameter("examids")%>" />

	<input type="hidden" id="examanalyids" value="<%=request.getParameter("examanalyids")%>"/>

	<input type="hidden" id="gradeid" value="<%=request.getParameter("gradeid")%>"/>

	<script type="text/javascript">

	$(function() {

		var examids=document.getElementById("examids").value;

		var examanalyids=document.getElementById("examanalyids").value;

		var gradeid=document.getElementById("gradeid").value;

		console.log("获取的参数值"+examids);

		ids={"examids[]":examids,"examanalyids[]":examanalyids,"gradeid":gradeid};

		$.ajax({

			type:"post",

			url:"ExamanalyServlet?method=ColumnList",

			data:ids,

			dataType:"json",

			async:false,

			success:function(result){

				console.log("result1:"+result);

				var columnsAvg=[];

				$.each(result,function(i,course){

					var column={};

					column["field"]="course"+course.id;

					column["title"]=course.name;

					column["width"]=70;

					column["resizable"]=false;

					column["sortable"]=true;

					columnsAvg.push(column);

				});

				console.log(columnsAvg);

				$("#analysisResultAvg").datagrid({

					columns:[

						columnsAvg

					]

				});

			}

		});

		$.ajax({

			type:"post",

			url:"ClazzServlet?method=ClazzList&t="+new Date().getTime(),

			data:{"gradeid":gradeid},

			dataType:"json",

			async:false,

			success:function(result){

				console.log("result2:"+result);

				var columnsRank=[];

				$.each(result,function(i,clazz){

					var column={};

					column["field"]="clazz"+clazz.id;

					column["title"]=clazz.name;

					column["width"]=70;

					column["resizable"]=false;

					column["sortable"]=true;

					columnsRank.push(column);

				});

				console.log(columnsRank);

				$("#analysisResultRank").datagrid({

					columns:[

						columnsRank

					]

				});

				

			}

		});

		setTimeout(function(){

			$("#analysisResultAvg").datagrid("options").url="ExamanalyServlet?method=CheckAnaly&t="+new Date().getTime();

			$("#analysisResultAvg").datagrid("options").queryParams=ids;

			$("#analysisResultRank").datagrid("options").url="ExamanalyServlet?method=RankAnaly&t="+new Date().getTime();

			$("#analysisResultRank").datagrid("options").queryParams=ids;

			$("#analysisResultAvg").datagrid("reload");

			$("#analysisResultRank").datagrid("reload");

		},100);

		

		//成绩分析结果列表

		$("#analysisResultAvg").datagrid({ 

			border: true, 

			collapsible: false,//是否可折叠的 

			//fit: true,//自动大小   存有这个属性，第二个表格就显示不出来

			method:"post",

			noheader: true,

			singleSelect: true,//是否单选 

			sortOrder:'DESC', 

			remoteSort: false,

			frozenColumns:[[

				{field:'clazzid',title:'各班前10',width:120,resizable:false,sortable:false},

			]],

		});

		

		$("#analysisResultRank").datagrid({ 

			border: true, 

			collapsible: false,//是否可折叠的 

			fit: true,//自动大小 

			method:"post",

			noheader: true,

			singleSelect: true,//是否单选 

			sortOrder:'DESC', 

			remoteSort: false,

			frozenColumns:[[

				{field:'rankNo',title:'名次段',width:120,resizable:false,sortable:false},

			]],

		});

			

	});

	</script>

    <style>

        .panelcontent{ padding:10px 5px 15px 20px; }

    </style>

   		<table id="analysisResultAvg" cellspacing="0" cellpadding="0" style="width: 60%;margin:auto"></table>

		<table id="analysisResultRank" cellspacing="0" cellpadding="0"></table>

	

</body>

</html>

...全文

1750 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

门口塘 2020-10-27

打赏
举报

明白了，谢谢！ <div style="margin-left: 50px;margin-top: 5px;"><table id="analysisResultAvg" cellspacing="0" cellpadding="0" style="width: 60%;margin:auto"></table></div> <div><table id="analysisResultRank" cellspacing="0" cellpadding="0"></table></div>