关于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;
    }
}