0

试图弄清楚如何在对话框中动态填充选择菜单......到目前为止，在我所有的尝试中，我都无法让它正常工作。

4

4 回答 4

8

我认为您要做的是在插件中动态填充下拉列表。无论出于何种原因，需要在对话框打开时填充该下拉列表。

如果是这样，这是我为类似情况所做的：

{
    type: 'select',
    id: 'exam_ID',
    label: 'Select Exam',
    items : [ ['--- Select an Exam---',0] ],
    setup : function(element) {
        var element_id = '#' + this.getInputElement().$.id;
        $.ajax({
            type: 'POST',
            url: 'lib/ckeditor/plugins/customExam/utilities/listExams.aspx',
            data: '{"cpID":' + window.parent.$("#cpID").val() + '}',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            async: false,
            success: function(data) {
                $.each(data.DATA, function(index, item) {
                    $(element_id).get(0).options[$(element_id).get(0).options.length] = new Option(item[1], item[0]);
                });
            },
            error:function (xhr, ajaxOptions, thrownError){
                alert(xhr.status);
                alert(thrownError);
            } 
        });
    }

}

关键是找到 CKEditor 设置的元素 ID，它不在id元素定义中。您可以将其id用于其他功能，但如果您计划对元素进行任何更新，则需要获取 CKEditor DOM 元素。

可能有更好的方法来做到这一点，但这对我有用。

于 2011-07-27T14:29:24.533 回答
2 
elements: [
                {
                    type: 'select',
                    id: 'test',
                    label: 'test label',
                    items: [
                        ['Please Choose', '']
                    ],
                    onLoad: function(element) {
                        this.add('Option 1', '1');
                        this.add('Option 2', '2');
                    }              
               }
        ]

如果您想在对话框打开进行编辑时添加或删除项目。您可以使用setup通话。将其置于onLoad定义之上或之下。

                    setup: function(element) {
                        this.clear();

                        this.add('Please Choose', '');
                        this.add('Option 1', '1');
                        this.add('Option 2', '2');

                        this.setValue(element.getText());
                    },
于 2014-08-21T13:06:56.533 回答
2

鲍勃，

这是一个更改现有选择菜单项目的片段。但是，您可以添加自己的、动态获取值等。 

        //for button we just want to limit the button type to button
    if ( dialogName == 'button' ) {

        // updates the info tab 
        var infoTab = dialogDefinition.getContents( 'info' );
        var typeDef = infoTab.get( 'type' );
        var buttonType = new Array("Button", "button");
        var myItems = new Array (buttonType); 
        typeDef['items'] = myItems;

如果这没有帮助，请提供有关实际结果与预期结果的更多详细信息。

于 2011-03-14T12:54:57.070 回答
0

改进了使用 add() 方法并在列表中选择正确项目的代码。

{
    type: 'select',
    label: 'Select a page',
    id: 'localPage',
    items: [['', '']],
    setup: function(data) {
        var self = this;
        $.get('/pages.php', function(items) {
            items.forEach(function(item) {
                self.add(item[0], item[1]);
            });
            if (data.localPage) {
                self.setValue(data.localPage || '');
            }
        }).fail(function() {
            alert('An error occurred while getting the pages.');
        });
    },
}

pages.php 示例脚本：

$pages = [
    ['Contact', '{!! page:4 !!}'],
    ['About', '{!! page:5 !!}'],
    ['Home page', '{!! page:1 !!}'],
];

return json_encode($pages);
于 2020-04-06T12:03:19.090 回答