easyui中的数据网格应用
1.页面代码:
【注:】
使用easyui不要自己加分页,在table属性中加:pagination:true,即可添加分页栏
2.后台代码:
后台代码将list集合与total(总条数传到页面),很重要,很好用,很方便
easyui中默认:page:第几页
rows:每页条数
以上代码将list集合与total封装到json中,页面即可获取值,具体怎么获得在easyui的js中,没兴趣去研究
3.要点:
【1】:页面中的data-options中的url写要请求的后台,先加载页面后请求后台
【2】:请求后台后返回的是json数据,json数据是由后台查询的实体集合转换而来,实体最好不要有主外键关联,如有关联
4.如果不需要在页面显示主外键关联数据也可以使用以下过滤器:
【用法:】
要过滤的字段如果是多个就可以传数组
得到easyui列表中的当前页与每页条数:
【注:】表格中的数据是后台返回的json,页面得到后台返回的json后自己搞的
【注:】:还有待完善,部分内容还没学会
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后自己搞的
【注:】:还有待完善,部分内容还没学会
发表评论
-
easyu列表中的链接
2015-04-18 10:49 561列表数据: <th data-options=&quo ... -
easyui中的checkbox
2015-03-04 10:43 6517easyui中的chebox: selectOnCheck:t ... -
easyui中的combobox(下拉框)
2015-02-15 11:20 2189easyui中的combobox(下拉框): 1.第一种写法 ... -
JS右键与菜单操作
2015-02-13 15:30 1976JS右键菜单的一些基本操作 1. 建右键菜单栏: < ... -
JS操作table
2015-02-12 17:17 652一。插入行: function insRow(){ var ... -
JS判断上传文件类型
2015-02-09 10:31 10951.使用js判断上传文件类型 //判断上传文件是否为图片 ... -
IE中兼容模式下JSON未定义
2015-02-06 12:17 2869IE兼容模式就报JSON未定义的错误,解决方法是:判断当前浏览 ... -
jquery中的几种表单提交方式
2015-02-04 20:12 5611.首先导入jquery必须的js封装包: < ... -
日期选择插件
2015-02-03 17:17 3541.一个个人觉得非常好用的日期插件,可控制日期成为你想要的形式 ... -
地区选择插件——三级联动
2015-02-03 16:58 4321.搜集一个实用的地区选择插件:省——市——区 2.页面代码 ... -
easui验证两次密码是否一致
2015-02-03 15:27 710使用easyui验证两次密码输入是否一致: 1.首先导入ea ...
相关推荐
easyui-table客户端分页,数据源为前端数据
struts2结合easyui实现增删改分页排序
基于ssm框架使用easyui简单表格实现分页案列 附带mysql数据库表
本代码主要针对easyui 的数据网格导出, 通过节点自动识别导出
JS EasyUI DataGrid动态加载数据
springboot+mybatis+easyui增删改查分页Demo,sql采用xml方式
本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法。分享给大家供大家参考。具体如下: 一般分页都是后台做,前端做无论从哪方面考虑都不合适。但是有的时候还是有这种需求。 这里重点用到了pagination的监听...
jquery easyUI datagrid组件实现了单张表的增删改查及分页,后台使用servlet,数据库使用mysql
SSh结合Easyui实现Datagrid的分页显示(多个实例)。这篇写SSh结合Easyui实现Datagrid的分页显示,其他的例如添加、修改、删除、批量删除等功能
EasyUI:基本布局&tree菜单数据的绑定&DataGrid数据查询&数据绑定&分页
是用java和easyUI的一个分页例子 ,可以给刚刚接触easyUi的朋友们看看,高手请绕行
.net 使用easyUI_DataGrid分页 列操作
jquery easyUI 分页问题文档
demo-easyui.rar此文件是将数据库中的表的数据提取到页面上,并用easyui将其实现分页。里面的table.jsp使用前端进行分页table2.jsp使用后台进行分页,当你转好tomcat后,运行tomcat服务器。可以通过...
easyui 创建数据网格(DataGrid)
JQuery EasyUI DataGrid服务端分页加载数据后,DataGrid行号不能延续,总是重新由1开始。因为服务端分页取回的是单页数据,通过LoadData方法加载数据后,pageNumber属性被初始化为1,因此行号总是重新由1开始。现在...
struts1.3+spring2+Hibernate json,easyui datagird 学习easyui 做的一个小例子
asyUI ComboGrid 集成分页、按键示例源码 源码描述: ...6、下拉框的文本框的内容变化时,表格数据按分页设置显示 所用技术:jquery+在html页面中通过js文件调用ashx一般处理程序 运行环境:vs2010+无数据库
EasyUI分页,编辑