easyui数据网格与分页

最新推荐文章于 2020-08-27 14:53:38 发布

iteye_18296

最新推荐文章于 2020-08-27 14:53:38 发布

阅读量293

点赞数

分类专栏： jquery+easyui 文章标签： javascript json java ViewUI

本文链接：https://blog.csdn.net/iteye_18296/article/details/82614160

版权

jquery+easyui 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

easyui中的数据网格应用

1.页面代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <link rel="stylesheet" type="text/css" href="<%=basePath %>jquery-easyui-1.3.6/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="<%=basePath %>jquery-easyui-1.3.6/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="<%=basePath %>jquery-easyui-1.3.6/themes/demo.css">
	<script type="text/javascript" src="<%=basePath %>js/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="<%=basePath %>jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
  </head>

<body style="text-align: center;height: 100%;">
		<table class="easyui-datagrid" title="" style="width:auto;height: auto;" id="dg"
			data-options="singleSelect:true,url:'<%=basePath %>system/person_testt.do',method:'post',toolbar: '#tb',onClickRow: onClickRow,onRowContextMenu:onRowContextMenu">
		<thead>
			<tr>
				<th data-options="field:'id',width:'65px',align:'center'">编号</th>
				<th data-options="field:'name',width:'65px',align:'center',editor:'text'">姓名</th>
				<th data-options="field:'sex',width:'65px',align:'center',editor:'text'">性别</th>
				<th data-options="field:'age',width:'65px',align:'center',editor:'text'">age</th>
				<th data-options="field:'phone',width:'65px',align:'center',editor:'text'">电话</th>
				<th data-options="field:'email',width:'65px',align:'center',editor:'text'">email</th>
			</tr>
		</thead>
	</table>
	<div id="tb" style="height:auto">
		<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()">插入行</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()">Remove</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()">Accept</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()">Reject</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="getChanges()">GetChanges</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="doSearch()">查询</a>
		<br>
		<span>姓名:</span>
		<input id="name" style="line-height:26px;border:1px solid #ccc">
		<span>email:</span>
		<input id="email" style="line-height:26px;border:1px solid #ccc">
	</div>
	<script type="text/javascript">
	    var editIndex = undefined;
		//判断是否可以编辑
		function endEditing(){
			if (editIndex == undefined){return true;}
			if ($('#dg').datagrid('validateRow', editIndex)){
				var ed = $('#dg').datagrid('getEditor', {index:editIndex,field:'id'});
				$('#dg').datagrid('endEdit', editIndex);
				return true;
			} else {
				return false;
			}
		}
		function doSearch(){//分页查询
			$('#dg').datagrid('load',{
				name:$("#name").val(),
				email:$("#email").val()
			});
		}
		//点点击某行时
	    function onClickRow(index){
			if (editIndex != index){
				if (endEditing()){
					$('#dg').datagrid('selectRow', index).datagrid('beginEdit', index);
					editIndex = index;
				} else {
					$('#dg').datagrid('selectRow', editIndex);
				}
			}
		}
		//当点击添加按钮时
	    function append(){
			if (endEditing()){
				$('#dg').datagrid('appendRow',{row:{id:uuid}});
				editIndex = $('#dg').datagrid('getRows').length-1;
				$('#dg').datagrid('selectRow', editIndex)
						.datagrid('beginEdit', editIndex);
				/* if(editIndex==undefined){
					$('#dg').datagrid('appendRow',{row:{id:2,title:2222}});
					editIndex = $('#dg').datagrid('getRows').length-1;
					$('#dg').datagrid('selectRow', editIndex)
							.datagrid('beginEdit', editIndex);
				}else{
					$('#dg').datagrid('insertRow',{index:editIndex+1,row:{id:3,title:2222}});
					$('#dg').datagrid('selectRow', editIndex+1)
							.datagrid('beginEdit', editIndex+1);
				} */
			}
		}
	    function removeit(){
	    	if (editIndex != null){
	    		var selected = $("#dg").datagrid("getSelected");//获取选中行
	    		alert(selected.name);//获取选中行的某个值
	    	}
	    	var json='[{"CityId":18,"CityName":"西安","ProvinceId":27,"CityOrder":1},{"CityId":53,"CityName":"广州","ProvinceId":27,"CityOrder":1}]';
	    	//eval("data="+json);
	    	alert(eval("data="+json));
	    }
		//保存页面属性但不走后台
	    function accept(){
			if (endEditing()){
				$('#dg').datagrid('acceptChanges');
			}
		}
		//撤销为保存页面之前的页面，不走后台，只改页面
	    function reject(){
			$('#dg').datagrid('rejectChanges');
			editIndex = undefined;
		}
	    function getChanges(){
	    	endEditing();
			var rows = $('#dg').datagrid('getChanges');
			var effectRow = new Object();
			effectRow = JSON.stringify(rows);
			alert(effectRow);
		}
	    //右键
		function onRowContextMenu(e,rowIndex){
			if(window.event.button=="2"){
				document.oncontextmenu= function(){
					return false;
				};
			}
		}
    </script>	
  </body>
</html>

【注：】
使用easyui不要自己加分页，在table属性中加：pagination:true，即可添加分页栏

2.后台代码：
后台代码将list集合与total（总条数传到页面），很重要，很好用，很方便
easyui中默认：page：第几页
rows：每页条数


ServletActionContext.getResponse().setContentType("application/json; charset=utf-8"); 
List<Person> list=personService.pageByHql(hql, page, rows);

//转json用以下三行，可以将json中的json得到，即存在主外键关联情况下问题
JsonConfig jsonConfig = new JsonConfig();
jsonConfig.setCycleDetectionStrategy(CycleDetectionStrategy.LENIENT);
String json=JSONArray.fromObject(list, jsonConfig).toString();


//拼字符串传值
String str="{\"total\":"+list.size()+",\"rows\":"+json+"}";
ServletActionContext.getResponse().getWriter().write(str);
ServletActionContext.getResponse().getWriter().close();

以上代码将list集合与total封装到json中，页面即可获取值，具体怎么获得在easyui的js中，没兴趣去研究

3.要点：
【1】：页面中的data-options中的url写要请求的后台，先加载页面后请求后台

【2】：请求后台后返回的是json数据，json数据是由后台查询的实体集合转换而来，实体最好不要有主外键关联，如有关联

<th data-options="field:'organization',width:'65px',align:'center',editor:'text',   
    formatter:function(value,rec,index){   
        var name='';   
        if(value!=null){   
            name= value.name;   
        }   
        return name;   
    }">机构</th>

4.如果不需要在页面显示主外键关联数据也可以使用以下过滤器：

import net.sf.json.JsonConfig;
import net.sf.json.util.PropertyFilter;

public class JsonFilter {
	public static JsonConfig getFilter(final String[] s){
		JsonConfig config=new JsonConfig();
		config.setJsonPropertyFilter(new PropertyFilter() {

			@Override
			public boolean apply(Object source, String name, Object value) {
				// TODO Auto-generated method stub
				if(juge(s, name)){
					return true;
				}else{
					return false;
				}
			}
			public boolean juge(String[] s,String s2){
				boolean b=false;
				for(String s1:s){
					if(s2.equals(s1)){
						b=true;
					}
				}
				return b;
			}
		});
		return config;
	}
}

【用法：】

		JsonConfig config=JsonFilter.getFilter(new String[]{"organization","user"});
		ServletActionContext.getResponse().getWriter().write((JSONArray.fromObject(list, config)).toString());

要过滤的字段如果是多个就可以传数组

得到easyui列表中的当前页与每页条数：

$("#dg").datagrid("options").pageNumber;
$("#dg").datagrid("options").pageSize;

【注：】表格中的数据是后台返回的json，页面得到后台返回的json后自己搞的

【注：】：还有待完善，部分内容还没学会

iteye_18296

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyui数据网格与分页

easyui中的数据网格应用1.页面代码：[code="java"] 编号姓名性别 age 电话 email 插入行 Remove Accept R...
复制链接

扫一扫

专栏目录

easyui数据网格与分页

“相关推荐”对你有帮助么？