Question

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

我想让editacle字段自动对焦并自动选择。这是我的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() ; ?>

Answer 1

正如kartik提到here，可编辑小部件不提供任何焦点API;你需要在javascript中这样做。

所以，你需要找到popover模态的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()调用包含在超时内。可能会take some time between the display of the popover and the instantiation of the display (so you can focus and select on it)，具体取决于您的系统。如果是这种情况，您需要取消注释这些行。

Answer 2

尝试使用此JS代码：

$("form input:text, form textarea").first().focus();

自动对焦于可编辑的gridview字段

2 个答案: