2012-06-22 3 views
1

Я конвертировал Java-сервлет на основе webapp как средство изучения Spring. У меня есть JSP, где печатается большая таблица данных. Я использую функцию Spring Controller для возврата большой толстой строки данных, заключенных в строки таблицы HTML, в JSP, где она депонирована в прокручивающийся div.Spring 3.1 и JQuery EasyUI DataGrid: отправка списка HashMaps, примеров?

Вместо этого я хотел бы использовать JQuery EasyUI DataGrid, но я также новичок в Ajax, JQuery и JSON, так что я немного почесываю голову о том, как это сделать.

Это пример того, как вы могли бы создать пустую таблицу и заголовки столбцов с JQuery EasyUI DataGrid:

<table id="tt" title="Frozen Columns" class="easyui-datagrid" style="width:500px;height:250px" 
      url="data/datagrid_data.json" 
      singleSelect="true" iconCls="icon-save"> 
     <thead frozen="true"> 
      <tr> 
       <th field="itemid" width="80">Item ID</th> 
       <th field="productid" width="80">Product ID</th> 
      </tr> 
     </thead> 
     <thead> 
      <tr> 
       <th field="listprice" width="80" align="right">List Price</th> 
       <th field="unitcost" width="80" align="right">Unit Cost</th> 
       <th field="attr1" width="150">Attribute</th> 
       <th field="status" width="60" align="center">Stauts</th> 
      </tr> 
     </thead> 
    </table> 

и это, как вы подключите ваш стол в яваскрипта функциональность:

$('#tt').datagrid({ 
     title:'Frozen Columns', 
     iconCls:'icon-save', 
     width:500, 
     height:250, 
     url:'data/datagrid_data.json', 
     frozenColumns:[[ 
      {field:'itemid',title:'Item ID',width:80}, 
      {field:'productid',title:'Product ID',width:80}, 
     ]], 
     columns:[[ 
      {field:'listprice',title:'List Price',width:80,align:'right'}, 
      {field:'unitcost',title:'Unit Cost',width:80,align:'right'}, 
      {field:'attr1',title:'Attribute',width:100}, 
      {field:'status',title:'Status',width:60} 
     ]] 
    }); 

Мой первый вопрос, в приведенном выше примере, в атрибуте «URL» бы я поставить URL, как «/ getTabularData», что в свою очередь, будет отображаться на функции в Spring 3.1 контроллер? Если да, то что бы заставить DataGrid отправлять запрос на этот URL (документация немного минималистична).

К моему пониманию DataGrid потребуется строки данных, обернутых как этого

{"total":28,"rows":[ 
    {"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":16.50,"attr1":"Large","itemid":"EST-1"}, 
    {"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"}, 
    {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Venomless","itemid":"EST-11"}, 
    {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Rattleless","itemid":"EST-12"}, 
    {"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Green Adult","itemid":"EST-13"}, 
    {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":58.50,"attr1":"Tailless","itemid":"EST-14"}, 
    {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"With tail","itemid":"EST-15"}, 
    {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Female","itemid":"EST-16"}, 
    {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Male","itemid":"EST-17"}, 
    {"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":193.50,"attr1":"Adult Male","itemid":"EST-18"} 
]} 

Это форматирование JSon?

Я нашел только 1 - 2 Краткое описание примеры весны 3.1. Метод контроллера, отправляющий данные как JSON. В принципе, единственное отличие заключается в том, что у возвращаемого типа будет @ResponseBody. Я нашел это Spring Source Blog Entry, но, будучи таким новым, как я, это только вне досягаемости моего понимания. Существуют ли другие URL-адреса, которые будут более подробно касаться получения JSON от Spring?

Прямо сейчас, мое приложение, извлекает данные из нашей базы данных в виде списка связанных ссылок, которые затем отбрасываются в домашнюю функцию, чтобы перебирать эту привязку каждого LinkedHashMap в HTML TR, конкретизируя все это в StringBuffer.

Если бы я использовал JQuery EasyUI DataGrid, то был бы хорошим подходом для моего списка объектов LinkedHashMap objs, введя его в JSON и получив его от Spring до jsp и в DataGrid.

Мне очень неинтересно задавать такой большой вопрос «покажи мне, как», но я не смог найти больше, чем крошечные фрагменты информации через Google, и я новичок во всех вещах, которые я использую.

Спасибо большое заранее за любую помощь Хороших выходных

Steve

ответ

1

Вы очень близки к «получить его». Единственное, чего вам не хватает, это то, что нужно вернуть из вашего метода контроллера (который создает JSON). This blog article дает хороший пример того, что вам нужно сделать.

В вашем случае, вам нужно создать два Java Beans, что Митник вывод JSON, что DataGrid ожидает:

public class ResultSet { 
    private long total; 
    private List<ResultRow> rows; 
    // getters & setters, etc 
} 

public class ResultRow { 
    private Int productid; 
    private Float unitcost; 
    private String status; 
    private Float listprice; 
    private String attr1; 
    // getters & setters, etc 
} 

Таким образом, ваш метод контроллера будет иметь тип возврата ResultSet и будет заселить ResultRow сек и ResultSet из некоторого поиска DB и т. д. Затем Джексон делает свою магию для «маршалла» в JSON (через аннотацию @ResponseBody).

+0

Это сработало, спасибо большое. Как вы или автор статьи в блоге знали, что данные должны были быть обернуты в pojos, таким образом? – Steve

+0

Посмотрите на JSON, которого вы ожидали, сказали, что это невозможно сделать с помощью простой коллекции Java ... если вывод был только частью «строк», вы могли бы использовать List of LinkedHashMaps. – nickdos

Смежные вопросы