弹簧3与jqgrid,我试图从控制器加载数据到选择选项,无法填充

时间:2012-10-12 20:21:40

标签: jqgrid

我正在使用带有jqgrid的spring 3一切正常工作,除了从控制器加载数据到select选项我尝试加载到jsion Array对象并发送到jsp页面但是我无法加载值来选择选项使用

(editoptions: {dataUrl:"location/role.do")

请查看我的代码并帮助我

我的控制器类

@Controller
@RequestMapping("/location")
public class AddCenterLocation {

    @Autowired
    private RecoupService recoupService;

    @RequestMapping(method = RequestMethod.GET)
    public @ResponseBody
    CustomCenterLocationResponse getAll() {
        List<? extends CenterLocation> users = recoupService.getCenter();
        response.setRows(users);
        response.setRecords(String.valueOf(users.size()));
        response.setPage("1");
        response.setTotal("10");
        return response;
    }

    @RequestMapping(value = "/role", method = RequestMethod.GET)
    public @ResponseBody
    CustomGenericResponse role(HttpServletRequest request, HttpServletResponse response) {
        JSONObject jsonArray = new JSONObject();
        try {
            List<CenterLocation> users = recoupService.getCenter();
            for (CenterLocation harbour : users) {
                jsonArray.put(harbour.getCenterId(), harbour.getCenterAddress());
            }
            response.getWriter().write(jsonArray.toString());
        } catch (Exception exception) {
            System.out.println("error is " + exception);
        }
        return null;

    }

这是我的jsp页面

jq(function() {
    jq("#grid").jqGrid({
        url:'location.do',
        datatype: 'json',
        mtype: 'GET',
        colNames:['Id', 'Center Name', 'Address','Country','State','City','Pin Code','Land Line No','Mobile No','Role'],
        colModel:[
            {name:'id',index:'id', width:55,editable:false,editoptions:{readonly:true,size:10},hidden:true},
            {name:'centerName',index:'centerName', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}},
            {name:'centerAddress',index:'centerAddress', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}},
            {name:'centerCountry',index:'centerCountry', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}},
            {name:'centerState',index:'centerState', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}},
            {name:'centerCity',index:'centerCity', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}},
            {name:'centerPinCode',index:'centerPinCode', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}},
            {name:'landLineNo',index:'landLineNo', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}},
            {name:'mobileNo',index:'mobileNo', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}},
            { name: 'Slger', index: 'Slger', editable: true, edittype: "select",
                editoptions: {dataUrl:"location/role.do",
                    buildSelect: function (data) {
                        var response = jQuery.parseJSON(data.responseText);
                        var s = '<select>';
                        if (response && response.length) {
                            for (var i = 0, l = response.length; i < l; i++) {
                                var ri = response[i];
                                s += '<option value="' + ri + '">' + ri + '</option>';
                            }
                        }
                        return s + "</select>";
                    }
                }
            }

        ],
        postData: { 

        },
        rowNum:20,
        rowList:[20,40,60],
        height: 400,
        autowidth: true,
        rownumbers: true,
        pager: '#pager',
        sortname: 'id',
        viewrecords: true,
        sortorder: "asc",
        caption:"Users",
        emptyrecords: "Empty records",
        loadonce: false,
        loadComplete: function() {
        },
        jsonReader : {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            cell: "cell",
            id: "id"
        }
    });
    jq("#grid").jqGrid('navGrid','#pager',
    {edit:false,add:false,del:false,search:true},
    { },
    { },
    { }, 
    { 
        sopt:['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'],
        closeOnEscape: true, 
        multipleSearch: true, 
        closeAfterSearch: true }
);



    jq("#grid").navButtonAdd('#pager',
    {   caption:"Add", 
        buttonicon:"ui-icon-plus", 
        onClickButton: addRow,
        position: "last", 
        title:"", 
        cursor: "pointer"
    } 
);

    jq("#grid").navButtonAdd('#pager',
    {   caption:"Edit", 
        buttonicon:"ui-icon-pencil", 
        onClickButton: editRow,
        position: "last", 
        title:"", 
        cursor: "pointer"
    } 
);

    jq("#grid").navButtonAdd('#pager',
    {   caption:"Delete", 
        buttonicon:"ui-icon-trash", 
        onClickButton: deleteRow,
        position: "last", 
        title:"", 
        cursor: "pointer"
    } 
);

    jq("#btnFilter").click(function(){
        jq("#grid").jqGrid('searchGrid',
        {multipleSearch: false, 
            sopt:['eq']}
    );
    });

    // Toolbar Search
    jq("#grid").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : true, defaultSearch:"cn"});

});

1 个答案:

答案 0 :(得分:0)

首先将jackson lib导入lib文件夹,以便将json数据发送到jsp页面。 然后 创建两个pojo类,这仅用于演示,您可以根据需要进行更改

公共课位置{

列出角色;

 //setter getter

}

公共类角色 {

private String id;
private String name;

// setter getter

}

这是控制器请求

@RequestMapping(value =“/ role”,method = RequestMethod.GET)

public @ResponseBody
Location role(HttpServletResponse response) {

    System.out.println("name");
    Location shop = new Location();
    List<Role> list = new ArrayList<Role>();
    Role role = new Role();
    role.setId("abc");
    role.setName("abc");
    list.add(role);
    Role role1 = new Role();
    role1.setId("abc1");
    role1.setName("abc1");
    list.add(role1);
    shop.setRole(list);
    return shop;

}

jsp页面

修改jqgrid的选择部分

{ name: 'name', index: 'name', editable: true, edittype: "select",
 editoptions: {dataUrl:"location/role.do", 
buildSelect: function (role) 
{ 
var data = jQuery.parseJSON(role); 
var s = '<select>'; 
for (var i = 0; i < data.role.length; i++) {
 s += '<option value="' + data.role[i].id + '">' + data.role[i].name + '</option>'; 
} 
return s + "</select>"; 
} 
} 
}

它会运行良好