使用dojo下Menu和PopupMenuItem实现动态菜单

 

        昨天早上来公司上班，上头抛给我一个加急任务，一个动态菜单的配置与实现。我想了想，类似功能很常见，并且在现已有的系统中已经有了一种模式的展现。

 

        最开始，从已有系统中找到了一个右键菜单的功能实现，主要使用了dijit.Menu和dijit.MenuItem通过嵌套组合的方式来实现层级的菜单功能。但是后来通过观察发现，这一对标签的使用，需要结合页面是的dom标签。所以找了一下，发现在Dojo中simple example中，已经提供了一个封装的比较成熟的控件dijit.form.ComboButton ，按照例子代码所示，只有dijit.Menu和dijit.MenuItem实现不了多层级菜单的功能，需要引入dijit.PopupMenuItem作为一级菜单拓展二级菜单的一个标识。简单来说，若想拓展一个菜单，就在外面写一个PopupMenuItem标签，里边写好完整的Menu和MenuItem标签。复杂的菜单结构就需要通过嵌套这几个标签就ok啦。

        具体如下：

    <div data-dojo-type="dijit.Toolbar">   <div data-dojo-type="dijit.form.ComboButton" >   <span>${resourceBundle.functionMenu}</span><span data-dojo-type="dijit.Menu"><span data-dojo-type="dijit.PopupMenuItem"><span>${resourceBundle.unifyReceive}</span><span data-dojo-type="dijit.Menu"><span data-dojo-type="dijit.MenuItem" data-dojo-props="id: '${id}_systemReceive'" data-dojo-attach-event="onClick: _onMenuClick">${resourceBundle.systemReceive}</span><span data-dojo-type="dijit.MenuItem" data-dojo-props="id: '${id}_importReceive'" data-dojo-attach-event="onClick: _onMenuClick">${resourceBundle.importReceive}</span><span data-dojo-type="dijit.MenuItem" data-dojo-props="id: '${id}_documentReceiveProcess'" data-dojo-attach-event="onClick: _onMenuClick">${resourceBundle.documentReceiveProcess}</span><span data-dojo-type="dijit.MenuItem" data-dojo-props="id: '${id}_technologyReview'" data-dojo-attach-event="onClick: _onMenuClick">${resourceBundle.technologyReview}</span><span data-dojo-type="dijit.MenuItem" data-dojo-props="id: '${id}_archiveReceiveProcess'" data-dojo-attach-event="onClick: _onMenuClick">${resourceBundle.archiveReceiveProcess}</span><span data-dojo-type="dijit.MenuItem" data-dojo-props="id: '${id}_receiveRecordSearch'" data-dojo-attach-event="onClick: _onMenuClick">${resourceBundle.receiveRecordSearch}</span><span data-dojo-type="dijit.MenuItem" data-dojo-props="id: '${id}_receiveRecordStatistics'" data-dojo-attach-event="onClick: _onMenuClick">${resourceBundle.receiveRecordStatistics}</span></span></span><span data-dojo-type="dijit.PopupMenuItem"><span>${resourceBundle.documentDistribte}</span><span data-dojo-type="dijit.Menu"><span data-dojo-type="dijit.MenuItem" data-dojo-props="id: '${id}_documentDistributionManage'" data-dojo-attach-event="onClick: _onMenuClick">${resourceBundle.documentDistributionManage}</span><span data-dojo-type="dijit.MenuItem" data-dojo-props="id: '${id}_distributionFormManage'" data-dojo-attach-event="onClick: _onMenuClick">${resourceBundle.distributionFormManage}</span><span data-dojo-type="dijit.MenuItem" data-dojo-props="id: '${id}_documentNotice'" data-dojo-attach-event="onClick: _onMenuClick">${resourceBundle.documentNotice}</span><span data-dojo-type="dijit.MenuItem" data-dojo-props="id: '${id}_documentRecycle'" data-dojo-attach-event="onClick: _onMenuClick">${resourceBundle.documentRecycle}</span><span data-dojo-type="dijit.MenuItem" data-dojo-props="id: '${id}_departmentDocumentReceive'" data-dojo-attach-event="onClick: _onMenuClick">${resourceBundle.departmentDocumentReceive}</span><span data-dojo-type="dijit.MenuItem" data-dojo-props="id: '${id}_departmentDocumentSubmit'" data-dojo-attach-event="onClick: _onMenuClick">${resourceBundle.departmentDocumentSubmit}</span><span data-dojo-type="dijit.MenuItem" data-dojo-props="id: '${id}_departmentDocumentDistribute'" data-dojo-attach-event="onClick: _onMenuClick">${resourceBundle.departmentDocumentDistribute}</span><span data-dojo-type="dijit.MenuItem" data-dojo-props="id: '${id}_distributionRecordSearch'" data-dojo-attach-event="onClick: _onMenuClick">${resourceBundle.distributionRecordSearch}</span><span data-dojo-type="dijit.MenuItem" data-dojo-props="id: '${id}_distributionRecordStatistics'" data-dojo-attach-event="onClick: _onMenuClick">${resourceBundle.distributionRecordStatistics}</span></span></span>

          <帮助>  http://dojotoolkit.org/api/