Question

我有一个表格行，在该操作图标中只能显示左键单击选项。现在，我需要为操作图标以及总行创建右键单击选项。

这是该行的图片，

该html文件具有：

<tbody id="ember52450" class="ember-view body-view container-view">
<tr id="ember52672" class="ember-view content-row body-row-view container-view" tabindex="0" aria-label="">
<td id="ember52822" class="ember-view content-data item-number item-number-view container-view item-number-view-core_component_data-view-mixin container-view-core_component_data-view-mixin itemNumber">
<div id="ember52825" class="ember-view view">
<div>1</div>
</div>
</td>
<td id="ember52831" class="ember-view lmdd-menu actions container-view">
<rs-icon id="ember52834" class="ember-view action-menu icon clickable-icon" title="Actions and transitions" style="width: 1em; height: 1em; font-size: 20px">
<icon glyph="action" class="action" style="font-size: 20px;">
</icon>
</rs-icon>
</td>
<td id="ember52840" class="ember-view content-data view view-core_component_data-view-mixin name">
<div class="container">
<div class="content">autocomplete</div>
</div>
</td>
<td id="ember52846" class="ember-view content-data view view-core_component_data-view-mixin label">
<div class="container">
<div class="content">autodf</div>
</div>
</td>
</tr>
</tbody>

为此具有相应的余烬文件，在表部分中的内容如下：

Core.component.ObjectTable.extend()
                .named("Admin.LMDView")
                .reopen({
                    controllerBinding: 'parentView.pagination',
                    modelBinding: 'controller.resultSet',
                    displayStartBinding: 'controller.contentPageStart',
                    displayLengthBinding: 'controller.contentPageLength',
                    noContentIcon: 'metadata',
                    noContentMessage: 'admin/navigators/administration/lmd/no-content',
                    hasHeader: true,
                    paginated: true,
                    trailingColumns: [],
                    columns: [
                        // TODO: Move labels into messageTable
                        { type: "actions", label: " " },
                        { name: "name", label: "Name" },
                        { name: "label", label: "Label" },
                    ],
                    getColumnView: function (column) {
                        if (column.type === 'itemNumber') {
                            return Core.view.Activity.ItemNumberView;
                        }
                        if (column.type === 'actions') {
                            return this.constructor.ActionsColumn;
                        }
                        if (column.type === 'boolean') {
                            return Core.component.ObjectTable.BooleanColumn;
                        }
                        if (column.name === 'description') {
                            return Core.component.ObjectTable.NullableColumn;
                        }
                        if (column.name === 'elementCriteria') {
                            return Admin.ElementCriteriaColumn;
                        }
                        if (column.type === 'icon') {
                            return Core.component.ObjectTable.IconColumn.extend({ withName: true });
                        }
                        return Core.view.Activity.GenericDataView;
                    },
                    getHeaderView: function (column) {
                        if (column.icon && column.type === 'boolean') {
                            return Core.component.ObjectTable.IconHeader;
                        }
                        if (column.type === 'itemNumber') {
                            return Core.component.ObjectTable.ItemNumberHeader;
                        }
                        if (column.type === 'selection') {
                            return Core.view.Activity.SelectionCheckmarkView;
                        }                       
                        return Core.component.ObjectTable.DefaultHeaderView;
                    }
                }).reopenClass({
                    ActionsColumn: Ember.ContainerView.extend()
                        .named("Admin.navigators.Administration.LMD.Actions")
                        .reopen({
                            tagName: 'td',
                            classNames: [ 'lmdd-menu' ],
                            childViews: [
                                Core.view.Icon.extend({
                                    model: 'action',
                                    classNames: [ 'action-menu' ],
                                    size: 20,
                                    titleBinding: 'Core.messageTable.workflow/chrome/action-menu',
                                    click: function () {
                                        var lmdd = this.get('parentView.rowView.object');
                                        var lmdds = this.get('parentView.rowView.tableView.model');
                                        var model = Core.model.Menu.create({
                                            loadState: 'done',
                                            content: [
                                                Core.model.Menu.Item.create({
                                                    label: 'Delete LMD Definition',
                                                    icon: 'delete',
                                                    invoke: function () {
                                                        var fmtLabel = lmdd.label ? (lmdd.label + " ("+lmdd.name+")") : lmdd.name;
                                                            Core.confirm(
                                                                "Delete LMD Definition",
                                                                "Are you sure you want to delete the LMD Definition for " + fmtLabel + "?",
                                                                "Delete",
                                                                "Cancel"
                                                            ).then(function () {
                                                                Core.services({
                                                                    service: 'lmdd',
                                                                    type: 'delete',
                                                                    data: {
                                                                        name: lmdd.name
                                                                    }
                                                                }).done(function () {
                                                                    lmdds.reload();
                                                                    Core.notify({
                                                                        title:"Delete LMD Definition",
                                                                        message: "LMD Definition " + fmtLabel + " deleted"
                                                                    });
                                                                });
                                                            });
                                                    }
                                                })
                                            ]
                                        });
                                        var view = Core.view.Menu.create({
                                            model: model,
                                            menuContext: { lmdd: lmdd },
                                            anchor: this.$(),
                                            highlight: this.$().parent('tr:first')
                                        });
                                        view.show();
                                        return false;
                                    }
                                })
                            ]
                        })
                })

对于具有bodyrowview.js的表，我尝试这样做：

click: function (event) {           
            var eventResult = this.get('tableView').clickRow(event, this.get('object'));
            if (eventResult !== false) {
                this.get('element').focus();
                $('.content-data, .action-menu, .managed-object-tools-icon.clickable').bind('contextmenu', function(e) {
                    console.log(e);
                    e.preventDefault();
                    var actionMenuContext = this.get('object');
                    var element = e.currentTarget;
                    this.get('controller').send('contentItemActionMenu', row.length ? row : element, element, actionMenuContext);
                    return false;
                }.bind(this));
            }
            return eventResult;
        },

我需要右键单击整个表行的选项（每个“ td”）。我正在使用ember 1.4.0版本。我是Ember的新手。请问我是否还需要更多详细信息。您的帮助将不胜感激。预先感谢。

如何使用余烬创建右键单击选项

0 个答案: