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

44次阅读

共计 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(JavaScript Object Notation) 是一种轻量级的数据交换格局。它使得人们很容易的进行浏览和编写。

例如：

    {"id":"100","hobbys":["玩游戏","敲代码","看动漫"],"person":{"age":"19","sex":["男","女","其余"]}}

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 个参数. 进行分页查问.

@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);
   }

@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>

 // 格式化名称  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;
    }

@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;  // 数据库进行转化

}

@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();   // 返回商品分类的名称}

}

@Service
public class ItemCatSercviceImpl implements ItemCatService{
   @Autowired
 private ItemCatMapper itemCatMapper;
    @Override
 public ItemCat findItemCatById(Long itemCatId) {return itemCatMapper.selectById(itemCatId);
    }

当将 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 调用的时间差导致数据展示不齐全的景象。

阐明：个别会将整夜页面的 JS 通过某个页面进行标识，之后被其余的页面援用即可，不便当前的 JS 的切换。
1). 引入 xxx.js 页面

2). 页面引入 JS

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

正文完

javascript

发表至： javascript

2020-11-04

0

简单实现-PromisesA-规范

关于javascript:特皮技术团队一年经验菜鸟前端眼中的异步编程

LeetCode48旋转图像-JavaScript

关于javascript:JS-原型链

关于c++:CC永不过时的语言-数据结构完整版通俗易懂

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

表格数据的展示形式

编辑页面

返回值类型的阐明

JSON 的简略介绍

Object 对象类型

Array 格局

嵌套格局

编辑 EasyUITable 的 VO 对象

商品列表展示

页面剖析

申请门路的阐明

编辑 ItemController

编辑 ItemServiceImpl

页面成果展示

参数格式化阐明

商品价格格式化阐明

格式化状态信息

格式化叶子类目

页面剖析

页面 js 剖析

编辑 ItemCatPOJO 对象

编辑 ItemCatController

编辑 ItemCatServiceImpl

页面成果展示

对于 Ajax 嵌套问题阐明

问题形容

问题剖析

解决方案

对于端口号占用问题

对于我的项目中 common.js 引入问题

MybatisPlus 实现分页操作

编辑 ItemService

编辑配置类

Just My Socks（注册教程内含优惠码）

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

表格数据的展示形式

编辑页面

返回值类型的阐明

JSON 的简略介绍

Object 对象类型

Array 格局

嵌套格局

编辑 EasyUITable 的 VO 对象

商品列表展示

页面剖析

申请门路的阐明

编辑 ItemController

编辑 ItemServiceImpl

页面成果展示

参数格式化阐明

商品价格格式化阐明

格式化状态信息

格式化叶子类目

页面剖析

页面 js 剖析

编辑 ItemCatPOJO 对象

编辑 ItemCatController

编辑 ItemCatServiceImpl

页面成果展示

对于 Ajax 嵌套问题阐明

问题形容

问题剖析

解决方案

对于端口号占用问题

对于我的项目中 common.js 引入问题

MybatisPlus 实现分页操作

编辑 ItemService

编辑配置类

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）