Handsontable 给出了意外的列数

Posted

技术标签:

【中文标题】Handsontable 给出了意外的列数【英文标题】:Handsontable giving unexpected number of columns 【发布时间】:2016-11-01 23:06:10 【问题描述】:

我已经实现了 handsontable 来从用户那里获取数据。 这是我的脚本

<script type="text/javascript">
    $(document).ready(function() 
        $('#quiz_questions').handsontable(
            rowHeaders: true,
            colHeaders: ['Question', 'Option 1', 'Option 2', 'Option 3', 'Option 4', 'Answer', 'Marks'],
            columns: [
                
                  type: 'text',
                  allowEmpty: false
                ,
                
                  type: 'text',
                  allowEmpty: false
                ,
                
                  type: 'text',
                  allowEmpty: false
                ,
                
                  type: 'text',
                  allowEmpty: true
                ,
                
                  type: 'text',
                  allowEmpty: true
                ,
                
                  type: 'dropdown',
                  source: ['Option 1', 'Option 2', 'Option 3', 'Option 4'],
                  allowEmpty: false
                ,
                
                  type: 'numeric',
                  allowEmpty: false
                
            ],
            stretchH: 'all',
            minSpareRows: 0,
            minSpareColumns: 0,
            minRows : 25
        );

        var hotInstance = $("#quiz_questions").handsontable('getInstance');

        $('#btnSave').click(function(e)
            e.preventDefault();
            $('#btnSave').prop("disabled", true);
            //alert('btnclicked');

            var dynFrm = $('<form>', 
                'action': ' action('QuizQuestionController@storeBulk') ',
                'method': 'POST'
            ).append($('<input>', 
                'type': 'hidden',
                'name': '_token',
                'value': ' csrf_token() '
            )).append($('<input>', 
                'type': 'hidden',
                'name': 'quiz_id',
                'value': ' $quiz->quiz_id '
            )).append($('<input>', 
                'type': 'hidden',
                'name': 'data',
                'value': JSON.stringify(hotInstance.getData())
            ));
            dynFrm.appendTo(document.body).submit();
        );

    );

</script>

QuizQuestionControllerstoreBulk() 函数处理数据。

public function storeBulk()
    
        // get the quiz model
        $quiz = Quiz::findOrFail(Input::get('quiz_id'));

        // get the data
        $data = Input::get('data');
        $jData = json_decode($data);

        //process the recevied data
        foreach($jData as $row) 
            $quizQuestion = new QuizQuestion();

            $quizQuestion->quiz_id = $quiz->quiz_id;
            $quizQuestion->question_no = $cnt;
            $quizQuestion->question_text = trim($row[0]) ? : null;
            $quizQuestion->options = $this->processOptions([
                                        trim($row[1]),
                                        trim($row[2]),
                                        trim($row[3]),
                                        trim($row[4])
                                        ]);
            $quizQuestion->answer = $this->processAnswer($row[5]);
            $quizQuestion->marks = trim($row[6]) ? : null;

            ...
    

现在的问题是,对于在填充数据时 handsontable 中留空的行,我应该将这些行的 data 设为 [null,null,null,null,null,null,null]。但这种情况并非如此。对于某些行,我得到 [null,null,null,null,null](只有 5 个值)。因此我得到一个ErrorExceptionUndefined offset: 5

我注意到这种情况仅发生在前 5 行。可能是什么问题?

【问题讨论】:

【参考方案1】:

查明问题。

我注意到这种情况仅发生在前 5 行。可能是什么 有问题吗?

handsontablestartRows 属性默认为 5。因此前 5 行存在问题。我将属性显式设置为

startRows: 0,

并且还修改了storeBulk()函数以忽略错误。

$quizQuestion->question_text = trim(@$row[0]) ? : null;
$quizQuestion->options = $this->processOptions([
                                   trim(@$row[2]),
                                   trim(@$row[3]),
                                   trim(@$row[4]),
                                   trim(@$row[5])
                                ]);
$quizQuestion->answer = $this->processAnswer(@$row[6]);
$quizQuestion->marks = trim(@$row[7]) ? : null;

现在一切正常。

【讨论】:

【参考方案2】:

您是否尝试过使用hotInstance.getSourceData() 而不是hotInstance.getData()?此方法的功能随着其最新版本的变化而改变,这给其他人带来了类似的问题。

【讨论】:

以上是关于Handsontable 给出了意外的列数的主要内容,如果未能解决你的问题,请参考以下文章

CollectionView - 每个部分的列数不同

使用数组作为带有handsontable的列

从javascript隐藏handsontable的列

Handsontable 和热公式解析器

HandsonTable 中的 \9 是啥?构建失败并出现语法错误

通过鼠标点击触发handsontable loadData的正确Angular方式是啥