3

概述

我正在使用 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;
    };
});

store相当于dojo/store/JsonRest。

问题

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

总之

  • 如何确定用户何时尝试编辑列？
  • 然后如何访问 dijit/form/Select 以便更新它？
  • 如何延迟显示编辑器，直到它被填充？
4

1 回答 1

4

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

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

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

您将有权从事件处理程序访问 column.editorInstance

3. 我怎样才能延迟显示编辑器，直到它被填充？

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

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

这是我的解决方案：

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;

  };
});
于 2013-04-21T18:11:40.147 回答