码迷,mamicode.com
首页 > 编程语言 > 详细

easyui +springMVC+MyBatis datagrid分页

时间:2016-07-29 18:47:50      阅读:473      评论:0      收藏:0      [点我收藏+]

标签:

@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}

希望此文对大家有所帮助

easyui +springMVC+MyBatis datagrid分页

标签:

原文地址:http://www.cnblogs.com/jinxinblogs/p/5719107.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!