`

jqury-easyui DataGrid 整合struts2增删查该入门实例（三）

jQueryJavaScriptCSSQQAjax 
阅读更多

这两天较忙，没有时间更新代码，今天晚上花了两个多小时，毛毛糙糙的做了一个增删查该的小例子.

ps；觉得在这js这块较弱，有错误或者不当之处还请指正,本人定当虚心学习。

好了：还是老样子先看下效果。

 主界面

添加

‍

修改


删除

查询暂时按照单字段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有兴趣的可以看看
分享到：
| jquery easyui dataGrid 和struts2结合使 ...
评论
1 楼 潇洒天涯 2011-11-12  
文件在网盘到期了，能分享一下么？谢谢
发表评论

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

相关推荐

    jquery-easyui-1.5.2.rar

    2. **EasyUI 的特点** - **轻量级**: 依赖于 jQuery，体积小，加载速度快。 - **易于使用**: 通过简单的 HTML 标签和 CSS 类即可实现复杂的界面效果。 - **组件丰富**: 覆盖网页开发的常见需求，减少开发者自定义...

    jquery-easyui 前端开发框架

    5. **数据绑定**：与后端数据源紧密结合，通过简单的配置即可实现数据的增删改查操作，减轻了前后端交互的复杂性。 二、jQuery EasyUI 主要组件详解： 1. **Dialog**：弹出对话框，用于展示独立的内容，支持拖动、...

    jqueryEasyUI

    **jQuery EasyUI 知识点详解** jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列的 UI 组件，使得开发者能够快速构建出美观且功能丰富的 Web 应用程序。这个框架大大简化了网页界面的设计工作，使得...

    jqury-api jQueryAPI1.4

    2. **链式操作**：jQuery对象返回的是jQuery实例，可以连续调用多个方法，如`$("#element").hide().fadeIn(1000)`，先隐藏元素，然后渐显，两个操作之间无需创建新的jQuery对象。 3. **DOM操作**：jQuery提供了便利...

    jQury-DOM篇学习笔记

    2. `after()`和`before()`用于在元素外部插入，它们分别在元素之后和之前添加内容。例如，`$("#element").after("新内容&lt;/p&gt;")`会在选中元素后面插入文本，`before()`则是相反的操作。 3. `prepend()`和`prependTo...

    JQuery UI包括(1.0.5、1.2、1.3、1.7、1.8、1.9)等版本另附文档

    2.jQuery and jQuery UI Reference 1.2 API.zip； 3.jQuery UI 1.9带给我们的惊喜.zip； 4.jQuery.ui.docs.rar； 5.jquery-easyui-1.0.5.zip； 6.jquery-easyui-1.2.ZIP； 7.jQuery-easyui-docs.rar； 8.jquery-ui-...

    jQury-行冻结

    2. **CSS定位**：行冻结的核心是通过CSS来实现视觉上的“冻结”。利用`position: fixed`属性可以使元素相对于浏览器窗口定位，即使页面滚动也不会移动。然而，这会导致元素与表格其余部分的相对位置关系发生变化，...

    Jqury-ajax.rar_java html 交互_jqury _jqury ajax html

    jQuery 是一个广泛使用的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。在“jQuery-ajax.rar”这个压缩包中，我们很显然会涉及到使用jQuery进行AJAX（Asynchronous JavaScript...

    jquery-3.4.1.zip

    jquery 最新未压缩版本。版本号：3.4.1 。 jQuery是一个快速，小型且功能丰富的JavaScript库。借助易于使用的API（可在多种浏览器中使用），使HTML文档的遍历和操作，事件处理，动画和Ajax等事情变得更加简单。

    模仿jQury-简单的选择器封装

    我们可以创建一个新的构造函数，如`MyJQObject`，并返回它的实例： ```javascript function MyJQObject(elements) { this.elements = elements || []; } MyJQObject.prototype = { // 在这里添加类似jQuery的...

    jquery easyui 官方图标文件

    jQuery EasyUI 是一个基于 jQuery 的轻量级前端框架，它为开发者提供了丰富的组件和便捷的API，用于构建功能丰富的Web应用程序。在EasyUI中，图标是界面设计的重要元素，能够帮助用户快速识别和理解功能。"jquery ...

    dtree+jquery 动态实现无限树形菜单 （包括增删改查）

    本主题聚焦于使用dtree与jQuery库动态实现无限层级的树形菜单，并涵盖增删改查的基本功能。dtree是一款基于jQuery的插件，它提供了丰富的API和灵活的配置选项，使得在网页上创建交互式树形菜单变得简单易行。 首先...

    Jqury拖动实例（25种实例）

    在这个"jQuery拖动实例（25种实例）"中，我们将探讨如何利用jQuery实现类似Google应用中的拖放效果。拖放功能在现代网页设计中非常常见，比如在文件管理、日历应用或者界面元素布局中都有其身影。 首先，jQuery的...

    jqury特效--图片点击放大效果（源码）

    top: e.pageY - $('#zoomed').height() / 2, left: e.pageX - $('#zoomed').width() / 2 }); }); // 鼠标离开时，隐藏放大图 $('#zoomed').mouseleave(function() { $(this).addClass('hidden'); }); }); `...

    模仿jQury选择器--模块化-代码统一封装

    - 在模仿jQuery选择器的项目中，可能需要将不同的选择器功能（如ID选择器、类选择器等）封装成单独的模块，然后通过导出接口进行整合。 3. **代码封装** - 封装是将具体实现细节隐藏起来，提供简洁的API供外部...

    jQuery对table表格进行增删改查

    总结了一下对table的增删改查，写一篇留着以后自己recode。 1.首先我自己写了一个简单的div布局。 2.实现几个用标签做的按钮的功能 分别是新增 修改 删除 查询和返回。 代码如下 html+css（原谅我写在一起吧。。...

    jquery-3.4.1.js

    jQuery是一款简化前端开发,对js的优化.使js书写更加简便,提高开发效率.为了避免大家有时候找不到相关资源,特分享出来,供大家使用.

    锋利的jqury实例

    《锋利的jQuery实例》是一本专注于jQuery实践应用的教程，旨在帮助开发者深入理解和熟练运用jQuery库进行网页交互设计。jQuery是一个广泛使用的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画...

    jquery-3.3.1.js/min.js

    三、动画效果 jQuery以其强大的动画功能著称，`.animate()`方法是实现动画的核心。通过指定CSS属性的变化，我们可以创建平滑的过渡效果，如改变元素的位置、大小或透明度。同时，`.fadeIn()`、`.fadeOut()`、`....

    jqury高级使用手册

    2. **链式操作**: jQuery对象支持链式调用，这意味着你可以连续执行多个方法，而无需创建新的jQuery对象。例如：`$("#myDiv").hide().slideUp();` 首先隐藏元素，然后滑动隐藏。 3. **事件处理**: jQuery 提供了一...

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