使用easyUI datagrid 分页展示数据库数据，并带字段查询功能

最新推荐文章于 2023-04-25 08:43:58 发布

CCUT

最新推荐文章于 2023-04-25 08:43:58 发布

阅读量1.1k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_29622845/article/details/102793261

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

项目中需要展示数据库数据，并可以选中自己需要的数据。一开始是直接手写HTML实现的，后来boss说太丑，就用上了easyUI 的datagrid(数据网格)，现在总结一下使用过程，以下摘自easyUI中文网。

“数据网格（datagrid）以表格格式显示数据，并为选择、排序、分组和编辑数据提供了丰富的支持。数据网格（datagrid）的设计目的是为了减少开发时间，且不要求开发人员具备指定的知识。它是轻量级的，但是功能丰富。它的特性包括单元格合并，多列页眉，冻结列和页脚，等等”

1.首先导入easyUI 需要的 css文件、js文件

2.在需要展示数据的table中加入datagrid。例如:

 <table id="dg" class="easyui-datagrid" ……

但我使用的是在js函数中为table添加datagrid

//新建窗口ITC
function ITC(){
	$("#ITC").window('open');
	$("#table2").datagrid({
		pagination:"true",
		pageSize: 10,//每页显示的记录条数，默认为10
		pageList: [5,10,15],//可以设置每页记录条数的列表
        url:'loadComboxDataFromDB.action?enumId=ITC&notIds='+taskId2.join(','),
        queryParams: {
        	taskId: '',
        	taskName: '',
    		creator: ''
    	},
        columns:[[
            {field:'taskId',title:'任务id',width:180,align:'center'},
            {field:'taskName',title:'产品标题',width:400,align:'center'},
            {field:'creator',title:'创建人',width:150,align:'center'},
        ]]
    });
}
//搜索方法
function doSearch1(){
	$('#table2').datagrid('reload',{
		taskId: $('#taskId1').val(),
		taskName: $('#taskName').val(),
		creator: $('#creator1').val()
	});
}

其中，pageination 设置为 true，则在数据网格（datagrid）底部显示分页工具栏。

queryParams是为了重置上次的查询参数。因为如果使用了下面的doSearch1()方法后，再次调用ITC()，如果不重置参数，则查询出来的结果还会是上次查询的，带查询参数（taskId,taskName,creator）的结果。

columns为在table中展示的列信息。显示效果如下：

HTML部分的代码为

	<div class="easyui-window" title="ITC测试任务" id="ITC" style="width:900px; height:450px;" data-options="iconCls:'icon-save',modal:true,closed:true">
		<div id="tb1" style="padding:0px">
				<span>任务 ID:</span>
				<input id="taskId1" style="line-height:20px;border:1px solid #ccc">
				<span>标题:</span>
				<input id="taskName" style="line-height:20px;border:1px solid #ccc">
				<span>创建人:</span>
				<input id="creator1" style="line-height:20px;width:80px;border:1px solid #ccc">	
				<a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch1()">搜索</a>
			</div>
			<div style="height:330px;">
				<table id="table2" style="width:100% ;border-collapse:collapse;" border="1px solid black;" >
				</table>
			</div>
			<div align="center" style="margin-top:10px;">
				<a class="easyui-linkbutton" onclick="ok1()" style="width:70px;">确定</a>
				<a class="easyui-linkbutton" onclick="cancel1()" style="width:70px;">取消</a>
			</div>
		</div>

使用easyui-window，默认为关闭状态。用户点击特定按钮后，才显示。datagrid展示的数据在window里面的table中。

其中上面的搜索框比较关键，起到了筛选数据的作用。下面来看看后台代码：

	@Override
	protected String doService(HttpServletRequest req, HttpServletResponse resp, String projectId)throws IOException, ServletException {
                //其他参数，不用管
 		String enumId = req.getParameter("enumId");
		String notIds = req.getParameter("notIds");
                //筛选条件参数（部分没用到，也不用管）
		String taskId = get("taskId");
		String taskTitle = get("taskTitle");
		String roadmapversion = get("roadmapversion");
		String creator = get("creator");
		String taskName = get("taskName");
                //这两个参数是datagrid隐式的传过来的，也就是不管怎么样都会传过来
                //rows为每页展示数据的个数
		int rows = Integer.parseInt(req.getParameter("rows"));
                //page为第几页
		int page = Integer.parseInt(req.getParameter("page"));
		String html = loadComboxService.getEnumDataFromDB(enumId,notIds,page,rows,taskId,taskTitle,roadmapversion,creator,taskName);
		req.setAttribute("html", html);
		resp.setCharacterEncoding("UTF-8");  
		resp.setContentType("text/html");  
		PrintWriter out = null;  
		try {  
		    out = resp.getWriter();  	
		    out.write(html);	
		} catch (IOException e) {  
		    e.printStackTrace();  
		} finally {  
		    if (out != null) {  
		        out.close();  
		    }  
		} 
		return null;
	}

数据库查询部分，分页部分的代码如下（其实这部分才是最重要的，分页查询）：

if (enumId.equals("ITC")) {
			StringBuilder whereSql = new StringBuilder();
			if (taskId != null && !"".equals(taskId)) {
				whereSql.append("and taskId like '%" + taskId + "%' ");
			}
			if (taskName != null && !"".equals(taskName)) {
				whereSql.append("and taskName like '%" + taskName + "%'");
			}
			if (creator != null && !"".equals(creator)) {
				whereSql.append("and creator like '%" + creator + "%'");
			}
			String sql = "select top " + rows + " taskId,taskName,creator from ITC_table "
					+ "where taskId not in (select top ((" + page + "-1)*" + rows + ") taskId from ITC_table)"
					+ whereSql.toString();

			// 不显示已选的
			String ids = "";
			if (notIds != null && notIds != "") {
				// 已选的个数是单个还是多个
				if (notIds.contains(",")) {
					String str[] = notIds.split(",");
					for (int i = 0; i < str.length; i++) {
						ids = ids.concat("'" + str[i] + "',");
					}
					ids = ids.substring(0, ids.length() - 1);
					sql = sql.concat(" and taskId not in (" + ids + ")");
				} else {
					sql = sql.concat(" and taskId not in ('" + notIds + "')");
				}
			}
			// 统计总数
			String countSql = "";
			if (whereSql.toString().isEmpty()) {
				countSql = "select count(*)as count from ITC_table";
				if (!notIds.isEmpty()) {
					if (notIds.contains(",")) {
						countSql = "select count(*)as count from ITC_table where taskId not in (" + ids + ") ";
					} else {
						countSql = "select count(*)as count from ITC_table where taskId not in (" + notIds + ") ";
					}
				}
			} else {
				countSql = "select count(*)as count from ITC_table where "
						+ whereSql.toString().substring(4, whereSql.toString().length());
				if (!notIds.isEmpty()) {
					if (notIds.contains(",")) {
						countSql = "select count(*)as count from ITC_table where "
								+ whereSql.toString().substring(4, whereSql.toString().length()) + "and taskId not in ("
								+ ids + ")";
					} else {
						countSql = "select count(*)as count from ITC_table where "
								+ whereSql.toString().substring(4, whereSql.toString().length()) + "and taskId not in ("
								+ notIds + ")";
					}
				}
			}
			countResult = TDMSJdbcUtil.query(countSql);
			String count = countResult.get(0).get("count").toString();
			list = TDMSJdbcUtil.query(sql);
			Map total = new HashMap<>();
			total.put("total", count);
			total.put("rows", list);
			Gson gson = new Gson();
			json = gson.toJson(total);
		}

很多东西都可以在官网的API文档中查到，而且，写程序敲代码，一定要多试，多写。总结经验。