cgb2010-京淘项目Day04

2.5.数据格式化操作

2.5.1格式化价格

1.检查html代码

<th data-options="field:'price',width:70,align:'right',formatter:KindEditorUtil.formatPrice">价格</th>

2.检查函数

// 格式化价格
formatPrice : function(val,row){
   return (val/100).toFixed(2);
},

2.5.2格式化时间

1.编辑html代码

formatter:KindEditorUtil.formatDateTime作用:将当前节点的值交给指定函数处理

<th data-options="field:'created',width:130,align:'center',formatter:KindEditorUtil.formatDateTime">创建日期</th>

2.编写页面js

// 格式化时间
formatDateTime : function(val,row){
//将字符串转化为js对象  时间的对象
   var now = new Date(val);
//now.format:将当前时间按照指定的格式进行转化年月日时分秒
       return now.format("yyyy-MM-dd hh:mm:ss");
},

 

2.5.3格式化状态信息

1.编写html页面

            <th data-options="field:'status',width:60,align:'center',formatter:KindEditorUtil.formatItemStatus">状态</th>

2.编辑页面js

	// 格式化商品的状态
	formatItemStatus : function formatStatus(val,row){
        if (val == 1){
            return '正常';
        } else if(val == 2){
        	return '<span style="color:red;">下架</span>';
        } else {
        	return '未知';
        }
    },

 

 

2.5.4 js引入过程

1.在父级页面中index.jsp中添加如下操作

2.检查common-js

3.实现分类造作

3.1实现商品分类回显

1编辑html页面代码

<th data-options="field:'cid',width:100,align:'center',formatter:KindEditorUtil.findItemCatName">叶子类目</th>

2编辑js页面的代码

3.1.1 编辑ItemCat对象

说明: 在jt-common中添加pojo对象

package com.jt.pojo;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import lombok.experimental.Accessors;

@TableName("tb_item_cat")
@Data
@Accessors(chain = true)
public class ItemCat extends BasePojo{

    @TableId(type = IdType.AUTO)
    private Long id;            //商品分类id 主键自增
    private Long parentId;      //定义父级分类Id
    private String name;        //商品分类名称
    private Integer status;     //指定状态  1正常   2删除
    private Integer sortOrder;  //排序号
    private Boolean isParent;   //是否为父级
}

3.1.1 页面标识

1).编辑html

<th data-options="field:'cid',width:100,align:'center',formatter:KindEditorUtil.findItemCatName">叶子类目</th>

2).编辑JS

  /**
     * 完成$.ajax业务调用
        属性说明:
            1.type : 定义请求的类型 GET/POST/PUT/DELETE
            2.URL:	 指定请求的路径
            3.dataType: 指定返回值类型  一般可以省略
            4.data : ajax向后端服务器传递的数据
                    1.{key:value,key2:value2}
                    2.key=value&key2=value2
            5.success: 设定回调函数一般都会携带参数
            6.async	异步操作 默认值为true  改为false表示同步操作.
            7.error 请求异常之后 执行的函数.
            8.cache ajax是否使用缓存  默认值为true

        1.动态获取用户传递的itemCatId的值.
        2.利用ajax实现数据的动态的获取
        ajax:  $.get/$.post/$.getJSON/$.ajax
    **/
    findItemCatName : function(val,row){
        //console.log("商品分类ID号:"+val);
        let name = null;
        // //异步出现了问题 由于异步操作程序没有返回数据之前,提前结束所以程序为null
		$.ajax({
			type : "GET",
			url :  "/itemCat/findItemCatById",
			data : {id:val},
			success : function(result){  //ItemCat
				//console.log(result.name);
				name = result.name;
			},
			async : false  //设置为同步操作   true为异步....
		})
		return name;
    },

 

3.1.2 编辑ItemCatController

package com.jt.controller;

import com.jt.pojo.ItemCat;
import com.jt.service.ItemCatService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/itemCat")
public class ItemCatController {

    @Autowired
    private ItemCatService itemCatService;

    /**
     * 实现商品分类查询
     * url地址:  http://localhost:8091/itemCat/findItemCatById?id=163
     * 参数:     id=163
     * 返回值结果: itemCat对象
     */
    @RequestMapping("/findItemCatById")
    public ItemCat findItemCatById(Long id){

        return itemCatService.findItemCatById(id);
    }


}

 

3.1.3 编辑ItemCatService

package com.jt.service;

import com.jt.mapper.ItemCatMapper;
import com.jt.pojo.ItemCat;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class ItemCatServiceImpl implements ItemCatService{

    @Autowired
    private ItemCatMapper itemCatMapper;


    @Override
    public ItemCat findItemCatById(Long id) {

        return itemCatMapper.selectById(id);
    }
}

 

3.1.4 页面效果展现