`
wangmengbk
  • 浏览: 292283 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Jquery Datagrid 动态分页以及CRUD（增删改查）

jQueryAjaxCSSMySQLjson 
阅读更多
这是一个jsp页面中进行jquery 定义：后台业务查看请下载附件。有什么建议请留言相告，然后在进行改造！ 数据库采用的是MySQL！

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  
    <title>Jquery 得到所有的学生信息</title>
    <link rel="stylesheet" type="text/css" href="/jquery/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/jquery/themes/icon.css">
<!--  <link rel="stylesheet" type="text/css" href="/jquery/css/jquery.autocomplete.css">
    -->
<script src="/jquery/script/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/jquery/script/jquery.extends.util.js"></script>
<script type="text/javascript" src="/jquery/script/jquery.easyui.min.js"></script>
<script type="text/javascript"  src="/jquery/script/jquery.metadata.js" ></script>
<script type="text/javascript" src="/jquery/script/jquery.validate.js"></script>
<script src="/jquery/script/jquery.layout.js" type="text/javascript" ></script>
<script type="text/javascript" src="/jquery/datepicker/WdatePicker.js"></script>
<script type="text/javascript" src="/jquery/script/joyplus.js"></script>

<script type="text/javascript" src="/jquery/script/jquery.joy.extends.js"></script>
<script src="/jquery/script/jquery.flexigrid.js" type="text/javascript" ></script>
<script type="text/javascript" src="/jquery/script/jquery.extend.js"></script>
<script type="text/javascript" src="/jquery/script/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="/jquery/script/jquery.autocomplete.js"></script>
<script type="text/javascript" src="/jquery/script/jquery.form.js"></script>
<script type="text/javascript" src="/jquery/script/jquery.json.js"></script>

<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->

  </head>
  <script>
 
  var sexs=[{id:"1",name:"男"},{id:"2",name:"女"}];
  <!--
  $(document).ready(function(){
  $("#stusex").combobox({
  data:sexs,
  valueField:'id',
  editable:false,
textField:'name'
  });
 
  $("#studentTable").datagrid({
  title:"学生信息",
  pagination:true, //分页显示
     loadMsg:"Processing, please wait …",
     rownumbers:true,
     height:'auto',
     frozenColumns:[[
{field:'ck',checkbox:true},
{title:"编号",field:'id',width:"80"}
]],
columns:[[
{title:"姓名",field:'name',width:"100"},
{title:"年龄",field:'age',width:"100"},
{title:"性别",field:'sex',width:"100",
formatter:function(value){
if(value=="1"){
return "男";
}else{
return "女";
}
}
},
{title:"联系电话",field:'tel',width:"100"}
]],
toolbar : [//工具栏上定义按钮
           {id:'btnadd',
text:'Add',
iconCls:'icon-add',
handler:function(){
           openNewWindows();
 
}
},
{
id:'btndel',
text:'Del',
iconCls:'icon-remove',
handler:function(){
//删除选择的记录
delStudent();
}
},
{
id:'btnedit',
text:'Edit',
iconCls:'icon-edit',
handler:function(){
//修改层的样式，是div 显示
$("#editStudentMessage").css({display:'block'});
//模态窗体显示
openEditStutable();
}
}
],
queryParams:{"page.pageIndex":"1","page.pageSize":"5","page.qop":"Eq"}
  });
 
  $.ajax({
   type: "post",
   async: false,//设置 同步
   url:'studentServlt',
   success: function(msg){
 
var griddata=xorderListToGridData(msg);

$('#studentTable').datagrid("loadData",griddata);

   }
  
});

//得到  studentTable 表格中的 分页对象
var pager = $('#studentTable').datagrid('getPager');
pager.pagination({
onSelectPage:function(pageNumber, pageSize){
searchStudent(pageNumber, pageSize);
}
});
  });
 

//调用后台 业务 进行查询
    function searchStudent(pageNumber, pageSize){
    $.ajax({
       type: "get",
       url:"studentServlt?start="+pageNumber+"&end="+pageSize,
      // data: params,
       success: function(msg){
    var griddata=xorderListToGridData(msg);
    if(griddata.rows!=null){
    $('#studentTable').datagrid("loadData",griddata);
    }
       }
      
    });
    }
 
  //将数据转化为 datagrid 数据 格式
      function xorderListToGridData(msg){
          var griddata=$.JSON.decode(msg);
          return griddata;
      }
      //add 事件
      function openNewWindows(){
      //清空控件中的的值
      $("#stuid").val("");
      $("#stuname").val("");
      $("#stuage").val("");
      $("#stusex").combobox("setValue","");
      $("#stutel").val("");
      //修改层的样式，是div 显示
           $("#editStudentMessage").css({display:'block'});
      $("#editStudentMessage").dialog({
        height: 200,
        width:300,
         modal: true,//屏蔽页面
         autoOpen: false
         });
      }
      var count=1000;
      //Ok 事件
      function addStudentMessage(){
      count++;
      var datas = new  Object();
      datas.id=count;
      datas.name=$("#stuname").val();
      datas.age=$("#stuage").val();
      datas.sex=$("#stusex").combobox('getValue');
      datas.tel=$("#stutel").val();
      var ids=$("#stuid").val();
      //得到表格中的数据
      var stuData=$("#studentTable").datagrid("getData");
      if(ids != ""){
         datas.id=ids;
     
      if(stuData.rows.length !=0){
      for(var i=0;i<stuData.rows.length;i++){
      //如果 表格中的Id 和要进行修改的Id 相同的话 就进行修改
      if(stuData.rows[i].id==ids){
     
      $('#studentTable').datagrid('getData').rows.splice(i,1,datas);
      }
      }
         }
        }else{
      stuData.total++;
      //加载行
      stuData.rows.push(datas);
      }
      $("#studentTable").datagrid("loadData",stuData);
      //关闭窗体
      $('#editStudentMessage').dialog('close');
      }
     
      //del 事件
      function delStudent(){
     
      //得到所有的数据
      var stuData=$("#studentTable").datagrid("getData");
      //得到选中的数据
      var rows=$("#studentTable").datagrid("getSelections");
      if(rows.length == 0){
       $.messager.alert("系统提示","请选择要删除的行！",'info');
       return ;
    }
   
    if(confirm('确定删除 这' + rows.length + '条记录?')){
   
   for(var i=0;i<rows.length;i++){
   for (var j=0;j<stuData.rows.length;j++)
               {
if(stuData.rows[j].id == rows[i].id){
$("#studentTable").datagrid("deleteRow",j)
}
}
   }
    
      }
      $("#studentTable").datagrid("loadData",$("#studentTable").datagrid("getData"));
     
      }
     
      //edit 事件
      function openEditStutable(){
     
      var rows = $("#studentTable").datagrid('getSelections');
if(rows == 0){
$.messager.alert("系统提示","请选择要编辑的行！",'info');
return ;
}

if(rows.length > 1){
$.messager.alert("系统提示","对不起，该操作只能选择一行！",'error');
return;
}

for(var i=0;i<rows.length;i++){
if(rows[i].id!="" ){
  $("#stuid").val(rows[i].id);
  $("#stuname").val(rows[i].name);
      $("#stuage").val(rows[i].age);
      $("#stusex").combobox('setValue',rows[i].sex);
      $("#stutel").val(rows[i].tel);
}
}
$("#editStudentMessage").dialog({
        height: 200,
        width:300,
         modal: true,//屏蔽页面
         autoOpen: false
         });
      }
     
  -->
  </script>
 
  <body>
    <form id="froms">
    <div id="allStudentDiv">
    <table id="studentTable"></table>
    </div>
   
    <div id="editStudentMessage" style="display: none">
             <input type="hidden" id="stuid"></input>&nbsp;&nbsp;&nbsp;
    姓名：<input type="text" id="stuname"></input>&nbsp;&nbsp;&nbsp;</br>
    年龄：<input id="stuage" class="easyui-numberbox" min="5.5" max="20" precision="2" required="true"/></br>
    性别：<select id="stusex" class="easyui-combobox" name="dept" style="width:150px;" required="true"></select>&nbsp;&nbsp;&nbsp;</br>
    电话：<input id="stutel" class="easyui-numberbox"  max="11"  required="true"/>&nbsp;&nbsp;&nbsp;</br>
    <input id="ok" value="OK" type="button" onclick="addStudentMessage();"/>&nbsp;&nbsp;&nbsp;<input id="cancel" value="Cancel" type="button" onclick="$('#editStudentMessage').dialog('close');">
    </div>
    </form>
  </body>
</html>

运行效果：
  • 大小: 142.7 KB
  • dddd.rar (1010 Bytes)
  • 下载次数: 978
分享到：
| Js 去掉 数组（new Array()）中重复 数 ...
评论
2 楼 prince2008 2012-08-27  
楼主，数据库覆盖没有用，请把把数据导出为sql上传下
1 楼 any.bo 2012-02-02  
             
发表评论

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

相关推荐

    JqueryDatagrid动态分页以及CRUD（增删改查）中文WORD版

    资源名称：Jquery Datagrid动态分页以及CRUD(增删改查) 中文WORD版内容简介：本文档主要讲述的的是Jquery Datagrid动态分页以及CRUD(增删改查)；希望会对大家有帮助；感兴趣的朋友可以过来看看资源截图： 资源太大，...

    基于JQuery的datagrid分页数据实现

    本项目"基于JQuery的datagrid分页数据实现"就是针对这一需求提供的一种解决方案。这个小程序利用SSH2（Struts2、Spring、Hibernate）框架，结合Maven构建工具，实现了通过jQuery的datagrid插件进行Ajax分页加载数据...

    ssm、easyui的增删改查

    总结来说，"ssm、easyui的增删改查"项目是一个基础的Java Web教程，它涵盖了Spring、SpringMVC、MyBatis三大框架的整合应用，以及EasyUI的前端展示。这个项目可以帮助开发者掌握后端数据处理和前端界面设计的基本...

    EasyUI 增删改查的简单实现

    它提供了丰富的组件，如表格、下拉菜单、按钮、对话框等，使得开发者能够快速构建用户界面，尤其是对于增删改查（CRUD）操作的页面。在这个项目中，我们看到使用了 Maven 作为构建工具，SpringMVC 作为后端 MVC 框架...

    jquery easy ui+ssh 增删改查例子

    这里，我们深入探讨一下使用jQuery EasyUI与SSH框架进行数据操作（增删改查）的基础知识。 jQuery EasyUI是一个基于jQuery的前端框架，它提供了一系列轻量级、易于使用的组件，如表格、对话框、菜单等，用于构建富...

    springboot+mybatis+easyui增删改查分页Demo

    "springboot+mybatis+easyui增删改查分页Demo"是一个基于Spring Boot、MyBatis和EasyUI实现的Web应用程序示例，主要用于演示如何在这些技术栈中进行基本的数据操作，如添加（Add）、删除（Delete）、修改（Update）...

    JQuery Easy UI 增删改查 示例

    在后端处理CRUD操作时，这些SQL语句会被动态拼接并执行，以完成数据的增删改查。 综上所述，“JQuery Easy UI 增删改查”示例展示了如何利用jQuery Easy UI与后端的JDBC和Servlet技术协同工作，实现Web应用中的数据...

    jdbc实现增删改查.rar

    本项目“jdbc实现增删改查.rar”就是通过jQuery EasyUI和原生JDBC来实现数据库的CRUD（Create、Read、Update、Delete）操作，并且包含了分页显示的功能。 首先，让我们深入了解JDBC。JDBC提供了一组接口和类，允许...

    easyui简单的增删改查范例

    标题中提到的“easyui简单的增删改查范例”，指的是一个使用easyui框架来实现基本的数据库操作——增加、删除、修改和查询（CRUD）功能的应用实例。这种范例在web开发中非常常见，是学习和掌握easyui进行页面交互...

    Mvc+Easy UI 登录加完整增删改查(模糊查询、有注释).zip

    本项目以Mvc11-4 - 登录加完整增删改查(模糊查询、有注释)为实例，深入讲解如何利用MVC框架结合Easy UI库，构建一个具备登录功能和完整的CRUD（创建、读取、更新、删除）操作的系统，同时包含模糊查询功能。...

    使用Struts2和jQuery EasyUI实现简单CRUD系统

    在本文中，我们将探讨如何使用Struts2和jQuery EasyUI框架创建一个简单的CRUD（创建、读取、更新、删除）系统。首先，我们需要理解这两个技术的基础概念。 Struts2是一个基于MVC（Model-View-Controller）架构的...

    java增删改查分页数据

    在IT行业中，数据库操作是日常开发中的重要环节，特别是对于Web应用来说，增删改查（CRUD）和分页查询是核心功能。本话题主要围绕"Java"环境下的"Spring"框架，结合"SpringMVC"、"MyBatis"以及"EasyUI"来实现这些...

    mvcEasyUI实现增删改查

    8. **CRUD操作**：详细步骤和代码示例，展示如何使用MVC和EasyUI实现增删改查功能。 9. **Ajax异步请求**：可能涉及到使用jQuery的Ajax方法进行无刷新的数据操作。 10. **分页与排序**：在数据网格中实现数据的分页...

    jquery easyui 增删查改分页例子

    在本文中，我们将深入探讨如何使用jQuery EasyUI的DataGrid组件实现一个基本的CRUD（创建、读取、更新和删除）系统，并结合Servlet作为后端处理和MySQL数据库存储数据。jQuery EasyUI是一个基于jQuery的前端框架，它...

    EasyUI中datagrid 分页，僧删改查，上下移动数据.net案例

    本文将深入探讨标题中的"EasyUI中datagrid分页，增删改查，上下移动数据"的.NET案例。 **EasyUI的datagrid组件**： EasyUI的datagrid是一个表格控件，它具有数据展示、排序、过滤、分页等功能，非常适合用于数据...

    EasyUI-CRUD-DataGrid

    DataGrid 是 EasyUI 中的一个核心组件，它是一个数据表格，可以展示大量结构化的数据，并支持多种操作，如排序、分页、筛选以及增删改查等。 在"EasyUI-CRUD-DataGrid"这个主题中，我们将深入探讨如何使用 EasyUI ...

    spring+springMVC+mybatis+easyui 增删查改以及分页源码

    标题 "spring+springMVC+mybatis+easyui 增删查改以及分页源码" 描述了一个使用SSM（Spring、SpringMVC、MyBatis）框架与EasyUI前端库联合实现的Web应用项目，特别是关注于CRUD（创建、读取、更新、删除）操作和无...

    jquery easy ui 增改删 表格

    在“jQuery Easy UI 增改删 表格”这个主题中，我们将探讨如何使用该框架来实现数据的增、删、改功能，并结合后端处理文件进行数据操作。 1. **表格组件（datagrid）** - jQuery Easy UI 的 `datagrid` 是核心组件...

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