@Controller @RequestMapping("/department") public class DepartmentController { @Resource private DepartmentService departmentService; private OutPutTool OutPutTool = new OutPutTool(); @RequestMapping("selectAll") public String select(@RequestParam(value="page",required=false) String page,@RequestParam(value="rows",required=false) String rows,Department department,HttpServletResponse res) throws IOException{ int start=(Integer.parseInt(page)-1)*Integer.parseInt(rows); int pagesize=Integer.parseInt(rows); Map<String,Object> map=new HashMap<String,Object>(); map.put("start", start); map.put("size", pagesize); List<Department> list=departmentService.selectAll(map); int totl=departmentService.count(); JsonPublic jsonPublic=new JsonPublic(); jsonPublic.setRows(list); jsonPublic.setTotal(totl); OutPutTool.successOutJson(res, jsonPublic); return null; }
easyui datagrid 空間封裝的很好，對分頁的操作 ，前端會自然地出來 page 和rows值
返回的json符合頁面的格式即可
<script type="text/javascript"> $(function(){ /** * 對於form表單的驗證 */ //數值驗證組件 $('#age').numberbox({ min:0 , max:150 , required:true , missingMessage:'年齡必填!' , precision:0 }); //日期組件 $('#birthday').datebox({ required:true , missingMessage:'生日必填!' , editable:false }); $('#salary').numberbox({ min:1000 , max:20000 , required:true , missingMessage:'薪水必填!' , precision:2 }); //日期時間組件 $('#startTime,#endTime').datetimebox({ required:true , missingMessage:'時間必填!' , editable:false }); var flag ; //undefined 判斷新增和修改方法 /** * 初始化數據表格 */ $('#t_dept').datagrid({ idField:'id' , //只要創建數據表格 就必須要加 ifField title:'部門管理' , //width:1300 , fit:false, //height:450 , url:'department/selectAll' , fitColumns:true , striped: true , //隔行變色特性 //nowrap: false , //折行顯示 為true 顯示在一會 loadMsg: '數據正在加載,請耐心的等待...' , rownumbers:true , //singleSelect:true , //單選模式 //remoteSort: false , //sortName: 'salary' , //sortOrder: 'desc' , rowStyler: function(index ,record){ if(record.age > 25){ return "background:red"; } // console.info(index); // console.info(record); } , frozenColumns:[[ //凍結列特性 ,不要與fitColumns 特性一起使用 { field:'ck' , width:50 , checkbox: true } ]], columns:[[ { field:'id' , title:'部門編號' , width:100 , }, { field:'departmentname' , title:'部門名稱' , width:100 , align:'center' , styler:function(value , record){ if(value == 'admin'){ return 'background:blue;'; } } }, { field:'telephonenum' , title:'聯系電話' , width:100 , },{ field:'faxnum' , title:'傳真號碼' , width:100 , sortable : true } ]] , pagination: true , pageSize: 10 , pageList:[5,10,15,20,50] , toolbar:[ { text:'新增部門' , iconCls:'icon-add' , handler:function(){ flag = 'add'; $('#mydialog').dialog({ title:'新增部門' }); //$('#myform').find('input[name!=sex]').val(""); $('#myform').get(0).reset(); //$('#myform').form('clear'); $('#mydialog').dialog('open'); } },{ text:'修改部門' , iconCls:'icon-edit' , handler:function(){ flag = 'edit'; var arr =$('#t_dept').datagrid('getSelections'); if(arr.length != 1){ $.messager.show({ title:'提示信息!', msg:'只能選擇一行記錄進行修改!' }); } else { $('#mydialog').dialog({ title:'修改用戶' }); $('#mydialog').dialog('open'); //打開窗口 $('#myform').get(0).reset(); //清空表單數據 $('#myform').form('load',{ //調用load方法把所選中的數據load到表單中,非常方便 id:arr[0].id , username:arr[0].username , password:arr[0].password , sex:arr[0].sex , age:arr[0].age , birthday:arr[0].birthday , city:arr[0].city , salary:arr[0].salary , startTime:arr[0].startTime, endTime:arr[0].endTime , description:arr[0].description }); } } },{ text:'刪除部門' , iconCls:'icon-remove' , handler:function(){ var arr =$('#t_dept').datagrid('getSelections'); if(arr.length <=0){ $.messager.show({ title:'提示信息!', msg:'至少選擇一行記錄進行刪除!' }); } else { $.messager.confirm('提示信息' , '確認刪除?' , function(r){ if(r){ var ids = ''; for(var i =0 ;i<arr.length;i++){ idss.push(arr[i].id); } var id = idss.join(","); $.post('department/delete' , {id:id} , function(result){ //1 刷新數據表格 $('#t_dept').datagrid('reload'); //2 清空idField $('#t_dept').datagrid('unselectAll'); //3 給提示信息 $.messager.show({ title:'提示信息!' , msg:'操作成功!' }); }); } else { return ; } }); } } },{ text:'查詢部門' , iconCls:'icon-search' , handler:function(){ $('#lay').layout('expand' , 'north'); } } ] }); /** * 提交表單方法 */ $('#btn1').click(function(){ if($('#myform').form('validate')){ $.ajax({ type: 'post' , url: flag=='add'?'department/insert':'department/update' , cache:false , data:$('#myform').serialize() , dataType:'json' , success:function(result){ //1 關閉窗口 $('#mydialog').dialog('close'); //2刷新datagrid $('#t_dept').datagrid('reload'); //3 提示信息 $.messager.show({ title:result.status , msg:result.message }); } , error:function(result){ $.meesager.show({ title:result.status , msg:result.message }); } }); } else { $.messager.show({ title:'提示信息!' , msg:'數據驗證不通過,不能保存!' }); } }); /** * 關閉窗口方法 */ $('#btn2').click(function(){ $('#mydialog').dialog('close'); }); $('#searchbtn').click(function(){ $('#t_dept').datagrid('load' ,serializeForm($('#mysearch'))); }); $('#clearbtn').click(function(){ $('#mysearch').form('clear'); $('#t_dept').datagrid('load' ,{}); }); }); //js方法：序列化表單 function serializeForm(form){ var obj = {}; $.each(form.serializeArray(),function(index){ if(obj[this['name']]){ obj[this['name']] = obj[this['name']] + ','+this['value']; } else { obj[this['name']] =this['value']; } }); return obj; } </script>
頁面這樣寫即可 ，返回的json格式
{"code":0,"rows":[{"departmentname":"開發部","faxnum":"88888888","id":1,"telephonenum":"88888888"},{"departmentname":"人事部門","faxnum":"88888888","id":2,"telephonenum":"88888888"},{"departmentname":"財務部","faxnum":"88888888","id":3,"telephonenum":"88888888"}],"total":6}
希望此文對大家有所幫助