@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}
希望此文对大家有所帮助
时间： 2024-10-13 11:38:10