easyui数据网格_JAVA_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > JAVA > easyui数据网格

easyui数据网格

 2015/2/6 0:43:32  ruohanfly  程序员俱乐部  我要评论(0)
  • 摘要:easyui中的数据网格应用1.页面代码:<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%><%Stringpath=request.getContextPath();StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><
  • 标签:数据 YUI
easyui中的数据网格应用

1.页面代码:

class="java" name="code"><%@ 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">
		[url=javascript:void(0)]插入行[/url]
		[url=javascript:void(0)]删除行[/url]
		[url=javascript:void(0)]Accept[/url]
		[url=javascript:void(0)]Reject[/url]
		[url=javascript:void(0)]GetChanges[/url]
	</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 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>


2.后台代码:
	public void testt() throws IOException{
		ServletActionContext.getResponse().setContentType("application/json");
		String hql = "from Person where state ='在职'";
		pageNumber = (pageNumber == null || pageNumber.equals("0")) ? "1":pageNumber;  
        //每页显示条数  
        pageSize = (pageSize == null || pageSize.equals("0")) ? "10":pageSize;
		List<Person> list=personService.pageByHql(hql, Integer.parseInt(pageNumber), Integer.parseInt(pageSize));
//		JsonConfig config=JsonFilter.getFilter(new String[]{"organization","user"});
		JsonConfig jsonConfig = new JsonConfig();
		jsonConfig.setCycleDetectionStrategy(CycleDetectionStrategy.LENIENT);
		ServletActionContext.getResponse().getWriter().write((JSONArray.fromObject(list, jsonConfig)).toString());
//		ServletActionContext.getResponse().getWriter().write((JSONArray.fromObject(list, config)).toString());
		ServletActionContext.getResponse().getWriter().close();
	}


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

【2】:请求后台后返回的是json数据,json数据是由后台查询的实体集合转换而来,实体最好不要有主外键关联,如有关联,上方的后台方法中也已经解决,页面中还有点小问题,没法从json中提取json中的数据

【3】:后台代码要注意的是json的转换:
		JsonConfig jsonConfig = new JsonConfig();
		jsonConfig.setCycleDetectionStrategy(CycleDetectionStrategy.LENIENT);
		ServletActionContext.getResponse().getWriter().write((JSONArray.fromObject(list, jsonConfig)).toString());


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());

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

【注:】:还有待完善,部分内容还没学会
发表评论
用户名: 匿名