Question

我试图从json数据创建一个网格。每个单元格最终都可以编辑。一列包含类型相关数据，并基于我想要显示一对日期选择器（开始/结束日期）或Textarea或其他一些小部件的类型。

我使用renderCell尝试渲染这个类型依赖列，但每当我将Textarea引入我的代码时，我都会收到错误＆＃34; TypeError：subRows is undefined＆＃34; ＆安培;似乎无法动摇它。

我对道场很新，所以我想我错过了一些明显的东西。我已经阅读了所有文档，尤其是post，这对我的案例没有任何帮助。不幸的是，许多文档都是代码片段。不管它是什么，我没有意味着那些代码片太短而无法开始使用。

有人能帮助我吗？ Textarea是我想要解决的问题，因为它似乎很简单＆amp;我还没有尝试正确配置DateTextBox。我想让Textarea工作＆amp;这将解释其余的......

我的代码在下面 - 发布整个页面以防我的错误在某个地方遗漏了文件;

<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＆＃39; postCreate首先发挥作用。

dojo Grid renderCell Textarea

1 个答案: