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