如何在春季显示jqxGrid

Question

我必须使用spring.I实现jqxGrid，我不知道如何在spring.Below上实现它，这是我的控制器类AccountController.java：

@Controller
@RequestMapping(value="/account")
public class AccountsController {
@Autowired
private AccountService accountService;
@RequestMapping(value = "/list", method = RequestMethod.GET, headers = 
 "Accept=application/json")
public @ResponseBody ModelAndView listOfAccounts() {
    ModelAndView modelAndView = new ModelAndView();

    List<Accounts> accounts = accountService.getAccounts();
    modelAndView.addObject("accounts", accounts);

    return modelAndView;


}

 }

我认为从Accounts.java类检索的json数据格式如下：

[{"id":"1","PeriodName":2000-2001,"PeriodStartDate":"2000-01-01","PeriodEndDate":"2001-12-31"},{"id":"2","PeriodName":2001-2002,"PeriodStartDate":"2001-01-01","PeriodEndDate":"2002-12-31"}]

下面是jquery对json响应的请求和获取jqxGrid的代码：

$.get('account/list',function(responseJson) {

             var data = responseJson;
             var source =
                {     
                    datatype: "json",
                    datafields: [
                        { name: 'id' },
                        { name: 'PeriodName' },
                        { name: 'PeriodStartDate' },
                        { name: 'PeriodEndDate' }
                    ],
                    id: 'id',
                    localdata: data
                };

            var dataAdapter = new $.jqx.dataAdapter(source);
 $("#jqxgrid").jqxGrid(
        {
            //columnsresize: true,
            width: 800,
            source: dataAdapter,
            pageable: true,
            //pagerButtonsCount: 10,
            autoheight: true,
           // editable: false,
            pagerrenderer: pagerrenderer,
            columns: [
              { text: 'Period Name', datafield: 'PeriodName', width: 200 },
              { text: 'Start Date', datafield: 'PeriodStartDate', width: 200 },
              { text: 'End Date', datafield: 'PeriodEndDate', width: 200 }
            ]
        });
 });

我不知道上面的代码哪里有问题，我已经导入了用于jqxGrid.Please的所有js文件，帮助我解决了这个问题

Answer 1

*我查看了您的问题，这里是相同的代码(小修改)。注释:页面anywhere代码.You没有在任何地方定义分页器函数。看起来不错。这是工作代码http://jsfiddle.net/qwm3z/。

     responseJson = <c:out value="${accounts}" />;

     var data = responseJson;

      var source =
                {     
                    datatype: "json",
                    datafields: [
                        { name: 'id' },
                        { name: 'PeriodName' },
                        { name: 'PeriodStartDate' },
                        { name: 'PeriodEndDate' }
                    ],
                    id: 'id',
                    localdata: data
                };
            var dataAdapter = new $.jqx.dataAdapter(source);
 $("#jqxgrid").jqxGrid(
        {
            //columnsresize: true,
            width: 800,
            source: dataAdapter,
            pageable: true,
            //pagerButtonsCount: 10,
            autoheight: true,
           // editable: false,
           // pagerrenderer: pagerrenderer,
            columns: [
              { text: 'Period Name', datafield: 'PeriodName', width: 200 },
              { text: 'Start Date', datafield: 'PeriodStartDate', width: 200 },
              { text: 'End Date', datafield: 'PeriodEndDate', width: 200 }
            ]
        });

你为什么要在每个响应中建立网格呢？您可以做一次，并对每个get请求进行更新。