javascript - 如何在另一个 dgrid 单元格中显示 dojo dgrid 选择

Question

我有一个显示一些数据的 Dgrid，比如 DataDgrid。我想在主 DataDgrid 的一个单元格内添加一个基于另一个 Dgrid 的选择控件，比如 SelectDgrid。

要添加选择，我遵循以下示例:http://dojofoundation.org/packages/dgrid/tutorials/drop_down/

我已经准备了一个 JSFiddle，表明它可以工作: http://jsfiddle.net/amiramix/qqezJ/

现在，当我尝试添加选择时，它会显示在表格单元格内，而不是 float 在主 DataGrid 上。请检查此 JSFiddle(单击“编辑”将选择添加到主 DataGrid): http://jsfiddle.net/amiramix/qqezJ/5/

我猜这是因为某些 CSS 设置不正确。我试图摆弄 z-index 但没有任何结果。任何帮助将不胜感激。

添加以下代码以消除 stackoverflow 的警告:

HTML:

<button id="editButton" type="button">Edit</button>
<div id="grid"></div>

CSS:

#grid {
    line-height: 30px;
}

.mySelect {
    border: 1px solid #b5bcc7;
    background-color: #ffffff;

    height: 17px;

    /* Make this position: relative so our arrow is positioned within */
    position: relative;
    padding: 0;
}
.mySelect .label {
    line-height: 17px;
    vertical-align: middle;
}
.mySelect .arrow {
    /* Position the arrow on the right-hand side */
    position: absolute;
    top: 0;
    right: 0;

    /* Use claro's arrow image */
    background-image: url("https://ajax.googleapis.com/ajax/libs/dojo/1.8.1/dijit/themes/claro/form/images/commonFormArrows.png");
    background-position: -35px 70%;
    background-repeat: no-repeat;

    /* 16x16 with a white border and a gray background */
    width: 16px;
    height: 16px;
    border: 1px solid #ffffff;
    border-top: none;
    background-color: #efefef;
}

.mySelect .dgrid {
    position: absolute;
    top: 17px;
    left: -1px;
    width: 100%;
    display: none;
}
.mySelect .opened {
    display: block;
}

JavaScript:

require([
    "dojo/_base/declare",
    "dojo/on",
    "dgrid/OnDemandList",
    "dgrid/OnDemandGrid",
    "dgrid/Selection",
    "dgrid/Keyboard",
    "dojo/store/Memory",
    "dojo/dom",
    "dojo/dom-construct",
    "dojo/dom-class",
    "put-selector/put",
    "dojo/domReady!"
    ], function(declare, on, List, OnDemandGrid, Selection, Keyboard, Memory, dom, domConstruct, domClass, put) {

    var store = new Memory({
        identifier: "id",
        data: [
            {
            id: 0,
            name: "One",
            color: "blue",
            value: 1},
        {
            id: 1,
            name: "Two",
            color: "red",
            value: 2},
        {
            id: 2,
            name: "Three",
            color: "green",
            value: 3},
        {
            id: 3,
            name: "Four",
            color: "orange",
            value: 4}
        ]
    });

    var dataStore = new Memory({
        identifier: "id",
        data: [
            {
            id: 0,
            name: "OneOne",
            value: "OneTwo"},
        {
            id: 1,
            name: "TwoOne",
            value: "TwoTwo"}
        ]
    });

    var DropDown = declare([List, Selection, Keyboard]);
    var Grid = declare([OnDemandGrid, Keyboard]);

    var newGrid = new Grid({
        store: dataStore,
        columns: {
            name: {
                label: "Name"
            },
            value: {
                label: "Value",
                renderCell: function(object, value, td, options) {
                    put(td, "div#id-" + object.id, object.name);
                }
            }
        }
    }, "grid");

    on(dom.byId("editButton"), "click", function(e) {

        var ref = dom.byId("id-0");
        ref.innerHTML = "";
        put(ref, "#select.mySelect");
        put(ref, "div.label.button", "choose...");
        put(ref, "div.arrow.button");

        var dropDown = new DropDown({
            selectionMode: "single",
            store: store,
            renderRow: function(item) {
                return domConstruct.create("div", {
                    innerHTML: item.name,
                    style: {
                        color: item.color
                    }
                });
            }
        });

        domConstruct.place(dropDown.domNode, "select");
        dropDown.startup();

        var open = false;
        on(dom.byId("select"), ".button:click", function(e) {
            open = !open;
            domClass[open ? "add" : "remove"](dropDown.domNode, "opened");
        });
    });

});

Answer 1

您可以使用带有 FilteringSelect 的编辑器插件。请参阅:https://github.com/SitePen/dgrid/wiki/editor