文档章节

qury-easyui DataGrid 整合struts2增删查该入门实例(三)

阿桂的博客
 阿桂的博客
发布于 2012/11/01 11:08
字数 906
阅读 2273
收藏 2

 主界面

添加

修改


删除

查询暂时按照单字段id查询







 




 页面主要代码easyDemo1.jsp:

<%@ 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%>">
   
    <title>easyDemo1.jsp</title>
 <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">
 <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">
 <script type="text/javascript" src="jquery-easyui/jquery-1.4.2.min.js"></script>
 <script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
 
    <script type="text/javascript" src="jslib/easyCrud.js"></script>
  </head>
 
  <body>
    <h2><b>测试easyui的DataGrid的CRUD操作</b></h2>
    <table id="tt">
    </table>
    <form id="ff" method="post">
        <div>
               姓名:<input class="easyui-validatebox" type="text" id="name" name="name" required="true"></input>
           </div>
           <div>
            年龄:<input class="easyui-numberbox" type="text" id="age" name="age" required="true"></input>
           </div>
           <div>
            性别:<input class="easyui-validatebox" type="text" id="sex" name="sex" required="true"></input>
           </div>
        <div>
         出生:<input class="easyui-validatebox" type="text" id="birthday" name="birthday" required="true"/>
        </div>
        <div>
         班级:<input class="easyui-validatebox" type="text" id="className" name="className" required="true"/>
        </div>
  </form>
    <div id="add" class="easyui-window" title="添加" style="padding: 10px;width: 300;height:200;"
    iconCls="icon-add" closed="true" maximizable="false" minimizable="false" collapsible="false">
     <div id="aa">
     </div>
     <a class="easyui-linkbutton" iconCls="icon-ok" href="javascript:void(0)" onclick="add()">添加</a>
     <a class="easyui-linkbutton" iconCls="icon-cancel" href="javascript:void(0)" onclick="close1()">取消</a>
    </div>
    <div id="edit" class="easyui-window" title="修改" style="padding: 10px;width: 300;height: 200;"
    iconCls="icon-edit" closed="true" maximizable="false" minimizable="false" collapsible="false">
     <div id="ee">
     </div>
     <a class="easyui-linkbutton" iconCls="icon-ok" href="javascript:void(0)" onclick="edit()">修改</a>
     <a class="easyui-linkbutton" iconCls="icon-cancel" href="javascript:void(0)" onclick="close2()">取消</a>
    </div>
    <div id="query" class="easyui-window" title="查询" style="padding: 10px;width: 360px;height:100;"
    iconCls="icon-search" closed="true" maximizable="false" minimizable="false" collapsible="false">
     <div>
      <table>
       <tr>
        <td>学生学号:</td>
        <td><input type="text" name="id" id="qq" class="easyui-numberbox" required="true"></td>
        <td><a class="easyui-linkbutton" iconCls="icon-search" href="javascript:void(0);" onclick="query()">查询</a></td>
       </tr>
      </table>
     </div>
    </div>
  </body>
</html>

 

 


 最主要的easyCrud.js代码如下:

$(function(){
 $('#ff').hide();
 $('#tt').datagrid({
    title:'datagrid增删查该小例子',
    iconCls:'icon-save',
    width:500,
    height:350,
    //pageSize:5,
    pageList:[5,10,15,20],
    nowrap:false,
    striped: true,
    collapsible:true,
    url:'easyAction.action',
    loadMsg:'数据装载中......',
    sortName:'code',
    sortOrder:'desc',
    remoteSort:false,
    frozenColumns:[[
     {field:'ck',checkbox:true}
    ]],
    columns:[[
     {title:'学号',field:'id',width:'50',rowspan:2,align:'center'},
     {title:'姓名',field:'name',width:'60',rowspan:2,align:'center'},
     {title:'性别',field:'sex',width:'50',rowspan:2,align:'center'},
     {title:'年龄',field:'age',width:'50',rowspan:2,align:'center'},
     {title:'出生日期',field:'birthday',width:'120',rowspan:2,align:'center'},
     {title:'班级',field:'className',width:'100',rowspan:2,align:'center'}
    ]],
    pagination:true,
    rownumbers:true,
    toolbar:[{
      text:'全部',
      iconCls:'icon-ok',
      handler:function(){
       $('#tt').datagrid({url:'easyAction.action'});
      }
     },'-',{
      text:'添加',
      iconCls:'icon-add',
      handler:function(){$('#add').window('open');
      $('#ff').show();
      $('#ff').form('clear');
       $('#ff').appendTo('#aa');}
     },'-',{
       text:'修改',
       iconCls:'icon-edit',
       handler:getSelect
     },'-',{
       text:'删除',
       iconCls:'icon-remove',
       handler:del
     },'-',{
       text:'查询',
       iconCls:'icon-search',
       handler:function(){
        $('#query').window('open');
        
       }
     }
    ]
   });
   displayMsg();
  });
  function displayMsg(){
   $('#tt').datagrid('getPager').pagination({displayMsg:'当前显示从{from}到{to}共{total}记录'});
  }
  function close1(){
   $('#add').window('close');
  }
  function close2(){
   $('#edit').window('close');
  }
  function add(){
    $('#ff').form('submit',{
    url: 'easyAdd.action',
    onSubmit:function(){ return $('#ff').form('validate');},
       success:function(){
         close1();
        }
   });
   $.messager.alert('add','添加信息成功!!!','info',function(){
    $('#tt').datagrid({
     url:'easyAction.action',
     loadMsg:'更新数据中......'
    });
    displayMsg();
   });
  }
  var id;
  function getSelect(){
   var select = $('#tt').datagrid('getSelected');
   if(select){
    $('#edit').window('open');
    $('#ff').show();
    $('#ff').appendTo('#ee');
    $('#name').val(select.name);
    $('#age').val(select.age);
    $('#sex').val(select.sex);
    $('#birthday').val(select.birthday);
    $('#className').val(select.className);
    id = select.id;
   }else{
    $.messager.alert('warning','请选择一行数据','warning');
   }
  }
  function edit(){
    $('#ff').form('submit',{
    url: 'easyUpdate.action?id='+id,
    onSubmit:function(){ return $('#ff').form('validate');},
       success:function(){
         $.messager.alert('edit','修改信息成功!!!','info');
         close2();
        }
   });
   $('#tt').datagrid({
    url:'easyAction.action',
    loadMsg:'更新数据......'
   });
   
  }
  function del(){
   var selected = $('#tt').datagrid('getSelected');
   if(selected){
    $.messager.confirm('warning','确认删除么?',function(id){
    if(id){
     id = selected.id;
     $.ajax({
             type:"POST",
            url:"easyDel.action",
             data:"id="+id,
            dataType:"xml",
            success:function callback(){}
          });
     $('#tt').datagrid('reload');
    }
   });
   }else{
    $.messager.alert('warning','请选择一行数据','warning');
   }
  }
  function query(){
  var queryParams = $('#tt').datagrid('options').queryParams;
  queryParams.queryWord = $('#qq').val();
  $('#tt').datagrid({
   url:'easyQuery.action'
  });
  displayMsg();
  $('#query').window('close');
  }


  


 



 上述js代码写的有点臃肿,但是绝对能够精简的,只是时间关系和个人在js这块开发较少。

 后台代码较多,本人已经将源码jquery_easyUI_demo.rar上传到网盘中,提供下载地址http://u.115.com/file/f46d05cd01#Download有兴趣的可以看看


 数据库操作(easyui): http://hi.baidu.com/620734263/blog/item/156078115d6a80e5c2ce791a.html

本文转载自:http://hi.baidu.com/dujanson/item/b42ac05e3c24ba414fff20e1

阿桂的博客

阿桂的博客

粉丝 12
博文 63
码字总数 34826
作品 0
浦东
高级程序员
私信 提问
jQuery-EasyUI 1.2.3 发布

Current Version: 1.2.3 ChangeLog: Bug window: Cannot resize the window with iframe content. fixed. tree: The node will be removed when dragging to its child. fixed. combogrid: T......

ejzhang
2011/04/26
6.2K
3
AngularJS和EasyUI结合使用的注意点

最近在着手用angular重构一个项目,原来的前台是纯easyui做的,最近花了一周学了angular,决定把它们结合下,用纯html 和 暴露后台rest api搞起。结果在ng-view多页切换的时候遇到了一个问题...

Big_BoBo
2013/12/26
14.6K
8
jquery easyui的datagrid在初始化的时候会请求两次URL?

html代码中利用class声明了datagrid,导致easyUI解析class代码的时候先解析class声明中的datagrid,这样组件就请求了一次url;然后又调用js初始化代码请求一次url。这样导致了重复加载,解决...

五毛钱的饼
2014/09/19
310
0
關於 iframe 裡的 easyui datagrid 控制

你好,我在 a.html 中放置一個iframe,名稱是 myIframe。 iframe的連結網頁 b.html 裡放置一個 easyui datagrid 元件,名稱是 tt 我在 b.html 中可以透過 $("tt").datagrid("resize",{width......

Arthur1977
2014/04/27
1K
2
jQuery EasyUI DataGrid Checkbox 数据设定与取值

有关 jQuery EasyUI DataGrid 的相关资料,可以前往官网查看, jQuery EasyUI 官网 jQuery EasyUI Documentation DataGrid Demo CheckBox select on DataGrid...

Amamatthew
2014/10/10
240
0

没有更多内容

加载失败,请刷新页面

加载更多

云栖干货回顾 | 更强大的实时数仓构建能力!分析型数据库PostgreSQL 6.0新特性解读

阿里云 AnalyticDB for PostgreSQL 为采用MPP架构的分布式集群数据库,完备支持SQL 2003,部分兼容Oracle语法,支持PL/SQL存储过程,触发器,支持标准数据库事务ACID。AnalyticDB PG通过行存...

大涛学弟
12分钟前
3
0
TL138/1808/6748-EasyEVM开发板硬件CPU、FLASH、RAM

TL138/1808/6748-EasyEVM是广州创龙基于SOM-TL138/SOM-TL1808/SOM-TL6748核心板开发的一款开发板。由于SOM-TL138/SOM-TL1808/SOM-TL6748核心板管脚兼容,所以此三个核心板共用同一个底板。开...

Tronlong创龙
16分钟前
2
0
开普勒平台开源版

https://github.com/kplcloud/kplcloud

perofu
20分钟前
3
0
昨天,这项阿里技术再获世界级科技大奖!

第六届世界互联网大会来了!千年水乡古镇乌镇又一次吸引了全世界的目光。 昨天,阿里云自研数据库POLARDB 在会上当选世界互联网领先科技成果。POLARDB解决了企业在云时代的数据库难题,帮助企...

阿里云官方博客
20分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部