spring3 mvc jquery easyui datagrid json

nhy520

浏览: 959933 次
性别:
来自: 北京

最近访客更多访客>>

yunzhu

k0521klb

remote_silence

prog

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

MVC jQuery json CSS Bean

通过maven pom.xml引入包

<dependency>
            <groupId>org.codehaus.jackson</groupId>
            <artifactId>jackson-core-asl</artifactId>
        </dependency>

        <dependency>
            <groupId>org.codehaus.jackson</groupId>
            <artifactId>jackson-mapper-asl</artifactId>
        </dependency>

版本为1.0.0

注意不能同时引用多个版本的jar包。

在spring mvc 配置文件中加入

<bean id="messageAdapter"
        class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
        <property name="messageConverters">
            <util:list>
                <bean
                    class="org.springframework.http.converter.StringHttpMessageConverter" />
                <bean
                    class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter" />
            </util:list>
        </property>
    </bean>

控制层

@RequestMapping("/g/getItems")
    @ResponseBody
    public Map<String, Object> getItems(){
        log.info("firstIndex:"+firstindex);
        log.info("maxresult:"+maxresult);
        QueryResult<AskOne> r = resourcesService.getScrollData(AskOne.class,
                firstindex, maxresult);
        List<AskOne> items = r.getResultlist();
        if(items!=null&&items.size()>0){
            for(AskOne a : items){
                String title = a.getAskTitle();
                if(title!=null&&title.length()>30){
                    title = title.substring(0, 30);
                    a.setAskTitle(title);
                }
            }
        }
        long total = r.getTotalrecord();
        Map<String, Object> result = new HashMap<String, Object>();
        result.put("total", total);
        result.put("rows", items);
        return result;

    }

页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>资源列表_资源管理_问个够</title>
    <link rel="stylesheet" type="text/css" href="../resources/js/jquery/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../resources/js/jquery/easyui/themes/icon.css">
    <script type="text/javascript" src="../resources/js/jquery/easyui/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="../resources/js/jquery/easyui/jquery.easyui.min.js"></script>
    <script>
        $(function(){
            $('#resource').datagrid({
                title:'资源数据列表',
                width:1024,
                height:450,
                nowrap: false,
                striped: true,
                collapsible:true,
                url:'/g/getItems',
                sortName: 'code',
                sortOrder: 'desc',
                remoteSort: false,
                idField:'id',
                loadMsg:'正在加载....',
                frozenColumns:[[
                    {field:'ck',checkbox:true},
                    {title:'全选',field:'code',width:80,sortable:true}
                ]],
                columns:[[
                    {title:'基本数据信息',colspan:3},
                    {field:'opt',title:'操作',width:120,align:'center', rowspan:2,
                        formatter:function(value,rec){
                            return '<span style="color:red"><a href=\"#\">查看</a> 编辑删除</span>';
                        }
                    }
                ],[
                    {field:'askTitle',title:'问答主题',width:360},
                    {field:'keyword',title:'关键词',width:120,rowspan:2,sortable:true,
                        sorter:function(a,b){
                            return (a>b?1:-1);
                        }
                    },
                    {field:'askPerson',title:'提问人',width:120
                    }
                ]],
                pagination:true,//是否显示分页工具栏
                rownumbers:true,
                toolbar:[{
                    id:'btnadd',
                    text:'添加',
                    iconCls:'icon-add',
                    handler:function(){
                        $('#btnsave').linkbutton('enable');
                        alert('add')
                    }
                },{
                    id:'btncut',
                    text:'Cut',
                    iconCls:'icon-cut',
                    handler:function(){
                        $('#btnsave').linkbutton('enable');
                        alert('cut')
                    }
                },'-',{
                    id:'btnsave',
                    text:'Save',
                    disabled:true,
                    iconCls:'icon-save',
                    handler:function(){
                        $('#btnsave').linkbutton('disable');
                        alert('save')
                    }
                }]
            });
            var p = $('#resource').datagrid('getPager');
            if (p){
                $(p).pagination({
                    onBeforeRefresh:function(){
                        alert('before refresh');
                    }
                });
            }
        });
        function resize(){
            $('#resource').datagrid('resize', {
                width:1024,
                height:400
            });
        }
        function getSelected(){
            var selected = $('#resource').datagrid('getSelected');
            if (selected){
                alert(selected.code+":"+selected.name+":"+selected.addr+":"+selected.col4);
            }
        }
        function getSelections(){
            var ids = [];
            var rows = $('#resource').datagrid('getSelections');
            for(var i=0;i<rows.length;i++){
                ids.push(rows[i].code);
            }
            alert(ids.join(':'));
        }
        function clearSelections(){
            $('#resource').datagrid('clearSelections');
        }
        function selectRow(){
            $('#resource').datagrid('selectRow',2);
        }
        function selectRecord(){
            $('#resource').datagrid('selectRecord','002');
        }
        function unselectRow(){
            $('#resource').datagrid('unselectRow',2);
        }
        function mergeCells(){
            $('#resource').datagrid('mergeCells',{
                index:2,
                field:'addr',
                rowspan:2,
                colspan:2
            });
        }
    </script>
</head>
<body>
    <table id="resource"></table>

</body>
</html>