商城开发之商品分类表的设计、使用、管理

时间 2019-12-01

标签商城开发商品分类设计使用管理繁體版

原文原文链接

前言

其实好久以前就很想写这篇博客，可是因为个人记性差和项目的缘由，老是没有写，今天突然想起来，要是今天不写或许过几天就忘了，因而敲起键盘，写这篇博客。 php

数据库设计

对于一个项目来讲，数据库的设计是一个相当重要的事情，若是数据库设计的很差， css

那么每每会让项目变得更加复杂。 html

category中基本有4个属性 java

id：分类的惟一标识符 node

name：分类名 ajax

count：当前分类有多少子分类数据库

parent_id：当前分类的父类id json

为何会这样分类呢？咱们的商品类别有不少，而且商品分类是分级的，每一级下面又有不少子分类，子分类下面又有子分类，以下图： api

经过观察能够发现，它的每一级都是有关联的，因此咱们能够经过一个parent_id来让分类相关联，每一个分类都有一个父类，parent_id记录了它的父类的id，当在最上层的时候他的父类为0。每个分类都会有一个count来记录它的有多少子类，在实际用到的时候咱们就能够经过count来判断当前分类有多少子类。 app

实际用例

当咱们想要获得咱们的电脑下面的全部的商品时

List<Long> resultList = new ArrayList<Long>();
            Category category = categoryDao.findOne(id);//id为当前选择的电脑id
            if (category.getCount() != 0) { //获取当前是否有子分类
                List<Category> list = categoryDao.findCategoryChild(category.getId());//寻找当前category的子分类
                while (flag) { //遍历当前list，找到叶子分类
                    List<Category> tempList = new ArrayList<>();
                    tempList.addAll(list);
                    for (Category myid : tempList) {
                        list.remove(myid);
                        if (myid.getCount() == 0) {
                            resultList.add(myid.getId());
                        } else {
                            List<Category> childList = categoryDao.findCategoryChild(myid.getId());
                            list.addAll(childList);
                        }
                    }

                    if (list.size() == 0)
                        flag = false;
                }
            } else {
                resultList.add(id);
            }

经过这一系列的操做，就能够得到咱们某个分类下的叶子分类。

当咱们上传商品时咱们能够选择咱们的商品类别

就像这样，咱们每次选择分类的时候都会自动的生成他的下一级菜单，代码以下：

html：

<div id="my_select" style="float: left;margin-left: 14.5%;">
                        <select id="select_first">

                        </select>
                    </div>

js：

var category;//分类信息
var mydiv;
$(function () {
    mydiv = $('#my_select');

    $('#my_select').on('change', "select", function () {
        var length = mydiv.children('select').length - 1;
        var index = $(this).index(); //当前select坐标
        for (var i = length; i > index; i--) {
            mydiv.children('select')[i].remove();//当咱们改变某个select里面的值时，删除其后面的select
        }
        var tempValue = $(this).children('option:selected').val();//获取当前选中的值
        judge(tempValue);
    });

    $.get(contextPath + "/category", function (data) {//http get请求
        loadData(data);
    });

});

function loadData(data) { //解析返回的json数据
    data = jQuery.parseJSON(data);
    category = data.list;
    $("#select_first").empty();
    $.each(category, function (i, item) {
        if (item.parent_id == 0) {
            $("#select_first").append('<option value="' + item.id + '">' + item.name + '</option>'); //把没有父节点的类别添加进咱们页面上
        }
    });

}

function judge(tempValue) {
    var temp = '<select  style="width: 100px;height: 30px;" >';
    var flag = 0;
    $.each(category, function (i, item) {
        if (item.parent_id == tempValue) {  //把选中值得子类加到后面
            temp += '<option value="' + item.id + '">' + item.name + '</option>';
            flag++;
        }
    });
    temp += '</select>';
    if (flag > 0) {
        mydiv.append(temp);
    }
}

分类管理：

在分类管理这块，本身写的话有点麻烦，因此就用了ztree，ztree是一块jq的树形插件，api比较简单，官网：http://www.ztree.me/v3/main.php ，ztree能够很方便的删除以及增长咱们的节点，先把效果图贴出：

html：

<ul id="treeDemo" class="ztree"></ul>  //咱们的树形菜单的容器
    <div id="rMenu">  //鼠标右键菜单控件
        <ul>
            <li id="m_add"  data-toggle="modal" data-target="#edit">增长节点</li>
            <li id="m_del" onclick="removeTreeNode();">删除节点</li>
            <li id="m_check" onclick="editNode();">编辑节点</li>

        </ul>
    </div>

js:

var zTreeObj;
    // zTree 的参数配置，深刻使用请参考 API 文档（setting 配置详解）
    var setting = {

        view: {
            dblClickExpand: false,
            showLine: false
        },
        check: {
            enable: true
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
//                onClick: onClick
            onRightClick: OnRightClick
        }
    };
    // zTree 的数据属性，深刻使用请参考 API 文档（zTreeNode 节点数据详解）
    var zNodes = [];
//屏蔽系统菜单，使用本身的右键菜单布局
    function OnRightClick(event, treeId, treeNode) {
        if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
            zTree.cancelSelectedNode();
            showRMenu("root", event.clientX, event.clientY);
        } else if (treeNode && !treeNode.noR) {
            zTree.selectNode(treeNode);
            showRMenu("node", event.clientX, event.clientY);
        }
    }
//展现本身的右键菜单布局
    function showRMenu(type, x, y) {
        $("#rMenu ul").show();
        if (type=="root") {
            $("#m_del").hide();
            $("#m_check").hide();
            $("#m_unCheck").hide();
        } else {
            $("#m_del").show();
            $("#m_check").show();
            $("#m_unCheck").show();
        }
        rMenu.css({"top":y+"px", "left":x+"px", "visibility":"visible"});

        $("body").bind("mousedown", onBodyMouseDown);
    }
    function hideRMenu() {
        if (rMenu) rMenu.css({"visibility": "hidden"});
        $("body").unbind("mousedown", onBodyMouseDown);
    }
    function onBodyMouseDown(event){
        if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
            rMenu.css({"visibility" : "hidden"});
        }
    }
    var addCount = 1;
//增长节点
    function addTreeNode(newName) {
        hideRMenu();

        var  node;
        var  pid
        if (zTree.getSelectedNodes()[0]) {

            node = zTree.getSelectedNodes()[0];
           pid = zTree.getSelectedNodes()[0].id;


        } else {
          node = null;
          pid = 0;

        }
        addUtil(newName,pid,node);
    }
    function removeTreeNode() {//删除节点
        hideRMenu();
        var nodes = zTree.getSelectedNodes();
        if (nodes && nodes.length>0) {
            if (nodes[0].children && nodes[0].children.length > 0) {
               alert("不容许删除父节点，请把子节点一并删除")
            } else {
                deleteCategory(nodes[0],nodes[0].id);
            }
        }
    }

    var zTree, rMenu;

    function onClick(e,treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.expandNode(treeNode);
    }
    $(document).ready(function(){
        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        zTree = $.fn.zTree.getZTreeObj("treeDemo");
        rMenu = $("#rMenu");
    });
//获取咱们的分类json信息
    $.get(contextPath + "/category", function (data) {
        data = jQuery.parseJSON(data);
        var array = new Array();
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        $.each(data.list,function(i,item){
            var temp =  { id:item.id, pId:item.parent_id, name:item.name};
            array.push(temp);
        });

        zTree.addNodes(null,array);//把分类信息添加进咱们的树中
    });

    $('#addConfirm').on('click',function(){
        $('#edit').modal('hide');//在这我本身定义的弹出框获取其的内容
        addTreeNode( $('#newnNode').val());

    });

    function addUtil(newName,pid,node){
        $.post(contextPath+"/mmt_admin/category/add",{parentid:pid,name:newName},function(data){
            data = $.parseJSON(data);
            var newNode = { id:data.bean.id,pId:data.bean.parent_id, name:data.bean.name}
            zTree.addNodes(node, newNode);
        })
    }

    function deleteCategory(node,id){
        $.ajax({
            url: contextPath+'/mmt_admin/category/'+id,
            type: 'DELETE',
            success: function(result) {
                result = $.parseJSON(result);
                if(result.status == 0){
                    zTree.removeNode(node);
                    alert('删除成功');
                }else{
                    alert('删除失败，此节点下有商品');
                }
            }
        });
    }