dojo Grid renderCell 文本区域

Question

我正在尝试根据 json 数据创建网格。每个单元格最终都是可编辑的。一列包含依赖于类型的数据，并且基于我想要显示一对日期选择器（start/end 日期）或 Textarea 或其他小部件的类型。

我正在使用 renderCell 来尝试呈现这种依赖于类型的列，但是每当我在我的代码中引入 Textarea 时，我都会收到错误 "TypeError: subRows is undefined" 并且似乎无法改变它。

我是 dojo 的新手，所以我想我遗漏了一些明显的东西。我已经阅读了所有文档，尤其是 post 这对我的情况没有帮助。不幸的是，许多文档都是代码片段，而我没有得到的任何内容都意味着这些代码片段太短而无法开始。

谁能帮帮我。 Textarea 是我想解决的问题，因为它看起来很简单而且我还没有尝试正确配置 DateTextBox。我认为让 Textarea 正常工作，这将解释其余部分...

我的代码在下面 - 整个页面都已发布，以防我的错误在某处丢失文件；

<html>
<head>
    <meta charset="utf-8">
    <title>Role assignment</title>
    <link rel="stylesheet" href="/library/js/dojo/dojo/resources/dojo.css">
    <link rel="stylesheet" href="/library/js/dojo/dgrid/css/dgrid.css">
    <link rel="stylesheet" href="/library/js/dojo/dgrid/css/skins/claro.css">
    <link rel="stylesheet" href="/library/js/dojo/dijit/themes/dijit.css"> 
    <LINK href="/library/css/custom.css" type="text/css" rel="stylesheet"> 

    <LINK href="/favicon.ico" rel="shortcut icon" type="image/x-icon">

    <script type="text/javascript" language="javascript" src="/library/js/script_main.js"></script>


</head>
<body class="claro">

    <form>
        <div id="grid"></div>
    </form>


    <!-- load Dojo -->
    <script src="/library/js/dojo/dojo/dojo.js"></script>
    <script>

        require([
            'dojo/_base/declare',
            'dgrid/Grid',
            "dgrid/Selection",
            "dgrid/editor",
            "dgrid/Keyboard",
            "dijit/form/Button",
            "dijit/form/Textarea",
            "dijit/form/DateTextBox",
            "dojo/domReady!"            
        ], function (declare, Grid, Selection, editor, Keyboard, Button, Textarea, DateTextBox) {

            var renderRoleData = function(object, value, node, options) {
                if (object.role_type == "TIME_RANGE") {
                    return new DateTextBox();
                    // no attempt to initialise this yet
                }
                else if (object.role_type == "MULTI_STRING") {
                    return new Textarea({
                            name: "myarea",
                            value: object.role_data.text,
                            style: "width:200px;"
                    });
                }
                //....more types
            }                   

            var columns =   [
                                { 
                                    field: 'role_name',
                                    label: 'Role name'
                                },
                                { 
                                    field: 'role_type',
                                    label: 'Role type'
                                },
                                { 
                                    field: 'role_enabled',
                                    label: 'Role enabled'
                                },
                                { 
                                    field: 'role_data',
                                    label: 'Role data',
                                    renderCell: renderRoleData
                                }
            ];          

            var grid = new (declare([ Grid, Selection, editor, Keyboard, Textarea, DateTextBox ]))({            
                columns: columns,
                postCreate: function() {

                    var data = [ 
                                        {   
                                            "role_dn": "some_ldap_dn1,dc=com",
                                            "role_name": "Water Controller",
                                            "role_type": "TIME_RANGE", 
                                            "role_enabled" : true, 
                                            "role_data" : {"start_date" : "20150601", "end_date" : "20150701"}
                                },      {   
                                            "role_dn": "some_ldap_dn1,dc=com",
                                            "role_name": "Waste Controller",
                                            "role_type": "MULTI_STRING", 
                                            "role_enabled" : true, 
                                            "role_data" : { "text": "The reason I need this is very long and complicated.  The big long reason is just big and long and honestly you wouldn't care if I told you anwyay" }
                                        }
                    ];  

                    this.renderArray(data);
                }
            }, 'grid');

        });
    </script>
</body>
</html>

Answer 1

最初，我注意到一些可能导致此问题的问题。请尝试以下操作：

// Dijit widgets should not be mixed into the grid with declare.
// If you're using 0.3, editor should not be mixed in either,
// intended to be applied to specific columns (in 0.4 this is now a mixin).
// Only dgrid mixins should be mixed in via declare.
var CustomGrid = declare([ Grid, Selection, Keyboard ], {
    postCreate: function () {
        // Call this.inherited to run any postCreate logic in
        // previous mixins first
        this.inherited(arguments);
        var data = [ 
            {   
                "role_dn": "some_ldap_dn1,dc=com",
                "role_name": "Water Controller",
                "role_type": "TIME_RANGE", 
                "role_enabled" : true, 
                "role_data" : {"start_date" : "20150601", "end_date" : "20150701"}
            }, {
                "role_dn": "some_ldap_dn1,dc=com",
                "role_name": "Waste Controller",
                "role_type": "MULTI_STRING", 
                "role_enabled" : true, 
                "role_data" : { "text": "The reason I need this is very long and complicated.  The big long reason is just big and long and honestly you wouldn't care if I told you anwyay" }
            }
        ];  
        this.renderArray(data);
    }
});

var grid = new CustomGrid({
    columns: columns
}, 'grid');

我从 declare 数组中删除了不属于它的东西，这可能是导致问题的原因。
请注意，postCreate 现在是在直接传递给 declare 的对象中定义的。该对象的属性将混合在数组中的构造函数之后，而不是在实例化时将对象的属性传递给构造函数，这将直接覆盖实例上的那些属性。这也使它能够调用 this.inherited(arguments) ，这将运行任何先前的 mixins 的 postCreate 函数首先。

dojo Grid renderCell 文本区域

dojo Grid renderCell Textarea

dojo

textarea