复习电商笔记-11-EasyUI-商品列表

最新推荐文章于 2023-04-05 10:17:05 发布

小贺学习笔记

最新推荐文章于 2023-04-05 10:17:05 发布

阅读量802

点赞数 1

分类专栏：电商笔记文章标签： 11

本文链接：https://blog.csdn.net/qq_40680190/article/details/84032665

版权

电商笔记专栏收录该内容

41 篇文章 0 订阅

订阅专栏

Mybatis那些事-拦截器(Plugin+Interceptor)

参考链接：https://blog.csdn.net/yhjyumi/article/details/49188051

EasyUI分页和返回结果集对象

Service层代码：

//带分页查询，并返回EasyUI所学结果集供EasyUI grid控件绑定数据
public EasyUIResult queryList(Integer page, Integer rows){
	PageHelper.startPage(page, rows);// 设置分页信息
	List<Item> oList = itemMapper.queryListOrderByUpdated();
	PageInfo<Item> pageInfo = new PageInfo<Item>(oList);
	return new EasyUIResult(pageInfo.getTotal(),pageInfo.getList());
}

Controller层代码：

	@RequestMapping("query")
	@ResponseBody
	public EasyUIResult list(Integer page, Integer rows){
		return itemService.queryList(page, rows);
	}

开发步骤

第一步：列表页面item-list.jsp引入EasyUI的列表控件

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<table class="easyui-datagrid" id="itemList" title="商品列表" 
       data-options="singleSelect:false,collapsible:true,pagination:true,url:'/item/query',method:'get',pageSize:30,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">叶子分类</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>
<div id="itemEditWindow" class="easyui-window" title="编辑商品" data-options="modal:true,closed:true,iconCls:'icon-save',href:'/page/item-edit'" style="width:80%;height:80%;padding:10px;">
</div>
<script>

    function getSelectionsIds(){
    	var itemList = $("#itemList");
    	var sels = itemList.datagrid("getSelections");
    	var ids = [];
    	for(var i in sels){
    		ids.push(sels[i].id);
    	}
    	ids = ids.join(",");
    	return ids;
    }
    
    var toolbar = [{
        text:'新增',
        iconCls:'icon-add',
        handler:function(){
        	$(".tree-title:contains('新增商品')").parent().click();
        }
    },{
        text:'编辑',
        iconCls:'icon-edit',
        handler:function(){
        	var ids = getSelectionsIds();
        	if(ids.length == 0){
        		$.messager.alert('提示','必须选择一个商品才能编辑!');
return ;
        	}
        	if(ids.indexOf(',') > 0){
        		$.messager.alert('提示','只能选择一个商品!');
        		return ;
        	}
        	
        	$("#itemEditWindow").window({
        		onLoad :function(){
        			//回显数据
        			var data = $("#itemList").datagrid("getSelections")[0];
        			data.priceView = KindEditorUtil.formatPrice(data.price);
        			$("#itemeEditForm").form("load",data);
        			
        			// 加载商品描述
        			$.getJSON('/item/query/item/desc/'+data.id,function(_data){
        				if(_data.status == 200){
        					//UM.getEditor('itemeEditDescEditor').setContent(_data.data.itemDesc, false);
        					itemEditEditor.html(_data.data.itemDesc);
        				}
        			});
        			
        			//加载商品规格
        			$.getJSON('/item/param/item/query/'+data.id,function(_data){
        				if(_data && _data.status == 200 && _data.data && _data.data.paramData){
        					$("#itemeEditForm .params").show();
        					$("#itemeEditForm [name=itemParams]").val(_data.data.paramData);
        					$("#itemeEditForm [name=itemParamId]").val(_data.data.id);
        					
        					//回显商品规格
        					 var paramData = JSON.parse(_data.data.paramData);
        					
        					 var html = "<ul>";
        					 for(var i in paramData){
        						 var pd = paramData[i];
        						 html+="<li><table>";
        						 html+="<tr><td colspan=\"2\" class=\"group\">"+pd.group+"</td></tr>";
        						 
        						 for(var j in pd.params){
        							 var ps = pd.params[j];
        							 html+="<tr><td class=\"param\"><span>"+ps.k+"</span>: </td><td><input autocomplete=\"off\" type=\"text\" value='"+ps.v+"'/></td></tr>";
	 }
        						 
        						 html+="</li></table>";
        					 }
        					 html+= "</ul>";
        					 $("#itemeEditForm .params td").eq(1).html(html);
        				}
        			});
        			
        			KindEditorUtil.init({
        				"pics" : data.image,
        				"cid" : data.cid,
        				fun:function(node){
        					KindEditorUtil.changeItemParam(node, "itemeEditForm");
        				}
        			});
        		}
        	}).window("open");
        }
    },{
        text:'删除',
        iconCls:'icon-cancel',
        handler:function(){
        	var ids = getSelectionsIds();
        	if(ids.length == 0){
        		$.messager.alert('提示','未选中商品!');
        		return ;
        	}
        	$.messager.confirm('确认','确定删除ID为 '+ids+' 的商品吗？',function(r){
        	    if (r){
        	    	var params = {"ids":ids};
                	$.post("/item/delete",params, function(data){
            			if(data.status == 200){
            				$.messager.alert('提示','删除商品成功!',undefined,function(){
            					$("#itemList").datagrid("reload");
            				});
            			}
            		});
        	    }
        	});
        }
    },'-',{
        text:'下架',
        iconCls:'icon-remove',
        handler:function(){
        	var ids = getSelectionsIds();
        	if(ids.length == 0){
        		$.messager.alert('提示','未选中商品!');
        		return ;
	}
        	$.messager.confirm('确认','确定下架ID为 '+ids+' 的商品吗？',function(r){
        	    if (r){
        	    	var params = {"ids":ids};
                	$.post("/rest/item/instock",params, function(data){
            			if(data.status == 200){
            				$.messager.alert('提示','下架商品成功!',undefined,function(){
            					$("#itemList").datagrid("reload");
            				});
            			}
            		});
        	    }
        	});
        }
    },{
        text:'上架',
        iconCls:'icon-remove',
        handler:function(){
        	var ids = getSelectionsIds();
        	if(ids.length == 0){
        		$.messager.alert('提示','未选中商品!');
        		return ;
        	}
        	$.messager.confirm('确认','确定上架ID为 '+ids+' 的商品吗？',function(r){
        	    if (r){
        	    	var params = {"ids":ids};
                	$.post("/rest/item/reshelf",params, function(data){
            			if(data.status == 200){
            				$.messager.alert('提示','上架商品成功!',undefined,function(){
            					$("#itemList").datagrid("reload");
            				});
            			}
            		});
        	    }
        	});
        }
    }];
</script>

访问的/item/query链接，采用get方法访问。返回EasyUIResult。

第二步：在ItemController中增加查询方法

@RequestMapping("query")
@ResponseBody
public EasyUIResult queryList(@RequestParam("page") Integer page, @RequestParam("rows") Integer rows) {
	return this.itemService.queryList(page, rows);
}

第三步：在ItemService中添加查询方法

 /**
     * 查询商品列表
     * @param page
     * @param rows
     * @return
     */
    public EasyUIResult queryList(Integer page, Integer rows) {
        PageHelper.startPage(page, rows, true);//设置分页信息
        
        List<Item> items = itemMapper.queryListOrderByUpdated();//按照更新时间倒序排序
        PageInfo<Item> pageInfo = new PageInfo<Item>(items);
        
        return new EasyUIResult(pageInfo.getTotal(), pageInfo.getList());
    }

第四步：在ItemMapper中添加查询方法，按修改时间倒叙

package com.jt.manage.mapper;

import java.util.List;

import com.jt.manage.mapper.base.mapper.SysMapper;
import com.jt.manage.pojo.Item;

public interface ItemMapper extends SysMapper<Item>{

    public List<Item> queryListOrderByUpdated();

}

第五步：ItemMapper.xml

<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.jt.manage.mapper.ItemMapper">

	<select id="queryListOrderByUpdated" resultType="Item">
		SELECT * FROM tb_item ORDER BY updated DESC
	</select>
	
</mapper>

按修改时间倒叙排列。

列表页面显示出所有商品信息

数据二次加工

价格修饰，日期修饰，状态显示中文，回显商品分类名称。

声明js函数

var TT = KindEditorUtil = {		
	// 格式化价格
	formatPrice : function(val,row){
		return (val/100).toFixed(2);
	},
	// 格式化商品的状态
	formatItemStatus : function formatStatus(val,row){
        if (val == 1){
            return '正常';
        } else if(val == 2){
        	return '<span style="color:red;">下架</span>';
        } else {
        	return '未知';
        }
    },
    // 商品分类id转名称
    formatItemCat : function(val,row){
    	var result = "";		//接收返回值
		//jQuery提供$.get、$.post、$.ajax三种方式
        $.ajax({  
            type: "POST",  
            url: "/item/cat/"+val,  
            contentType: "application/json;charset=utf-8",  
            dataType: "json",  
            async: false,	//同步，必须设置为同步，异步无法获取返回值
            success: function (data) {  
                result = data.name+"("+val+")";  
            }, failure: function () {  
                result = "";  
            }  
        })  
        return result;  
  }
};

列表中调用

<th data-options="field:'cid',width:100,align:'center',formatter:KindEditorUtil.formatItemCat">商品分类</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>

controller支持

@RequestMapping("/{id}")
@ResponseBody	//必须使用对象，jackson内部有中文转码，防止乱码
public ItemCat getItemCatName(@PathVariable Long id){
	return itemCatService.queryById(id);
}

小贺学习笔记

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复习电商笔记-11-EasyUI-商品列表

Mybatis那些事-拦截器(Plugin+Interceptor)参考链接：https://blog.csdn.net/yhjyumi/article/details/49188051EasyUI分页和返回结果集对象Service层代码：//带分页查询，并返回EasyUI所学结果集供EasyUI grid控件绑定数据public EasyUIResult queryList(...
复制链接

扫一扫