w2ui工具栏 - 有没有办法动态填充菜单项

时间:2016-04-03 12:18:50

标签: javascript toolbar w2ui

我想用javascript动态填充我的w2ui工具栏菜单项。我尝试使用:document.getElementById但它没有用,因为下拉菜单中没有ID。

部分流程是我试图动态填充的部分

ToolBarView.prototype.buildView = function(processController) {

    $('#MDItoolbar').w2toolbar({
        name: 'toolbar',
        items: [
            { type: 'button',  id: 'saveProcess' ,  name: 'saveProcess', caption: 'save Process', icon: 'fa-check', checked: true },
            { type: 'break',  id: 'break0' },
            { type: 'button',  id: 'NewProcess' ,  name: 'NewProcess', caption: 'New Process', icon: 'fa-check', checked: true },
            { type: 'break', id: 'break1' , name: 'break1' },
            { type: 'menu',   id: 'processes', caption: 'Drop Down', img: 'icon-folder', 
                name:'processes',
                items: [
                    { text: 'Item 1', img: 'icon-page' }, 
                    { text: 'Item 2', img: 'icon-page' }, 
                    { text: 'Item 3', img: 'icon-page' }
                ]
            },
            { type: 'break', id: 'break3' ,name:'break3'},
            { type: 'spacer',name:'spacer' }
        ]
    });

    w2ui.toolbar.on('*', function (event) { 
        console.log('EVENT: '+ event.type + ' TARGET: '+ event.target, event);
        if (event.target =='saveProcess')
        {
            var saveProcess = new SaveProcessView("save the process",processController);
        }

        if (event.target =='NewProcess')
        {
            processController.NewProcess();
        }
    });
};

1 个答案:

答案 0 :(得分:0)

首先你需要<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app = "myApp"> <div ng-controller="myTest"> <table > <tr ng-repeat="x in data" ng-style="{'background-color': ($even ? 'green' : 'red')}"> <td > {{ x }} </td> </tr> </table> </div> </div>工具栏菜单(见http://w2ui.com/web/docs/w2toolbar.get),然后你需要替换/扩展工具栏菜单的get()数组:

items

我强烈建议您同时为w2ui.toolbar.get('processes').items = [ { text: 'New Item 1', img: 'icon-page' }, { text: 'New Item 2', img: 'icon-page' } ]; 提供项目(请参阅http://w2ui.com/web/docs/w2toolbar.items)。