easyui-datagrid的分頁功能

easyui-datagrid的分頁功能

1.table

pagination爲true時，會顯示分頁欄。easyui中的數據表格須要接收
    兩個參數
    total:數據總數
    rows：數據

//  相似這種形式
 {
   "total":2000,
   "rows":[
      {"code":"A","name":"果汁","price":"20"},
      {"code":"B","name":"漢堡","price":"30"},
      {"code":"C","name":"雞柳","price":"40"},
      {"code":"D","name":"可樂","price":"50"},
      {"code":"E","name":"薯條","price":"10"},
      {"code":"F","name":"麥旋風","price":"20"},
      {"code":"G","name":"套餐","price":"100"}
   ]
}

<table class="easyui-datagrid" id="itemList" title="商品列表" 
data-options="singleSelect:false,fitColumns:true,collapsible:true,pagination:true,url:'/item/query',method:'get',pageSize:10,toolbar:toolbar">
    <thead>
        <tr>
           <th data-options="field:'ck',checkbox:true"></th>
           <th data-options="field:'id',width:60">商品ID</th>
            <th data-options="field:'title',width:200">商品標題</th>
            <th data-options="field:'cid',width:100,align:'center',formatter:KindEditorUtil.findItemCatName">葉子類目</th>
            <th data-options="field:'sellPoint',width:100">賣點</th>
            <th data-options="field:'price',width:70,align:'right',formatter:KindEditorUtil.formatPrice">價格</th>
            <th data-options="field:'num',width:70,align:'right'">庫存數量</th>
            <th data-options="field:'barcode',width:100">條形碼</th>
            <th data-options="field:'status',width:60,align:'center',formatter:KindEditorUtil.formatItemStatus">狀態</th>
            <th data-options="field:'created',width:130,align:'center',formatter:KindEditorUtil.formatDateTime">建立日期</th>
            <th data-options="field:'updated',width:130,align:'center',formatter:KindEditorUtil.formatDateTime">更新日期</th>
        </tr>
    </thead>
</table>

2.查找業務實現

2.1封裝商品數據和頁面數據

@JsonIgnoreProperties(ignoreUnknown=true) //表示JSON轉化時忽略未知屬性
@TableName("tb_item")
@Data
@Accessors(chain=true)
public class Item extends BasePojo{
   @TableId(type=IdType.AUTO)
   private Long id;            //商品id
 private String title;        //商品標題
 private String sellPoint;     //商品賣點信息
 private Long   price;        //商品價格 Long > dubbo private Integer num;         //商品數量
 private String barcode;          //條形碼
 private String image;        //商品圖片信息 1.jpg,2.jpg,3.jpg private Long   cid;             //表示商品的分類id
 private Integer status;          //1正常，2下架
 //爲了知足頁面調用需求,添加get方法
 public String[] getImages(){
      
      return image.split(",");
   }
}

/**
 * @Author WL
 * @Date 2020-9-25 17:31
 * @Version 1.0
 */
@AllArgsConstructor
@NoArgsConstructor
@Data
@Accessors(chain = true)
public class PageItem<T> implements Serializable {
    private Long total;
    private List<Item> rows;

2.2持久層Mapper

public interface ItemMapper extends BaseMapper<Item>{
    @Select("select * from tb_item limit #{page},#{rows}")
    List<Item> findAll(Integer page, Integer rows);
}

2.3業務層

public interface ItemService {
    PageItem<Item> findAll(Integer page, Integer rows);
   
}

@Service
public class ItemServiceImpl implements ItemService {
   
 @Autowired
 private ItemMapper itemMapper;
 @Override
 public PageItem<Item> findAll(Integer page,Integer rows) {
    
      List<Item> list = itemMapper.findAll(page, rows);
      long total = itemMapper.selectCount(null);
      PageItem<Item> pageItem = new PageItem<Item>();
      pageItem.setTotal(total);
      pageItem.setRows(list);
      return pageItem;
   }
}

2.4 控制層

@Controller
@RequestMapping("/item/")
public class ItemController {
   
 @Autowired
 private ItemService itemService;
 @ResponseBody
 @GetMapping("query")
   public PageItem<Item> doFindAll(HttpServletRequest request){   // 從request請求中獲取頁碼數據
 // easyUI在啓用分頁時，會額外的發送兩個參數 page:當前頁碼 rows:每頁顯示行數 名字固定
 int page = Integer.parseInt(request.getParameter("page"));
      int rows = Integer.parseInt(request.getParameter("rows"));
      PageItem<Item> all = itemService.findAll(page,rows);
      return all;
   }
}

總結

使用easyui-datagrid分頁時，須要根據page和rows搜索當前頁信息，因此須要接收客戶端傳來的頁碼信息所以寫sql語句時要注意使用limit，另外從request取得的page和rows是String類型的，須要使用Integer.parseInt轉換爲int類型。