如何使用动态选择输入创建dgrid列编辑器插件？

Question

概观

我正在使用dojo和dgrid来构建网格。 2个相关列是Client和Proposal 。 双击任一列将允许您使用dijit / form / Select进行编辑。 我希望提案的选项基于客户的选项。

这是用于两个列的列插件：

define([
    "dojo",
    "sb",
    "put-selector/put",
    "dgrid/editor",
    "dijit/form/Select"
], function(dojo, sb, put, editor, Select){
    dojo.global.starbug.grid.columns = dojo.global.starbug.grid.columns || {};
    dojo.global.starbug.grid.columns.select = function(column){

        //populate the cell with the label or value
        column.renderCell = function(object, value, cell, options, header){
            put(parent && parent.contents ? parent : cell, ".dgrid-select");
            items = column.editorInstance.getOptions();
            var label;
            for (var i in items) {
                if (value == items[i].value) value = items[i].label;
            }
            put(cell, 'span.'+value.replace(/ /g, '-').toLowerCase(), value);
        };

        column.editorArgs = {
            style:'width:100%',
            labelAttr:'label',
            store:sb.get(column.from, 'select')
        };

        column = editor(column, Select, "dblclick");

        return column;
    };
});

该商店相当于dojo / store / JsonRest。

问题

如果我理解dgrid和dojo / store的本质，我需要找到一种方法在用户尝试编辑列时填充/更新dijit / form / Select选项。

综上所述

• 如何确定用户何时尝试编辑列？
• 然后我如何访问dijit / form / Select以便我可以更新它？
• 如何在编辑之前延迟显示编辑器？

Answer 1

1.如何确定用户何时尝试编辑列？

您可以使用由编辑器插件调度的dgrid-editor-show事件。

2.然后我如何访问dijit / form / Select以便我可以更新它？

您将可以从事件处理程序访问column.editorInstance

3.如何在编辑之前延迟显示编辑器？

为此，我必须访问column.editorInstance的私有成员，但我能够通过在column.editorInstance._queryRes上使用dojo/when来完成任务。

一旦结果出现，我还需要这个来设置编辑器的值。

这是我的解决方案：

define([
    "dojo",
    "dojo/when",
    "sb",
    "put-selector/put",
    "dgrid/editor",
    "dijit/form/Select"
], function(dojo, when, sb, put, editor, Select){
  dojo.global.storm.grid.columns.proposals = function(column){

    //We have to keep some cached display values since our editor
    //will only contain the display values from the last request
    var cache = {};

    //Use the init function to access the grid
    //so we can attach the event handler to `dgrid-editor-show`
    column.init = function() {
        column.grid.on('.dgrid-cell:dgrid-editor-show', function(evt) {

            //My data contains null values,
            //so I need to convert them to strings
            if (evt.cell.row.data[column.field] == null) {
                evt.cell.row.data[column.field] = "NULL";
            }

            //This is where we set the query and update the available options
            column.editorInstance.setStore(
                column.editorInstance.store,
                evt.cell.row.data[column.field],
                {query:{client:evt.cell.row.data.client_id}}
            );
            //This is where we set editor value upon receipt of the results
            when(column.editorInstance._queryRes, function() {
                column.editorInstance.set(
                    'value',
                    evt.cell.row.data[column.field]
                );
            });
        });
    };

    //Use the renderCell function to set the display value
    column.renderCell = function(object, value, cell, options, header){

        //add a class to distinguish this column
        put(parent && parent.contents ? parent : cell, ".dgrid-select");

        //for null values, we just put in an empty string
        if (value == "NULL") put(cell, 'span.proposal', "");
        else if (value) {
            //otherwise delay til we have results
            when(column.editorInstance._queryRes, function() {
                //look for the display value in the editor
                items = column.editorInstance.getOptions();
                var found = false;
                for (var i in items) {
                    //if we find the display value in the editor, cache it
                    if (value == items[i].value) {
                        found = true;
                        cache[value] = items[i].label;
                        value = items[i].label;
                    }
                }
                //if we don't find the display value in the editor,
                //look for it in the cache
                if (!found && cache[value]) value = cache[value];
                //finally, populate the cell
                put(cell, 'span.proposal', value);
            });
        }
    };

    //Set the editor args, mostly standard stuff
    column.editorArgs = {
        style:'width:100%',
        labelAttr:'label',
        sortByLabel:false,
        store:sb.get(column.from, 'select'),
        onSetStore:function(store, items) {
            //if the field is not required, put in an empty options
            //so the store doesn't have to include one
            if (!this.required) {
                this.options.unshift({label:' ', value:'NULL'});
                this._loadChildren();
            }
        }
    };

    //create the editor
    column = editor(column, Select, "dblclick");

    //return the column
    return column;

  };
});