jqGrid 表格demo

12.3 更新: 有群众反映jqgrid的库下不回来,我在这里贴一下吧.还有我没写过这个jsp例子.不过基本上大同小异.都是用json数据交换的. list.html Html代码 1.

2. 3. 4. 5. 6. 7. 8.

manage_user.js Js代码 1.var lastsel2=0; 2.$(function(){ 3. $('#grid').jqGrid({ 4. height:400, 5. url:'?module=user&act=list&isajax=1', 6. datatype: 'json', 7. mtype: 'POST', 8. colNames:['ID','用户名','密码','真实姓名','联系电话', 'Email'], 9. colModel :[ 10. { 11. name:'id', 12. index:'id', 13. width:50 14. }, 15. { 16. name:'UserName', 17. index:'UserName', 18. editable:true, 19. editrules:{ 20. required:true 21. } 22. }, 23. { 24. name:'PassWord', 25. index:'PassWord', 26. editable:true, 27. edittype:'password', 28. hidden:true, 29. editoptions:{ 30. size:20 31. }, 32. editrules:{ 33. edithidden:true 34. } 35. }, 36. { 37. name:'LinkMan', 38. index:'LinkMan', 39. editable:true, 40. editrules:{ 41. required:true 42. } 43. }, 44. 45. { 46. name:'OperateTel', 47. index:'OperateTel', 48. align:'right', 49. editable:true, 50. editrules:{ 51. required:true 52. } 53. }, 54. 55. { 56. name:'Email', 57. index:'Email', 58. align:'right', 59. editable:true, 60. editrules:{ 61. required:true 62. } 63. } ], 64. pager: 'nav', 65. rowNum:10, 66. rowList:[10,20,30], 67. sortname: 'MemberID', 68. sortorder: "desc", 69. viewrecords: true, 70. imgpath: '../resources/js/jqGrid/themes/basic/images', 71. caption: '用户管理', 72. // multikey:'ctrlKey', 73. multiselect:true, 74. 75. editurl:'?module=user&act=Update' 76. 77. }); 78. 79. //定义按键 80. $('#grid').navGrid('#nav',{ 81. refresh: true, 82. edit: true, 83. add: true, 84. del: true, 85. search: true 86. }); 87. 88. 89.}); var lastsel2=0; $(function(){ $('#grid').jqGrid({ height:400, url:'?module=user&act=list&isajax=1', datatype: 'json', mtype: 'POST', colNames:['ID','用户名','密码','真实姓名','联系电话', 'Email'], colModel :[ { name:'id', index:'id', width:50 }, { name:'UserName', index:'UserName', editable:true, editrules:{ required:true } }, { name:'PassWord', index:'PassWord', editable:true, edittype:'password', hidden:true, editoptions:{ size:20 }, editrules:{ edithidden:true } }, { name:'LinkMan', index:'LinkMan', editable:true, editrules:{ required:true } }, { name:'OperateTel', index:'OperateTel', align:'right', editable:true, editrules:{ required:true } }, { name:'Email', index:'Email', align:'right', editable:true, editrules:{ required:true } } ], pager: 'nav', rowNum:10, rowList:[10,20,30], sortname: 'MemberID', sortorder: "desc", viewrecords: true, imgpath: '../resources/js/jqGrid/themes/basic/images', caption: '用户管理', // multikey:'ctrlKey', multiselect:true, editurl:'?module=user&act=Update' }); //定义按键 $('#grid').navGrid('#nav',{ refresh: true, edit: true, add: true, del: true, search: true }); }); user.php Html代码 1.function onList(){ 2. $in = &$this->in; 3. $tpl = &$this->tpl; 4. $dataset = &$this->objDataSet; 5. $isAjax = $in['isajax']; 6. if($isAjax){ 7. $page = $_POST['page']; 8. $rp = $_POST['rows']; 9. $sortname = $_POST['sidx']; 10. $sortorder = $_POST['sord']; 11. $q=$in['searchField']; 12. $opr=$in['searchOper']; 13. $q_val=$in['searchString']; 14. if (!$sortname) $sortname = 'MemberID'; 15. if (!$sortorder) $sortorder = 'desc'; 16. 17. $sort = "ORDER BY $sortname $sortorder"; 18. 19. if (!$page) $page = 1; 20. if (!$rp) $rp = 10; 21. 22. $start = (($page-1) * $rp); 23. 24. $limit = "LIMIT $start, $rp "; 25. 26. $sql="select MemberID,UserName,'' as PassWord,LinkMan,OperateTel,Email from user $sort"; 27. 28. $total=$dataset->runSql("select count(*) as total from user"); 29. $total=(int)$total['total']; 30. 31. $result=$dataset->getLista($sql,$rp,$start); 32. // $this->fp->fb($result); 33. $ret="{'page':'$page','total':'".ceil($total/$rp)."','records':'$total','rows':["; 34. if (!empty($result)) { 35. 36. 37. foreach($result as $key=>$row){ 38. if($key>0)$ret.=","; 39. $ret.="{'id':'".$row[MemberID]."',"; 40. $ret.="'cell':["; 41. $i=0; 42. foreach($row as $k=>$val){ 43. if($i)$ret.=","; 44. $ret.="'".$val."'"; 45. $i++; 46. } 47. $ret.="]}"; 48. }} 49. $ret.="]}"; 50. 51. $tpl->assign('ret',$ret); 52. $tpl->display('./rep.json'); 53. }else{ 54. // $tpl->assign('entities',$result); 55. $tpl->display(SKIN_FILE.'user/list.html'); 56. } 57. } 58. function onUpdate(){ 59. $in=&$this->in; 60. 61. if ($in['oper']=='del') { 62. $this->onDelete((int)$in['id']); 63. 64. }else{ 65. $this->onInsertOrUpdate($in['oper']); 66. } 67. 68. } 69. //会员添加 70. function onInsertOrUpdate($_act='add'){ 71. $in = &$this->in; 72. $tpl = &$this->tpl; 73. $dataset = &$this->objDataSet; 74. 75. $data = array( 76. Email => trim($in[Email]), 77. OperateTel => trim($in[OperateTel]), 78. LinkMan => trim($in[LinkMan]) 79. ); 80. if (!empty($in['PassWord'])) { 81. $data['PassWord']=md5(trim($in['PassWord'])); 82. } 83. if($_act=='edit'){ 84. $MemberID = $dataset->update($data,"MemberID=".(int)$in['id'],"user"); 85. }else{ 86. $data['UserName']=$in['UserName']; 87. $data['CreateTime']=time(); 88. $MemberID = $dataset->insert($data,"user"); 89. } 90. 91. $ret=json_encode(array('succees'=>true,'msg'=>'更新成功!')); 92. $tpl->assign('ret',$ret); 93. $tpl->display('./rep.json'); 94. } 95. 96. function onDelete($_id=0){ 97. $in = &$this->in; 98. $tpl = &$this->tpl; 99. $dataset = &$this->objDataSet; 100. if ($_id==0) { 101. $_id=(int)$in['MemberID']; 102. } 103. $dataset->delete("MemberID in(0,".$_id.")",'user'); 104. $ret=json_encode(array('succees'=>true,'msg'=>'删除成功!')); 105. $tpl->assign('ret',$ret); 106. $tpl->display('./rep.json'); 107. }