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

最新推荐文章于 2018-08-30 22:56:38 发布
最新推荐文章于 2018-08-30 22:56:38 发布
阅读量171 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： jquery 文章标签： jQuery Ajax CSS MySQL json ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wang609128516/article/details/83704355
本文介绍了一个使用JSP结合jQuery实现的学生信息管理系统。系统通过前后端交互完成学生信息的增删改查功能，并利用jQuery插件美化界面。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

这是一个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>   
姓名：<input type="text" id="stuname"></input>   </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>   </br>
电话：<input id="stutel" class="easyui-numberbox" max="11" required="true"/>   </br>
<input id="ok" value="OK" type="button" onclick="addStudentMessage();"/>   <input id="cancel" value="Cancel" type="button" onclick="$('#editStudentMessage').dialog('close');">
</div>
</form>
</body>
</html>

运行效果：[img]http://dl.iteye.com/upload/attachment/303256/94b0a7aa-03da-301d-acc6-c4a186fafea2.jpg[/img]
jQuery EasyUI 框架实现一个 CRUD DataGrid
ancientear的博客
09-18 348
创建CRUD应用（ jQuery EasyUI 框架实现一个 CRUD DataGrid） crud是指在做计算处理时的增加(Create)、读取查询(Retrieve)、更新(Update)和删除(Delete)几个单词的首字母简写。crud主要被用在描述软件系统中数据库或者持久层的基本操作功能。 在这里需要四个插件： • datagrid：向用户展示列表数据。 • dialog：创建或编辑一条...
JS操作表格代码CRUD操作(很完整)
05-08
JS操作表格的代码，动态生成表格和操作表格，里面写的很详细，很完整。
datagrid表格分页及增删改查
cpf-freesky
12-06 653
表格分页在了解datagrid分页之前会mysql分页基础，datagrid仅仅是在前台对分页的相关数据进行了处理，在servlet中依然对分页数据的处理依然同mysql分页基础相同。
JqueryDatagrid动态分页以及CRUD（增删改查）中文WORD版
07-22
资源名称：Jquery Datagrid动态分页以及CRUD(增删改查) 中文WORD版内容简介：本文档主要讲述的的是Jquery Datagrid动态分页以及CRUD(增删改查)；希望会对大家有帮助；感兴趣的朋友可以过来看看资源截图： 资源太大，...
JqueryDatagrid动态分页以及CRUD(增删改查)中文最新版本
最新发布
11-24
本文档详细介绍了如何使用Jquery Datagrid插件实现动态分页功能以及如何通过CRUD操作来管理表格数据。文档内容不仅涵盖了基本的使用方法，也包括了高级技巧和最佳实践，适合已经有一定前端开发基础，且希望深入学习...
Jquery Datagrid 动态分页与CRUD操作实践
"Jquery Datagrid 动态分页以及CRUD 增删改查" 在Web开发中，jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理和Ajax交互。jQuery DataGrid是一个功能丰富的表格插件，常用于展示大量数据并实现分页...
jQuery EasyUI使用教程之构建CRUD DataGrid
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
09-22 756
在本教程中，我们将为大家展示如何创建一个CRUD DataGrid。在这期间将使用到可编辑的datagrid插件来同这些crud操作一起工作。 Step 1：在HTML标记中定义DataGrid 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
jQuery DataGrid 实现增删改查,分页
Tiny1211的博客
05-26 216
HTML： View Code <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Typ...
JQuery-EasyUI DataGrid CRUD
weixin_30654419的博客
12-04 153
ASP.NET使用EasyUI-DataGrid + ashx + JQuery Ajax：实现数据的增删查改，查询和分页！ 数据表： 学生表：学生编号、姓名、性别、班级编号、年龄 班级表：班级编号、班级名称 开发过程： 1.下载EasyUI的开发包 2.引用相关文件： <link href="/CSS/easyui.css" rel="stylesheet" ...
jQuery EasyUI详解-EasyUI datagrid分页
甘韦的博客
08-30 1080
分页的英文是pagination，记住这个单词，因为会经常遇见。 在EasyUI框架下，datagrid使用分页简单到令人发指，只需要2点： 1，为table启用class=”easyui-datagrid”，这样table就成为了一个数据网格。 2，为table启用pagination=”true”，表示表格启用分页功能。 &lt;table id="userTable" title=...
Jquery EasyUI dataGrid 修改默认分页大小
Just do IT.
12-23 2815
EasyUI 版本：1.3+ - 常见错误代码： $(‘#myGrid’).datagrid({ pageSize:15 }) 解决方案： pageSize 不能单独使用，必须和pageList联合使用。 如果pageSize的值不在pageList中时，会以pageList中最小的值显示，而设置的pageSize无效。
easyui增删改查
寒尘的专栏
08-26 3576
这个是个人试了很多，最终觉得最经典的一个样式呢。
jquery easyui datagrid的增加，修改，删除
dearbaba_8520的博客
07-21 658
截图: 页面: view plain copy to clipboard print ? &lt;body&gt; &lt;
【BootStrap】--具有增删改查功能的表格Demo
热门推荐
一段旅程
09-14 5万+
bootstrap的表格样式，有类似EasyUI的表格，也有卡片式表格，放到移动端显示，各有千秋。但是BootStrap自带的表格是没有操作列的，网上的资源不少，但是都是比较单一、零碎，JS、CSS也经常给的不全，自己经过大概一个月左右的时间，把表格封装了一下,希望能分享给大家。
使用easyui的DataGrid实现即时编辑(CRUD)
smwhotjay的专栏
05-10 655
首先来个Basic DataGrid，只显示列表。如图tag_cloud.sql /* Navicat MySQL Data Transfer Source Server         : code Source Server Version : 50538 Source Host           : localhost:3306 Source Database       : blog...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值