JQuery EasyUI DataGrid 编程经验

转载 2015年07月07日 18:47:55

原创地址:http://xiaomao870311.blog.51cto.com/1458701/384400

最近,在项目中用到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     
     );
  }         这样页面的删除和数据库中的删除都实现了。

4.待解决的问题

如果返回的数据为空,则在IE浏览器下,页面会有Bug。我的解决办法是,把每个域设为"",这样在页面上就会出现一行空内容的数据。如果遇到这个问题并解决的朋友,可以给我建议。

jquery EasyUI数据表格datagrid中load,reload,loadData方法的区别

初学者小问题大问题的都比较多,就是因为初学嘛,对框架了解的没那么深入。这里我就拿出初学可能会遇到的一个问题来讲一讲,datagrid比较常 用也比较复杂,它有其中有load,reload,loadDa...
  • H12KJGJ
  • H12KJGJ
  • 2017年06月08日 19:32
  • 1968

jquery easyui datagrid API

扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults 。 依赖 panel resizable linkbutt...
  • stalwartwill
  • stalwartwill
  • 2013年12月05日 13:34
  • 2570

jQuery EasyUI jquery.datagrid.js源代码

dd /** * jQuery EasyUI 1.2.3 * * Licensed under the GPL terms * To use it on other terms pleas...
  • xiaocie3456
  • xiaocie3456
  • 2014年04月09日 08:45
  • 4306

jquery easyui datagrid 数据样式的设置

数据样式对表格中的选取的数据进行样式设置。
  • qq_35070434
  • qq_35070434
  • 2016年12月04日 19:52
  • 214

Jquery easyui DataGrid属性中文注解

DataGrid 属性 Name Type Description Default columns ...
  • qq_24967663
  • qq_24967663
  • 2016年03月21日 17:16
  • 2851

jQuery EasyUI之DataGrid使用示例

jQuery EasyUI是一个轻量级的Web前端开发框架,提供了很多的现成组件帮助程序员减轻前端代码开发量,之前有个项目中就用到了其中的DataGrid。jQuery EasyUI框架的官方主页:h...
  • guwei4037
  • guwei4037
  • 2014年09月24日 15:07
  • 13976

jquery easyui datagrid 添加超链接

var username = $("#form_username").val(); $('#tt').datagrid({ url:webContext+"/user/queryUserList....
  • zengmingen
  • zengmingen
  • 2016年07月18日 15:11
  • 1147

JQuery easyUI datagrid 排序,使用sorter自定义排序

JQuery easyUI datagrid 排序的使用和实例   1.设置remoteSort(注:此属性默认为true,如果如果是对本地数据排序必须设置为false) 2.设置列...
  • NRlovestudy
  • NRlovestudy
  • 2015年12月17日 14:00
  • 5129

JQuery easyUi datagrid 中 改变行背景色

前言 JQuery easyUi datagrid 中 使用datagrid生成数据列表后,需要根据相关设置使某些行的样式突出显示,也就是说改变一些行的背景色。 PS: 设置 striped:tr...
  • tianlincao
  • tianlincao
  • 2012年05月02日 18:43
  • 21428

jquery easyui datagrid 列自适应窗口宽度

easyui datagriad 框架 在做列自适应时可以采取以下步骤:     1. fitColumns: true,/*自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动*/  ...
  • shakawjh
  • shakawjh
  • 2014年08月09日 15:47
  • 2792
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JQuery EasyUI DataGrid 编程经验
举报原因:
原因补充:

(最多只允许输入30个字)