共计 7062 个字符，预计需要花费 18 分钟才能阅读完成。
表格数据的展示形式
编辑页面
</script>-->
<table class="easyui-datagrid" style="width:500px;height:300px" data-options="url:'datagrid_data.json',method:'get',fitColumns:true,singleSelect:true,pagination:true">
<thead>
<tr>
<th data-options="field:'code',width:100">Code</th>
<th data-options="field:'name',width:100">Name</th>
<th data-options="field:'price',width:100,align:'right'">Price</th>
</tr>
</thead>
</table> 返回值类型的阐明
属性信息：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"}
]
}JSON 的简略介绍
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格局。它使得人们很容易的进行浏览和编写。
Object 对象类型
Array 格局
嵌套格局
例如：
{"id":"100","hobbys":["玩游戏","敲代码","看动漫"],"person":{"age":"19","sex":["男","女","其余"]}}编辑 EasyUITable 的 VO 对象
package com.jt.vo;
import com.jt.pojo.Item;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;
import java.util.List;
@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class EasyUITable {
private Long total;
private List<Item> rows;
}商品列表展示
页面剖析
阐明: 当用户点击列表按钮时. 以跳转到 item-list.jsp 页面中. 会解析其中的 EasyUI 表格数据. 发动申请 url:’/item/query’
要求返回值必须满足特定的 JSON 构造, 所以采纳 EasyUITable 办法进行数据返回.
<table class="easyui-datagrid" id="itemList" title="商品列表"
data-options="singleSelect:false,fitColumns:true,collapsible:true,pagination:true,url:'/item/query',method:'get',pageSize:20,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>申请门路的阐明
申请门路: /item/query
参数: page=1 以后分页的页数.
rows = 20 以后分页行数.
当应用分页操作时, 那么会主动的拼接 2 个参数. 进行分页查问.
编辑 ItemController
@RestController// 因为 ajax 调用，采纳 JSON 串返回
@RequestMapping("/item")
public class ItemController {
@Autowired
private ItemService itemService;
/**
* url:http://localhost:8091/item/query?page=1&rows=20 * 申请参数：* page=1 以后分页的页数
* row=20 以后分页的行数
* 返回值后果：EasyUITable
* */ @RequestMapping("/query")
public EasyUITable findItemByPage(Integer page, Integer rows){return itemService.findItemByPage(page,rows);
}编辑 ItemServiceImpl
@Service
public class ItemServiceImpl implements ItemService {
@Autowired
private ItemMapper itemMapper;
/**
* 分页查问商品信息
* Sql 语句: 每页 20 条
* select * from tb_item limit 起始地位, 查问的行数
* 查问第一页
* select * from tb_item limit 0,20; [0-19]
* 查问第二页
* select * from tb_item limit 20,20; [20,39]
* 查问第三页
* select * from tb_item limit 40,20; [40,59]
* 查问第 N 页
* select * from tb_item limit (n-1)*rows,rows;
*
*
* @param rows
* @return
*/
@Override
public EasyUITable findItemByPage(Integer page, Integer rows) {
//1. 手动实现分页操作
int startIndex = (page-1) * rows;
//2. 数据库记录
List<Item> itemList = itemMapper.findItemByPage(startIndex,rows);
//3. 查询数据库总记录数
Long total = Long.valueOf(itemMapper.selectCount(null));
//4. 将数据库记录 封装为 VO 对象
return new EasyUITable(total,itemList);
//MP
}
}
页面成果展示
参数格式化阐明
商品价格格式化阐明
1). 页面属性阐明
当数据在进行展示时, 会通过 formatter 关键字之后进行数据格式化调用. 具体的函数为 KindEditorUtil.formatPrice 函数.
<th data-options="field:'price',width:70,align:'right',formatter:KindEditorUtil.formatPrice"> 价格 </th>
2). 页面 JS 剖析
// 格式化价格 val="数据库记录" 展示的应该是放大 100 倍的数据
formatPrice : function(val,row){return (val/100).toFixed(2);
},格式化状态信息
1). 页面标识
<th data-options="field:'status',width:60,align:'center',formatter:KindEditorUtil.formatItemStatus"> 状态 </th>2). 页面 JS 剖析
// 格式化商品的状态
formatItemStatus : function formatStatus(val,row){if (val == 1){return '<span style="color:green;"> 失常 </span>';} else if(val == 2){return '<span style="color:red;"> 下架 </span>';} else {return '未知';}
},格式化叶子类目
页面剖析
阐明: 依据页面标识, 要在列表页面中展示的是商品的分类信息. 后端数据库只传递了 cid 的编号. 咱们应该展示的是商品分类的名称. 不便用户应用…
<th data-options="field:'cid',width:100,align:'center',formatter:KindEditorUtil.findItemCatName"> 叶子类目 </th>
页面 js 剖析
// 格式化名称 val=cid 返回商品分类名称
findItemCatName : function(val,row){
var name;
$.ajax({
type:"get",
url:"/item/cat/queryItemName", //
data:{itemCatId:val},
cache:true, // 缓存
async:false, // 示意同步 默认的是异步的 true
dataType:"text",// 示意返回值参数类型
success:function(data){name = data;}
});
return name;
}编辑 ItemCatPOJO 对象
@TableName("tb_item_cat")
@Data
@Accessors(chain = true)
public class ItemCat extends BasePojo{@TableId(type = IdType.AUTO)
private Long id;
private Long parentId;
private String name;
private Integer status;
private Integer sortOrder;
private Boolean isParent; // 数据库进行转化
}编辑 ItemCatController
@RequestMapping("/item/cat")
public class ItemCatController {
@Autowired
private ItemCatService itemCatService;
/**
* url 地址:/item/cat/queryItemName
* 参数: {itemCatId:val}
* 返回值: 商品分类名称
*/
@RequestMapping("/queryItemName")
public String findItemCatNameById(Long itemCatId){
// 依据商品分类 Id 查问商品分类对象
ItemCat itemCat = itemCatService.findItemCatById(itemCatId);
return itemCat.getName(); // 返回商品分类的名称}
}编辑 ItemCatServiceImpl
@Service
public class ItemCatSercviceImpl implements ItemCatService{
@Autowired
private ItemCatMapper itemCatMapper;
@Override
public ItemCat findItemCatById(Long itemCatId) {return itemCatMapper.selectById(itemCatId);
}页面成果展示
对于 Ajax 嵌套问题阐明
问题形容
当将 ajax 改为异步时，发现用户的申请数据不能失常的响应。
// 格式化名称 val=cid 返回商品分类名称
findItemCatName : function(val,row){
var name;
$.ajax({
type:"get",
url:"/item/cat/queryItemName",
data:{itemCatId:val},
//cache:true, // 缓存
async:true, // 示意同步 默认的是异步的 true
dataType:"text",// 示意返回值参数类型
success:function(data){name = data;}
});
return name;
},
问题剖析
商品的列表中发动 2 次 ajax 申请
1).
data-options="singleSelect:false,fitColumns:true,collapsible:true,pagination:true,url:'/item/query',method:'get',pageSize:20,toolbar:toolbar">
2).ajax 申请
解决方案
阐明：个别条件下的 ajax 嵌套会将外部的 ajax 设置为同步的调用，不然可能会因为 url 调用的时间差导致数据展示不齐全的景象。
对于端口号占用问题
对于我的项目中 common.js 引入问题
阐明：个别会将整夜页面的 JS 通过某个页面进行标识，之后被其余的页面援用即可，不便当前的 JS 的切换。
1). 引入 xxx.js 页面
2). 页面引入 JS
MybatisPlus 实现分页操作
编辑 ItemService
// 应用 MP 形式实现分页操作：@Override
public EasyUITable findItemByPage(Integer page, Integer rows) {QueryWrapper queryWrapper=new QueryWrapper();
queryWrapper.orderByDesc("updated");
// 临时之封装了两个数据 页数 / 条数
IPage<Item> iPage=new Page<>(page,rows);
//MP 传递了对应的参数，则分页就会在外部实现，返回分页对象
iPage=itemMapper.selectPage(iPage, queryWrapper);
// 获取分页的总记录数
Long total=iPage.getTotal();
// 获取分页的后果
List<Item> list=iPage.getRecords();
return new EasyUITable(total,list);
}编辑配置类
@Configuration // 标识我是一个配置类
public class MyBatisPlusConfig {
//MP 是 Mybatis 加强的一种工具 关键点在 limit 分页上，只有是分页就要用 MP 中分页拦截器的操作
@Bean
public PaginationInterceptor paginationInterceptor() {PaginationInterceptor paginationInterceptor = new PaginationInterceptor();
// 设置申请的页面大于最大页后操作，true 调回到首页，false 持续申请 默认 false
// paginationInterceptor.setOverflow(false); // 设置最大单页限度数量，默认 500 条，-1 不受限制
// paginationInterceptor.setLimit(500);
// 开启 count 的 join 优化, 只针对局部 left join paginationInterceptor.setCountSqlParser(new JsqlParserCountOptimize(true));
return paginationInterceptor;
}
}正文完