商城開發之商品分類表的設計、使用、管理

前言

其實好久以前就很想寫這篇博客，可是因爲個人記性差和項目的緣由，老是沒有寫，今天突然想起來，要是今天不寫或許過幾天就忘了，因而敲起鍵盤，寫這篇博客。

數據庫設計

對於一個項目來講，數據庫的設計是一個相當重要的事情，若是數據庫設計的很差，

那麼每每會讓項目變得更加複雜。

category中基本有4個屬性

id：分類的惟一標識符

name：分類名

count：當前分類有多少子分類

parent_id：當前分類的父類id

爲何會這樣分類呢？咱們的商品類別有不少，而且商品分類是分級的，每一級下面又有不少子分類，子分類下面又有子分類，以下圖：

經過觀察能夠發現，它的每一級都是有關聯的，因此咱們能夠經過一個parent_id來讓分類相關聯，每一個分類都有一個父類，parent_id記錄了它的父類的id，當在最上層的時候他的父類爲0。每個分類都會有一個count來記錄它的有多少子類，在實際用到的時候咱們就能夠經過count來判斷當前分類有多少子類。

實際用例

當咱們想要獲得咱們的電腦下面的全部的商品時

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('刪除失敗，此節點下有商品');
                }
            }
        });
    }