Jquery Datagrid 动态分页以及CRUD（增删改查）
这是一个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>
运行效果：
<%@ 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>
运行效果：