Jquery easy ui的分页,table,数据加载

最新推荐文章于 2018-06-11 22:48:00 发布

a574258039

最新推荐文章于 2018-06-11 22:48:00 发布

阅读量4.7k

点赞数 1

本文链接：https://blog.csdn.net/a574258039/article/details/17911641

版权

本文记录了使用Jquery Easy UI进行分页和表格数据加载时的注意事项，包括JSON字符串格式要求、数据解析问题以及如何实现中文显示。在实际应用中，需确保JSON数据不包含单引号，支持Jquery解析的格式，并正确设置total和rows字段。此外，可通过引入特定的中文JS文件调整为中文界面。同时，要关注字符编码问题，如后台使用GBK编码，前端需做相应处理。

摘要由CSDN通过智能技术生成

最近用到了，做个笔记。js片段都是后来根据功能加的，没有整理起来，大家自己整理一下。

注意的问题：

1.jquery easy ui不支持单引号的json字符串，解析数据会出现问题

2.Jquery能支持的表单解析格式是：

{"total":1,"rows":[{"serialNo":"1","valiStartDate":1385827200000,"valiEnd":null}]}

Total:是后台记录的总条数

Rows是返回过来的数据的名字

Map<Object, Object> m = new HashMap<Object, Object>();

m.put("rows",lists);

m.put("total", list.size());

3.如果想使用中文的格式可以导入一个官方文档的中文js

下面的代码给管事的看了，他说加载页面的时候不让显示数据，所以我修改了条件查询的方法，去掉了datagrid的url如下：

				//url:'SelectUtil.jsp?type=initUserManagerInput',去掉这条

然后修改方法如下：

		function queryMenu() {
			/*	
			if ( $("#participant").combobox("getValue") == ''&& $("#workStartDate").datebox('getValue') == ''&& $("#workEndDate").datebox('getValue')=='') {
				$("#dg").datagrid("reload");
			}
				$.post("SelectUtil.jsp", {
				type:	'queryMenuFromUserManagerInput',
				Participant :  $("#participant").combobox("getValue"),
				ValiStartDate : $("#workStartDate").datebox('getValue'),
				ValiEnd :$("#workEndDate").datebox('getValue')
				}, function(data, states) {
					//alert(data);
					$("#dg").datagrid("loadData", data.rows);
				},"json");
				*/
						
			grid.datagrid({url:'SelectUtil.jsp', 
                                 queryParams:{
				type:	'queryMenuFromUserManagerInput',
				Participant :  $("#participant").combobox("getValue"),
				ValiStartDate : $("#workStartDate").datebox('getValue'),
				ValiEnd :$("#workEndDate").datebox('getValue')
                                  }
             });
		};

一切就OK了

例子：

<%@ page language="java" contentType="text/html; charset=GBK"
    pageEncoding="GBK"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK">
		<title>Insert title here</title>
		<link rel="stylesheet" type="text/css" 
			href="../themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="../themes/icon.css">
		<link rel="stylesheet" type="text/css" href="../themes/demo.css">
		<script type="text/javascript" src="../jquery/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../jquery/jquery.easyui.min-1.3.2.js"></script>


	</head>
	<body>
		<h2>
			保单信息查询条件
		</h2>
		<form >
		<table>
			<tr>
				<td>
					任务编码:
				</td>
				<td>
					<select id="taskNo" class="easyui-combobox" name="TaskNo" style="width:130px;">   
				    
					</select> 
				</td>
				<td>
					任务类型:
				</td>
				<td>
					<input id="taskType" class="easyui-validatebox" type="radio" name&#