【问题标题】:Editable row with number type具有数字类型的可编辑行
【发布时间】:2017-09-09 09:06:20
【问题描述】:

我怎样才能使这个输入类型带有数字。我的意思是当页面在手机中打开时,它会打开数字键盘。

        [
        'class'=>'kartik\grid\EditableColumn',
        'headerOptions' => ['style' => 'width:10%', 'class'=>'text-center'],
        'editableOptions'=>[
            'asPopover' => false,
            'inputType'=>\kartik\editable\Editable::INPUT_TEXT,
            // Change here:
            'editableValueOptions'=>['type'=>'number']
        ],

        'attribute'=>'quantity',
        'label'=>'Quantity',
    ],

编辑 ->> 添加'editableValueOptions'=>['type'=>'number']

【问题讨论】:

    标签: yii2 editablegrid


    【解决方案1】:

    使用editableValueOptions。正如文档所说:

    editableValueOptions:数组,显示的可编辑值的 HTML 属性。

            [
                'class'=>'kartik\grid\EditableColumn',
                'headerOptions' => ['style' => 'width:10%', 'class'=>'text-center'],
                'editableOptions'=>[
                    'asPopover' => false,
                    'inputType'=>\kartik\editable\Editable::INPUT_TEXT,
                    // Change here:
                    'editableValueOptions'=>['type'=>'number']
                ],
    
                'attribute'=>'quantity',
                'label'=>'Quantity',
            ],
    

    【讨论】:

    • 我试过了,但它仍然显示普通键盘而不是数字键盘。我在浏览器手机上试过了。
    • 我的编码有什么需要改变的吗?
    • 当有<input type="number" ...> 时,您的手机应使用数字键盘进行响应。请使用 chrome/mozilla 开发工具检查呈现的页面。看看它是否显示type=number'
    • 如果输入类型是数字但您的手机没有打开数字小键盘,请更换您的键盘应用。
    • 我已经检查了检查过的渲染页面。它仍然显示 虽然我添加了'editableValueOptions'=>['type'=>'number']
    【解决方案2】:
        'attribute' => 'quantity',
        'class' => 'kartik\grid\EditableColumn',
        'editableOptions'=>[
            'valueIfNull' => 'not set',
            'inputType' => \kartik\editable\Editable::INPUT_HTML5,
            'options' => [
                'type' => 'number',
                'min' => '0.5',
                'step' => '0.5',
            ],
        ],
    

    您应该使用options 数组,如上所示

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2020-11-05
      • 1970-01-01
      • 1970-01-01
      • 2012-05-20
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多