jQuery-EasyUI-优快云博客

本文介绍如何使用EasyUI框架中的Datagrid组件实现数据展示及分页功能，并通过Dialog组件实现弹窗编辑功能。文章详细展示了Datagrid的HTML结构与JS初始化代码，以及如何通过后端接口获取数据并正确响应easyUI所需的格式。此外，还介绍了如何利用Dialog创建弹窗以编辑SQL语句。

2019独角兽企业重金招聘Python工程师标准>>>

1. datagrid-数据表格

先在页面创建html代码

<table id="history-data-dg" data-options="nowrap:true,singleSelect:true,pagination:true,toolbar:'#historyDataTool',title:'历史数据配置'">
<!-- data-options是自定义属性, 用","隔开, true/false可以不加引号, 值类型的要加"'", 不然会出不来 -->
	<thead>
		<tr>
			<th data-options="field:'historyDataId',width:'120px'">ID</th>
			<th data-options="field:'execPlanId',width:'120px'">执行计划ID</th>
			<th data-options="field:'sqlReason',width:'120px'">SQL说明</th>
			<th data-options="field:'sql',width:'800px'">SQL</th>
		</tr>
	</thead>
</table>
<!-- datagrid的工具栏，和上方datagrid的toolbar属性绑定 -->
<div id="historyDataTool">
	<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editSql()">编辑SQL</a>
</div>

先声明(初始化)datagrid插件，可以用html，也可以用js，我是用js。

$(function () {
	// 初始化easyUI数据表格
	$("#history-data-dg").datagrid({
		url : "<c:url value='/historyData/getHistoryData.do' />",
		queryParams : {// 传入后台的参数，相当于$.ajax()的data
			execPlanId : "1"
		},
		pageSize : 10, // 分页插件的每页最大值
		pageNumber : 1, // 第一次进去时是第1页
		pageList : [10, 20, 30, 40, 50] // 每页可选显示多少页的下拉单
	
	});
});

datagrid可以根据定义的url自己在页面装填数据，非常方便，但是你要把数据规定好，我现在用的是传入一个Map<String, Object>，定义好easyUI要的total，rows属性，感觉easyUI是需要json数据的，因为spring框架的@Reponsebody注解自动把Map格式数据转换成json格式数据。

@Override
public Map<String, Object> getPagingHistoryDataList (Map<String, Object> params, Integer rows, Integer page) {
    // 参数1： 页面过来的parameter，Map类型
    // 参数2： easyUI给我的数据，当前页面可显示几条数据
    // 参数3： easyUI给我的数据，当前是页面的第几页
	Map<String, Object> pageData = new HashMap<String, Object>(10);
	List<Integer> historyDataIds = new ArrayList<Integer>();
		
	List<Map<String, Object>> allIds = historyDataMapper.getHistoryDataIds(params);// 根据页面参数得到所有数据的id list
		
	for (Map<String, Object> map : allIds) {// 过滤有效数据
		if (map.get("historyDataId") != null) {
			historyDataIds.add((Integer) map.get("historyDataId"));
		}
	}
		
	pageData.put("total", historyDataIds.size());// 定义easyUI分页total
		
	if (historyDataIds.size() == 0) {
		pageData.put("rows", new ArrayList<HistoryData>());
	} else {
		// 把分页后的id list作为条件查找数据库, 返回分页后的rows list
		List<Map<String, Object>> rowsList = historyDataMapper.getPagingHistoryDataList(PageUtil.paginate(historyDataIds, rows, page));
		pageData.put("rows", rowsList);
	}
	return pageData;
}

2. dialog弹窗

先在页面创建html代码。

<!-- 弹出的编辑SQL表单对话框 -->
<div id="dlg" title="编辑当前SQL语句" class="easyui-dialog" style="width: 400px; height: 280px; padding: 10px 20px" closed="true" buttons="#dlg-buttons">
	<!-- <div class="ftitle">SQL</div> -->
	<form id="fm" method="post">
		<div class="fitem">
			<textarea id="editSqlTextarea" name="sql" class="easyui-validatebox" rows="12" cols="46" required="true"></textarea>
		</div>
	</form>
</div>

点击工具栏按钮弹出弹窗。