1

如何添加自动对焦并在可编辑的 gridview 字段上进行选择？

我想让编辑字段自动对焦和自动选择。这是我的网格视图代码：

<?php Pjax::begin(); ?>
    <?= GridView::widget([
        'dataProvider'=>$dataProvider,
        'filterModel'=>$searchModel,
        'showPageSummary'=>true,
        'pjax'=>true,
        'striped'=>true,
        'hover'=>true,
        'responsiveWrap' => false,
        'panel'=>['type'=>'primary', 'heading'=>$partner_name],
        'columns'=>[
            [
                'attribute' => 'city_code',
                'label' => 'City Code',
            ],
            [
                'class'=>'kartik\grid\EditableColumn',
                'editableOptions'=>[
                   'asPopover' => false,
                   'inputType'=>\kartik\editable\Editable::INPUT_TEXT,
                ],

                'attribute'=>'amount',
                'label'=>'Amount',

            ],
        ],
    ]);

    ?>
<?php Pjax::end() ; ?>
4

2 回答 2

1

正如 kartik在这里提到的， Editable 小部件没有提供任何用于焦点的 API；您需要在 javascript 中执行此操作。

所以，你需要找到popover modal的id（默认情况下，它被称为“ <modelname>-<rowid>-<attributename>-popover”之类的东西），并声明它显示后，<modelname>-<rowid>-<attributename>-disp需要选择里面的显示（“”）。

所以，像

<?php
  $this->registerAssetBundle(yii\web\JqueryAsset::className(), \yii\web\View::POS_HEAD); // in case you don't have jQuery set
?>
<script type="text/javascript">
$(document).ready(function() {
  for (rowid=0; rowid<10; row++) { // or some other form of iterating over your rows
    popover_id = "#city-" + rowid + "-amount-popover";  // replace city and amount with your model name and your attribute name
    $(popover_id).on('shown.bs.modal', function(event) {
      // setTimeout(function() {
      display_id = "#"+event.target.id.replace(/popover$/,'disp');
      $(display_id).select();
      // }, 10);
    });
  }
});
</script>

请注意，有两条注释行将select()调用包含在超时内。根据您的系统，在弹出框的显示和显示的实例化之间可能需要一些时间（因此您可以专注并选择它）。如果是这种情况，您需要取消注释这些行。

于 2017-08-14T23:53:04.063 回答
0

试试这个 JS 代码：

$("form input:text, form textarea").first().focus();
于 2017-07-08T10:26:03.830 回答