Javascript 如何在另一个dgrid单元格中显示dojo dgrid select

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

要添加select I，请执行以下示例：

我准备了一个JSFIDLE，它显示了它的工作原理：

现在，当我尝试添加select时，它会显示在表单元格中，而不是浮动在主数据网格上。请检查此JSFIDLE（单击编辑将select添加到主数据网格）：

我想这是因为一些CSS设置不正确。我试图摆弄z指数，但没有任何结果。任何帮助都将不胜感激

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

HTML:

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");
        });
    });

});

---

您可以将编辑器插件与

过滤器选择一起使用。请参阅：
这将如何帮助解决我在问题中概述的问题？@Amiramix：我将使用firebug对其进行测试，以查看css应用于您的网格。您的
html
中是否有
body class=“claro”
？如果您阅读了我的问题，我实际上已经包含了一个指向工作示例的链接。我相信如果你想调查和回答这个问题，你可能需要的所有信息都应该已经存在了。谢谢
#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;
}

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");
        });
    });

});