乐趣区

关于easyui:easyuidatagrid的分页功能

jiezi

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 类型。
退出移动版