`

easyui数据网格与分页

javascriptjsonjava 
阅读更多
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后自己搞的

【注：】：还有待完善，部分内容还没学会
分享到：
| 肖申克的救赎
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    基于easyui的通用导出

    首先，我们要理解EasyUI的数据网格（DataGrid）是一个用于展示数据的表格组件，它可以加载JSON或XML格式的数据，并提供排序、筛选、分页等功能。在实际应用中，有时我们需要将数据网格中的数据导出到Excel文件，方便...

    jQuery EasyUI datagrid实现本地分页的方法

    7. 最后，在分页控件上使用refresh方法来刷新分页控件的状态，确保页码显示与当前数据页一致。 通过以上步骤，我们就可以利用jQuery EasyUI datagrid组件实现本地分页功能。这种方法比较适合于数据量不是特别大，...

    easyui 创建数据网格（DataGrid）

    ### easyui 创建数据网格（DataGrid） 在web开发中，数据展示是非常重要的环节之一，而数据网格（DataGrid）作为常见的数据展示方式被广泛应用。EasyUI作为一种基于jQuery的用户界面插件集合，提供了丰富的组件来...

    EasyUI-1.Datagrid 数据网格

    Datagrid 是 EasyUI 的一个重要组件，它是一个数据表格控件，可以用来展示大量结构化的数据，并提供排序、分页、筛选、编辑等功能，极大地提高了用户体验。 在 `...

    easyui datagrid 多条件筛选 可复选 类似淘宝筛选

    首先，`datagrid`是EasyUI中的一个核心组件，它用于展示数据表格，支持分页、排序、过滤等多种操作。在实现多条件筛选时，我们需要对datagrid的`columns`属性进行配置，定义每一列的显示方式和筛选条件。例如，我们...

    easyui增删改很好的例子

    在实际应用中，EasyUI的数据操作通常与JSON格式的API相结合。当你点击增删改按钮时，前端会封装JSON数据并发送到后端，后端解析JSON，执行相应的数据库操作，然后返回结果或者确认信息，前端再根据返回的结果更新...

    easyui分页实现

    综上所述，EasyUI 的分页功能是通过 `datagrid` 组件与服务器端配合实现的，通过配置分页参数、监听事件以及自定义样式，可以轻松地创建出功能完备且易于操作的分页效果。在实际项目中，`userinfo.sql` 文件可能用于...

    EasyUi中的Combogrid 实现分页和动态搜索远程数据

    jquery easyui中的combogrid比较特殊，算是combo和grid的组合，combogrid结合一个可编辑的文本框和下拉数据网格面板，可以让用户迅速找到并选择，又可以进行搜索，展示与当前输入的字符相匹配的数据。下面给大家介绍...

    easyui框架

    例如，将数据网格和分页组件结合，或者在对话框中嵌入表单。 在 "Demo" 文件中，我们可以期待看到这些基本元素的实例。可能包含一个简单的页面布局，带有导航菜单、数据网格展示、对话框弹出等功能。通过查看和分析...

    EasyUI的小案例

    EasyUI结合JSON对象和JavaScript数据模型，使得数据与视图的同步变得简单。通过"data"属性，可以将JSON数据绑定到表格或表单，实现动态渲染。 8. **对话框(Dialog)** 对话框在CRUD操作中扮演重要角色，比如用于...

    easyUI使用分页过滤器对数据进行分页操作实例分析

    在本文中，我们将深入探讨如何使用EasyUI的分页过滤器对数据进行分页操作，以便在用户界面中更有效地展示大量数据。EasyUI是一个基于jQuery的轻量级UI库，提供了丰富的组件，如表格、分页、对话框等，用于快速构建...

    easyui_demo_DEMO_easyui的一个demo_easyui_

    DEMO 通常包含一些预设的示例页面，展示了如何使用 EasyUI 的组件，例如数据网格（datagrid）、分页、表单验证、窗口（dialog）等。 在压缩包 "easyui_demo" 中，我们可能会找到以下内容： 1. CSS 文件：这些是 ...

    jquery-Easyui引用与例子

    数据网格用于展示大量数据，支持排序、筛选、分页等功能。例如： ```html 数据网格示例" class="easyui-datagrid" style="width:700px;height:250px" url="getdata.json" toolbar="#toolbar" pagination="true" ...

    Jquery EasyUI 最新版本

    - **数据绑定**：EasyUI 可以方便地与后端服务进行数据交互，实现数据的动态加载和实时更新，例如通过AJAX与服务器通信，展示数据网格中的数据。 **2. jQuery EasyUI 主要组件详解** - **Dialog**：对话框组件，...

    easyui datagrid 拖拽到 tree

    它是一个数据网格控件，用于展示大量结构化数据，支持分页、排序、过滤等功能。在EasyUI中，datagrid可以通过简单的HTML和JavaScript配置来创建，并能与后台的数据服务无缝对接，进行数据的加载和交互。 接下来是...

    easyui视频教程(8)

    2. **组件使用**：EasyUI提供了一系列组件，如数据网格（datagrid）、下拉框（combobox）、对话框（dialog）等。教程可能会详细介绍这些组件的基本用法，包括如何初始化、配置属性、绑定数据等。 3. **数据绑定**：...

    EasyUI官方API中文版

    EasyUI是一款基于jQuery的前端框架，它为开发者提供了丰富的组件，包括数据网格、表单、菜单、对话框等，使得构建用户界面变得更加便捷。这款框架的设计理念是简单易用，同时具备高度可定制性，因此在Web应用开发中...

    easyui视频讲解以及代码

    - **数据绑定**：讲解如何将后台数据绑定到 EasyUI 组件，例如数据网格的分页、排序和过滤功能。 - **实战示例**：通过实际的 web 页面开发示例，演示如何使用 EasyUI 构建一个完整的应用界面。 - **代码优化**：...

    easyui1.7中文api

    - **数据网格（DataGrid）**：用于展示大量数据，支持分页、排序、过滤、编辑等功能，与后台数据库无缝对接。 - **表单（Form）**：提供了一种组织和管理输入控件的方式，可以进行数据验证和提交。 - **菜单...

Magicbox
Global site tag (gtag.js) - Google Analytics