最近,在项目中用到JQuery EasyUI DataGrid,虽然它封装了表格的实现,为我们提供很多便利,但是在使用的过程中,还是会遇到一些困难和问题。目前,问题都已经解决,特分享我使用 DataGrid开发的经验。(PS:我用的是JSP和J2EE框架开发)。
1.数据的提取和显示。
DataGrid是通过url属性获取数据的。例如:url:'ListInfo.action',这样通过调用Action中的方法获取数据。返回的是JSON字串。注意,JSON字串必须按照DataGrid定义的数据格式进行拼装。这种数据格式,可以参考我前面的文章中的附件。特别强调的是,JSON字串中的total域的值是数据的条数,用于数据的分页。
2.数据的分页。
数据的分页分为前台分页和后台分页,前台分页,DataGrid已经封装好了。 DataGrid定义了两个参数: rows(每页的条数),page(当前的页数),这两个参数分别对应属性pageSize,pageNumber。用户可以在 pageSize,pageNumber属性中设置,也可以不设置,这样就取默认值。我们只需在Action中定义两个变量,private int rows; private int page; 接着通过SQL语句获取需要取的值。分页的SQL语句(Oracle)如下:
1. select * from(
2. select rownum r, field1,field2 from table_name where rownum <= page* rows(
3. )
4. where r > (page-1) * rows
这样提取的数据的条数赋值给total域,拼装在JSON字串中返回,就可以实现分页了。当然,pagination:true,是当然需要的。
3.数据的操作。
数据的操作大致可分为:查看,删除。对于查看,我们可以通过onClickRow或onDblClickRow事件实现。如:
$(function(){
$('#test').datagrid({
title:'数据列表',
width:900,
height:500,
.......(省略的属性)
onDblClickRow: function() {
var selected = $('#test').datagrid('getSelected');
if (selected){
window.open("DataView.action?Id="+selected.ID);
}}
这样双击就可以查看了。
关于删除,可以通过点击删除按钮,调用删除方法来实现。删除按钮可以在拼装JSON字串的时候,赋值给OPERATION域,这样设置{field:'OPERATION',title:'操作',width:120},就可以在页面上显示删除按钮了。删除的实现,如下:
代码
function DelAff(){
$.messager.confirm('确认','是否真的删除?',function(r){
if (r){
var selected = $('#test').datagrid('getSelected');
if (selected){
var index = $('#test').datagrid('getRowIndex', selected);
$('#test').datagrid('deleteRow', index);
DeleteSubmit(selected);
}
}
});
}
function DeleteSubmit(selected)
{
var url="DataDelete.action?Id="+selected.ID;
$.post(
url
);
}
这样页面的删除和数据库中的删除都实现了。
分享到:
相关推荐
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!
jquery easyui demo 网页下载下来打包了,还有datagrid简要说明
jquery easyui datagrid 性能优化,优化后可快速提升查询性能。唯一的缺陷就是不支持可编辑grid了。只需要在引入easyui.js后面引入此js即可。
jquery easyui datagrid demo 详解 增删改查
jquery easyui datagrid 教程的部分应用。
本文给大家分享jQuery EasyUI编辑DataGrid用combobox实现多级联动效果的实例代码,代码简单易懂,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
JQuery EasyUI DataGrid服务端分页加载数据后,DataGrid行号不能延续,总是重新由1开始。因为服务端分页取回的是单页数据,通过LoadData方法加载数据后,pageNumber属性被初始化为1,因此行号总是重新由1开始。现在...
jqueryEasyUI中的dataGrid实现的表格的增删改查,后台使用servlet,有数据库源码
两种方法将easyui datagrid 中的数据导出到Excel中,均以验证可以正常使用
主要介绍了jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
主要介绍了jquery easyui datagrid实现增加,修改,删除方法,结合实例形式分析了jquery easyui datagrid结合asp.net实现数据的增删改等操作的步骤与相关技巧,需要的朋友可以参考下
本篇文章主要介绍jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】 。datagrid现在具有行编辑能力了,可以添加和编辑数据,同时对行内数据上移下移。
jquery EasyUI DataGrid 实现批量删除和批量添加和批量更新,减少服务器交互
主要介绍了jQuery EasyUI datagrid实现本地分页的方法,以实例形式较为详细的分析了本地分页的原理与相关的实现技巧,需要的朋友可以参考下
该列设为超链接,点击时向调用的js方法传参。 return "(parameter)/>这里onclick的参数是怎么传的呢
jQuery easyui dataGrid 动态改变排序字段名,一般情况下,在使用的时候,我们会点击相应字段进行排序,这里以JAVA为例,后端的实体类字段有可能和数据库的字段不一致; 如:实体类中的属性为userName,前台filed=...
jquery easyui 扩展 datagrid 自定义动态隐藏显示列
UI设计在一个系统中的重要性是不容忽视的,我们开发人员要做到:让用户去控制...给你的Easyui-DataGrid 表头添加一点料吧 Easyui-Datagrid—表头灵活显示http://blog.csdn.net/u010293698/article/details/47956865
主要介绍了jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下