根據商品ID查詢商品的類別（商品上下架狀態情況）

阿新 • • 發佈：2022-05-11

一、顯示效果

二、前端程式碼

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

三，js程式碼

　　拓展：瞭解formatter屬性

  <th data-options="field:'cid',width:100,align:'center',formatter:KindEditorUtil.findItemCatName">葉子類目</th>
  <th data-options="field:'status',width:60,align:'center',formatter:KindEditorUtil.formatItemStatus">狀態</th>

　　 formatter屬性支援自定義單元格內容。

　　語法：

    formatter:function(cellvalue,options,rowObject){
        return "";
    }

　　引數詳解：

　　　　（1）cellvalue，當前單元格的值
　　　　（2）options，該cell的options設定，包括{rowId, colModel,pos,gid}
　　　　（3）rowObject，當前cell所在row的值，是一個物件　　

因此只要通過formatter屬性進行呼叫,則都會傳遞2個引數引數1:當前值引數2:行資料

//查詢商品屬於那種商品類別
 findItemCatName : function(val,row){
        let name = ''
        $.ajax({
            type:  "get",
            url:   "/itemCat/findItemCatById",
            data:  {id: val},
            success: function(result){
                //result要求返回的是ItemCat物件
                console.log(result)
                name=result.name;
            },
            error: function(result){
                console.log("查詢失敗")
            },
            async:    false
        })
        return name
    },

// 改變商品的狀態
    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 '未知';
        }
    },

四、後端：

　　4.1、建立itemcat.java實體類

@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;   //false 0  true 1
}

　　4.2、建立itemcatmapper.java

public interface ItemCatMapper extends BaseMapper<ItemCat> {
    ItemCat findItemCatById(Long id);

}

　　4.3、建立itemcatservice.java以及itemcatserviceImpl.java

public interface ItemCatService {
    ItemCat findItemCatById(Long id);
}

@Service
public class ItemCatServiceImpl implements  ItemCatService{

    @Autowired
    private ItemCatMapper itemCatMapper;

    @Override
    public ItemCat findItemCatById(Long id) {
      /*  因為mybatisplus底層有根據id查詢封裝的方法，所以我們直接就調它的封裝的方法
      * 根據ID查詢
      *  T selectById(Serializable id);
      * */

        return itemCatMapper.selectById(id);

    }
}

　　4.4、建立itemcatcontroller

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

    @Autowired
    private ItemCatService itemCatService;

    /**
     * 業務需求: 根據商品分類Id查詢商品分類物件
     * URL地址: /itemCat/findItemCatById?id=497
     * 型別: Request Method: GET
     * 引數: id
     * 返回值: ItemCat物件
     */
    @RequestMapping("/findItemCatById")
    public ItemCat findItemCatById(Long id){

        return itemCatService.findItemCatById(id);
    }

}