Jquery Datagrid 动态分页以及CRUD.docx

《Jquery Datagrid 动态分页以及CRUD.docx》由会员分享，可在线阅读，更多相关《Jquery Datagrid 动态分页以及CRUD.docx（9页珍藏版）》请在三一办公上搜索。

1、Jquery Datagrid 动态分页以及CRUDJquery Datagrid 动态分页以及CRUD 博客分类： jquery jQueryAjaxCSSMySQLjson 这是一个jsp页面中进行jquery 定义：后台业务查看请下载附件。有什么建议请留言相告，然后在进行改造！ 数据库采用的是MySQL！ Jquery 得到所有的学生信息 !- - !- - var sexs=id:1,name:男,id:2,name:女; !- $(document).ready(function $(#stusex).combobox( data:sexs, valueField:id, edita

2、ble: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:性

3、别,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:

4、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=xo

5、rderListToGridData(msg); $(#studentTable).datagrid(loadData,griddata); ); /得到 studentTable 表格中的 分页对象 var pager = $(#studentTable).datagrid(getPager); pager.pagination( onSelectPage:function(pageNumber, pageSize) searchStudent(pageNumber, pageSize); ); ); /调用后台 业务 进行查询 function searchStudent(pageNumb

6、er, 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 g

7、riddata=$.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:

8、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 st

9、uData=$(#studentTable).datagrid(getData); if(ids != ) datas.id=ids; if(stuData.rows.length !=0) for(var i=0;istuData.rows.length;i+) /如果 表格中的Id 和要进行修改的Id 相同的话 就进行修改 if(stuData.rowsi.id=ids) $(#studentTable).datagrid(getData).rows.splice(i,1,datas); else stuData.total+; /加载行 stuData.rows.push(datas);

10、 $(#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

11、 ; if(confirm(确定删除 这 + rows.length + 条记录?) for(var i=0;irows.length;i+) for (var j=0;j 1) $.messager.alert(系统提示,对不起，该操作只能选择一行！,error); return; for(var i=0;i     姓名：    年龄： 性别：    电话：        运行效果： jqueryTest.rar (1.1 MB) 下载次数: 705 dddd.rar (1010 Bytes) 下载次数: 321 查看图片附件