Php 在Kartik Select2小部件中向下滚动时加载越来越多的数据

Php 在Kartik Select2小部件中向下滚动时加载越来越多的数据,php,yii2,jquery-select2,yii-extensions,kartik-v,Php,Yii2,Jquery Select2,Yii Extensions,Kartik V,我正在研究库存管理系统,有大量的产品和客户wan在Select2小部件中显示产品,就像kartik小部件一样,他希望在向下滚动时越来越多地表示数据,是否可用或可以使用此小部件完成,或者我必须创建自己的小部件? 这是我的密码 <?php $url = Url::to ( [ 'products-list' ] ); echo Select2::widget ( [ 'name' => 'state_10' , 'options' => [ 'id'

我正在研究库存管理系统,有大量的产品和客户wan在Select2小部件中显示产品,就像kartik小部件一样,他希望在向下滚动时越来越多地表示数据,是否可用或可以使用此小部件完成,或者我必须创建自己的小部件? 这是我的密码

<?php
$url = Url::to ( [ 'products-list' ] );
echo Select2::widget ( [
    'name' => 'state_10' ,
    'options' => [
        'id' => 'select_product' ,
        'placeholder' => 'Select Product...' ,
        'multiple' => false ,
        'class' => ''
    ] ,
    'pluginOptions' => [
        'allowClear' => true ,
        'minimumInputLength' => 1 ,
        'ajax' => [
            'url' => $url ,
            'dataType' => 'json' ,
            'data' => new JsExpression ( 'function(params) { return {q:params.term}; }' )
        ] ,
        'escapeMarkup' => new JsExpression ( 'function (markup) { return markup; }' ) ,
        'templateResult' => new JsExpression ( 'function(product) { console.log(product);return product.text; }' ) ,
        'templateSelection' => new JsExpression ( 'function (subject) { return subject.text; }' ) ,
    ] ,
] );
?>

根据要使用分页的文档,您必须告诉Select2通过覆盖
ajax.data
设置向请求添加任何必要的分页参数。要检索的当前页面存储在
params.page
属性中

因此,您需要将
选择2
更改为以下内容

$url = Url::to ( [ 'products-list' ] );
echo Select2::widget ( [
    'name' => 'state_10' ,
    'options' => [
        'id' => 'select_product' ,
        'placeholder' => 'Select Product...' ,
        'multiple' => false ,
        'class' => ''
    ] ,
    'pluginOptions' => [
        'allowClear' => true ,
        'minimumInputLength' => 1 ,
        'ajax' => [
            'url' => $url ,
            'dataType' => 'json' ,
            'data' => new JsExpression ( 'function(params) { return {q:params.term, page:params.page || 1}; }' )
        ] ,
        'escapeMarkup' => new JsExpression ( 'function (markup) { return markup; }' ) ,
        'templateResult' => new JsExpression ( 'function(product) { console.log(product);return product.text; }' ) ,
        'templateSelection' => new JsExpression ( 'function (subject) { return subject.text; }' ) ,
    ] ,
] );
选择2将需要一个
分页。更多
值将出现在响应中。“更多”的值应为
true
false
,这将告诉Select2是否有更多页面的结果可供检索:

{
  "results": [
    {
      "id": 1,
      "text": "Option 1"
    },
    {
      "id": 2,
      "text": "Option 2"
    }
  ],
  "pagination": {
    "more": true
  }
}
因此,修改服务器端代码以包含
$page
参数,并在查询中包含
限制
偏移量
。我目前使用5条记录作为限制,您可以更改它

public function actionProductsList($page, $q = null , $id = null ) {
        $limit=5;
        $offset=($page-1)*$limit;

        Yii::$app->response->format = Response::FORMAT_JSON;
        $out = [ 'results' => [ 'id' => '' , 'text' => '' , 'qtyLeft' => '' , 'serialNumbers' => '' ] ];
        if ( !is_null ( $q ) ) {
            $query = new \yii\db\Query;
            $query->select ( [ 'product_id as id' , new Expression ( "CONCAT(product_name,' -- ',product_qty_left) AS text, product_qty_left as qtyLeft, s.serial_number as serialNumbers" ) ] )
                    ->from ( 'product' )
                    ->join ( 'LEFT JOIN' , 'serial_number s' , 's.r_product_id = product.product_id' )
                    ->where ( [ 'like' , 'product_name' , $q ] )
                    ->offset ( $offset )
                    ->limit ( $limit );
            $command = $query->createCommand ();
            $data = $command->queryAll ();
            $out['results'] = array_values ( $data );
            $out['pagination'] = [ 'more' => !empty($data)?true:false ];
        } elseif ( $id > 0 ) {
            $out['results'] = [ 'id' => $id , 'text' => AppProduct::find ()->where ( [ 'product_id' => $id ] )->one ()->product_name ];
        }
        return $out;
    }
更新
我在上面的代码中找到了一些修复程序,并进行了更改

  • 修正偏移量
    $offset=($page-1)*$limit
    而不是像
    ->偏移($page)
    一样使用
    $offset
    ->偏移($offset)
    一样使用
    $offset
  • 正确配置更多结果以在没有更多结果时返回false,否则即使没有更多结果,它也会继续向服务器发送ajax调用,因此将其更改为
    $out['pagination']=['more'=>!empty($data)?true:false]

谢谢,现在一切都很顺利!非常感谢!很高兴帮助@MohamadaliZayathey,您需要更新
actionProductsList
功能的服务器端代码。请参阅下面我的答案中的更新。Whello,非常感谢。我一直在遭受这个问题的困扰,这个问题导致从数据库检索的项目冗余,现在我可以说一切都进行得很顺利,谢谢。
public function actionProductsList($page, $q = null , $id = null ) {
        $limit=5;
        $offset=($page-1)*$limit;

        Yii::$app->response->format = Response::FORMAT_JSON;
        $out = [ 'results' => [ 'id' => '' , 'text' => '' , 'qtyLeft' => '' , 'serialNumbers' => '' ] ];
        if ( !is_null ( $q ) ) {
            $query = new \yii\db\Query;
            $query->select ( [ 'product_id as id' , new Expression ( "CONCAT(product_name,' -- ',product_qty_left) AS text, product_qty_left as qtyLeft, s.serial_number as serialNumbers" ) ] )
                    ->from ( 'product' )
                    ->join ( 'LEFT JOIN' , 'serial_number s' , 's.r_product_id = product.product_id' )
                    ->where ( [ 'like' , 'product_name' , $q ] )
                    ->offset ( $offset )
                    ->limit ( $limit );
            $command = $query->createCommand ();
            $data = $command->queryAll ();
            $out['results'] = array_values ( $data );
            $out['pagination'] = [ 'more' => !empty($data)?true:false ];
        } elseif ( $id > 0 ) {
            $out['results'] = [ 'id' => $id , 'text' => AppProduct::find ()->where ( [ 'product_id' => $id ] )->one ()->product_name ];
        }
        return $out;
    }