Ofbiz实战：商品管理主菜单改造

 

原生obiz商品主菜单页面主要功能包括：目录分类树和一些快捷操做，整体感受页面内容虽然很丰富，可是操做起来不是太容易上手，因而简化页面显示的同时提供主菜单的功能。

主菜单目录分类树采用了jquery jstree plugin，提供目录下分类展现，点击分类后右侧显示分类的基本信息以下图：

因为目前是居于bootstrap的页面风格，jstree总体风格不太一致，同时jstree右键作增、删，改的功能显的比较low，因此在网上发行bootstrap插件gtreetable发现基本知足要求。

在实际的开发过程当中gtreetable并不能知足功能的所有要求，经过修改插件方式进行扩展。

改造点：

一、           商品主菜单显示一个树状菜单，功能和原生同样，目录下挂分类；分类能够是多级

二、           提供在树菜单中添加目录的功能。

三、           提供在目录下添加分类功能，删除分类及跳转到分类详细页面

四、           显示目录及分类顺序号、

实际效果以下图：

具体改造要点简单描述：

客户端调用部分：

1)修改gtreetable支持根据节点Id、节点类型、层级level查询下级节点，gtreetable只支持根据节点id查

'source': function (id,type,level) {

    return {

        type: 'POST',

        url: 'getCatalogCateTree',

        data: {'id': id,'type':type,'level':level},

        dataType: 'json',

        error: function (XMLHttpRequest) {

            alert(XMLHttpRequest.status + ': ' + XMLHttpRequest.responseText);

        }

    }

}

2）修改右侧菜单defaultAction，自定义菜单功能

defaultActions: [

    {
   name: '详细页',
   event: function (oNode, oManager) {
        var id = oNode.getId();

            if (oNode.type === 'catalog') {

                location.href = './EditProdCatalog?prodCatalogId=' + id;

            } else if (oNode.type == 'category') {

                location.href = './EditCategory?productCategoryId=' + id;

            } else if(oNode.type == 'product'){

                location.href = './EditProduct?productId=' + id;

            }

        }

    },



    {

        name: '${'$'}{createBefore}',

        event: function (oNode, oManager) {

            if (oNode.type === 'catalog') {

                oNode.add('before', 'catalog');

            } else if (oNode.type == 'category') {

                oNode.add('before', 'category');

            }

        }

    },

    {

        name: '${'$'}{createAfter}',

        event: function (oNode, oManager) {

            if (oNode.type === 'catalog') {



                oNode.add('after', 'catalog');

            } else if (oNode.type == 'category') {

                oNode.add('after', 'category');

            }

        }

    },

    {

        name: '${'$'}{createFirstChild}',

        event: function (oNode, oManager) {

            console.log(oNode.related)

            if (oNode.type === 'catalog') {

                oNode.add('firstChild', 'category');

            } else if (oNode.type == 'category') {

                oNode.add('firstChild', 'category');

            }

        }

    },

    {

        name: '${'$'}{createLastChild}',

        event: function (oNode, oManager) {

            if (oNode.type === 'catalog') {

                oNode.add('lastChild', 'category');

            } else if (oNode.type == 'category') {

                oNode.add('lastChild', 'category');

            }

        }

    },

    {

        divider: true     },

    {

        name: '${'$'}{update}',

        event: function (oNode, oManager) {

            oNode.makeEditable();

        }

    },

    {

        name: '${'$'}{delete}',

        event: function (oNode, oManager) {

            if (confirm(oManager.language.messages.onDelete)) {

                oNode.remove();

            }

        }

    }
 
],

服务供给：

一、           提供树菜单服务

 

<service name="getCatalogCateTree" engine="java" auth="true"
         location="org.ofbiz.product.product.ProductServices" invoke="getCatalogCateTree">
    <description>Find product config Product Service</description>
    <!--id_catalog/id_category-->
    <attribute name="id" mode="IN" type="String" optional="false" default-value="0"/>
    <attribute name="type" mode="IN" type="String" optional="false"/>
    <attribute name="level" mode="IN" type="Integer" optional="false"/>

    <attribute name="nodes" type="java.util.List" mode="OUT" optional="false"/>
</service>

二、 提供創建分类、目录服务
<service name="catalogNodeCreate" engine="java" auth="true"
         location="org.ofbiz.product.product.ProductServices" invoke="catalogNodeCreate">
    <description>Find product config Product Service</description>
    <!--id_catalog/id_category-->
    <!--10000_catalog  大师傅  after 10001_category-->
    <attribute name="parent" mode="INOUT" type="String" optional="false"/>
    <attribute name="name" type="String" mode="INOUT" optional="false"/>
    <!--before after firstChild lastChild-->
    <attribute name="position" type="String" mode="IN" optional="false"/>
    <attribute name="related" type="String" mode="IN" optional="false"/>
    <attribute name="parentType" type="String" mode="IN" optional="false"/>
    <attribute name="relatedType" type="String" mode="IN" optional="false"/>
    <!--{"id":8273,"name":"ddsssaaassss","level":2,"type":"default"}-->
    <attribute name="id" type="String" mode="OUT" optional="false"/>
    <attribute name="type" type="String" mode="OUT" optional="false"/>
    <attribute name="level" type="Integer" mode="OUT" optional="false"/>
    <attribute name="seq" type="Integer" mode="OUT" optional="false"/>
</service>

二、 提供修改分类、目录服务
<service name="catalogNodeUpdate" engine="java" auth="true"
         location="org.ofbiz.product.product.ProductServices" invoke="catalogNodeUpdate">
    <description>Find product config Product Service</description>
    <attribute name="id" type="String" mode="INOUT" optional="false"/>
    <attribute name="parent" mode="INOUT" type="String" optional="true"/>
    <attribute name="name" type="String" mode="INOUT" optional="false"/>
    <!--before after firstChild lastChild-->
    <attribute name="position" type="String" mode="IN" optional="true"/>
    <attribute name="related" type="String" mode="IN" optional="true"/>
    <attribute name="parentType" type="String" mode="IN" optional="true"/>
    <attribute name="relatedType" type="String" mode="IN" optional="true"/>

    <attribute name="type" type="String" mode="INOUT" optional="false"/>
    <attribute name="level" type="Integer" mode="INOUT" optional="false"/>
    <attribute name="seq" type="Integer" mode="INOUT" optional="false"/>
</service>

四、 提供分类、目录删除服务
<service name="catalogNodeDelete" engine="java" auth="true"
         location="org.ofbiz.product.product.ProductServices" invoke="catalogNodeDelete">
    <description>Find product config Product Service</description>
    <!--id_catalog/id_category-->
    <attribute name="id" mode="IN" type="String" optional="false"/>
    <attribute name="type" type="String" mode="IN" optional="false"/>
</service>

以上提供工做记录，仅供参与！具体实现参与http://www.yuaoq.com/webtools