layui使用模板引擎，判斷按鈕的顯示隱藏

怎麼根據數據判斷按鈕的隱藏和顯示？傳統的做法是用使用模板引擎，el表達式。

項目中使用layui，layui中提供了一個模板引擎的laytpl，參考官方文檔

https://www.layui.com/doc/modules/laytpl.html

要實現的功能是 商品已經下架的不顯示 下架按鈕

後臺Controller方法

@RequestMapping(value = "/list")
	@RequiresPermissions("product:list")
	public Object list(@RequestParam(defaultValue = "") Map<String, String> map)
	{
		LayuiTable<CbProductDto> layui = new LayuiTable<>();

		try
		{
			int page = Integer.parseInt(map.get("page"));
			int limit = Integer.parseInt(map.get("limit"));

			PageRequest pageRequest = PageRequest.of(page - 1, limit, Direction.DESC, "updateTime");

			// 檢查參數
			String name = map.get("name");
			String code = map.get("code");
			String status = map.get("status");
			String cate = map.get("cate");
			String type = map.get("type");
			String vopType = map.get("vopType");

			CbProduct cbProduct = new CbProduct();
			cbProduct.setProductCode(code);
			cbProduct.setProductName(name);
			cbProduct.setStatus(status == null || status.equals("") ? null : Integer.parseInt(status));
			cbProduct.setProductType(type == null || type.equals("") ? null : Integer.parseInt(type));
			cbProduct.setVopProductType(vopType == null || vopType.equals("") ? null : Integer.parseInt(vopType));

			CbProductCategory cpc = new CbProductCategory();
			cpc.setProductCategoryId(cate == null || cate.equals("") ? null : Long.parseLong(cate));
			cbProduct.setCbProductCategory(cpc);

			Page<CbProduct> cbProductList = cbProductQuery.listCbProduct(pageRequest, cbProduct);

			List<CbProductDto> dtoList = new ArrayList<>();

			// 組裝返回值
			for (CbProduct cp : cbProductList)
			{
				CbProductDto dto = new CbProductDto();
				BeanUtils.copyProperties(cp, dto);
				dto.setCbProductCategoryName(cp.getCbProductCategory().getProductLineName());
				dto.setProductTypeName(CbProductTypeEnum.getName(cp.getProductType()));
				dto.setStatusName(CbProductStatusEnum.getName(cp.getStatus()));
				dto.setVopProductTypeName(VopProductTypeEnum.getName(cp.getVopProductType()));
				dto.setCreateTime(cp.getCreateTime() != null ? DateHelper.getFormat2Date(cp.getCreateTime()) : null);
				dto.setUpdateTime(cp.getUpdateTime());
				dtoList.add(dto);
			}

			layui.setCode(Constants.SUCCESS_CODE);
			layui.setCount(new Long(cbProductList.getTotalElements()));
			layui.setData(dtoList);
			layui.setMsg(Constants.SUCCESS_MSG);
		}
		catch (Exception e)
		{
			e.printStackTrace();
			layui.setCode(Constants.ERROR_CODE);
			layui.setMsg(Constants.ERROR_MSG);
		}

		return layui;
	}
}

 

其中productDto是進行屬性的copy，productDto的status判斷列是產品狀態

表格在render的時候，最後一列使用模板

 table.render({
                        elem : '#up_product_table',
                        url : '../../product/list',
                        //序號 產品編號 產品名稱 組合方式 產品分類 產品類型 銷售價 產品狀態 創建日期
                        cols : [ [ {
                            //width : 180,
                            title : '序號',
                            type:'numbers'
                        }, {
                            field : 'productCode',
                            //width : 180,
                            title : '產品編號'
                        }, {
                            field : 'productName',
                            //width : 180,
                            title : '產品名稱'
                        }, {
                            field : 'vopProductTypeName',
                            //width : 180,
                            title : '組合方式'
                        }, {
                            field : 'cbProductCategoryName',
                            //width : 180,
                            title : '產品分類'
                        }, {
                            field : 'productTypeName',
                            //width : 180,
                            title : '產品類型'
                        }, {
                            field : 'productFee',
                            //width : 180,
                            title : '銷售價'
                        }, {
                            field : 'statusName',
                            //width : 180,
                            title : '產品狀態'
                        }
                        , {
                            field : 'createTime',
                            width : 180,
                            title : '創建時間'
                        }, {
                            fixed : 'right',
                            width : 220,
                            title : '操作',
                            toolbar : '#up_product_table_toolbtn'//使用模板
                        } ] ],
                        page : true,
                        id : "product_table_re",
                        size:'sm'
                    });

         

重點是模板裏邊寫 模板引擎表達式

 <script type="text/html" id="up_product_table_toolbtn">
                <a class="layui-btn layui-btn-normal  layui-btn-xs" id="p_show" lay-event="show"><i class="layui-icon layui-icon-search"></i>查看</a>
                <a class="layui-btn  layui-btn-xs" id="p_edit" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>編輯</a>
				{{#  if(d.status ==1 ){ }}
               	 	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="down"><i class="layui-icon layui-icon-edit"></i>下架</a>
				{{#  }  }}
            </script>

其中“d”代表的是layui框架對於數據的封裝變量，獲取你返回到頁面實體的數據，你可以根據dto的屬性來判斷。

這樣就可以根據status進行判斷按鈕是否顯示。