关于javascript:商品后台表格数据的展现方式

表格数据的展示形式

编辑页面

</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;
    }
}