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

于 2010-09-03 19:27:54 发布
阅读量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]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值