iT邦幫忙

0

PHP Kendo UI Grid 顯示問題

  • 分享至 

  • xImage

我要試著使用Kendoui PHP Gird進行相關開發,結果發現無法順利整合SQL Server的資料使用在Grid上。

首先如果我使用一個PHP網頁將撈取的SQL回傳JSON,再利用以下Kendoui PHP範例(含Edit的部分)可以顯示出結果,但是分頁功能是失效的。

https://docs.telerik.com/kendo-ui/php/widgets/grid/editing

//引用部分略過
<?php
$transport = new \Kendo\Data\DataSourceTransport();

$read = new \Kendo\Data\DataSourceTransportRead();

$read->url('FunctionReturnJson.php')
     ->contentType('application/json')
     ->type('GET');

$transport->read($read)
          ->parameterMap('function(data) {
              return kendo.stringify(data);
          }');

$model = new \Kendo\Data\DataSourceSchemaModel();

$sidField = new \Kendo\Data\DataSourceSchemaModelField('sid');
$sidField->type('string');

$ipField = new \Kendo\Data\DataSourceSchemaModelField('ip');
$ipField->type('string');

$lv1Field = new \Kendo\Data\DataSourceSchemaModelField('lv1');
$lv1Field->type('string');

$chtnameField = new \Kendo\Data\DataSourceSchemaModelField('chtname');
$chtnameField->type('string');

$model->addField($sidField)
      ->addField($ipField)
      ->addField($lv1Field)
      ->addField($chtnameField);

$schema = new \Kendo\Data\DataSourceSchema();

$schema->model($model);

// $schema = new \Kendo\Data\DataSourceSchema();
// $schema->data('data')
//        ->errors('errors')
//        ->groups('groups')
//        ->model($model)
//        ->total('total');

$dataSource = new \Kendo\Data\DataSource();

// $dataSource->transport($transport)
//            ->batch(true)
//            ->schema($schema);

$dataSource->transport($transport)
           ->pageSize(10)
           ->schema($schema)
           ->serverPaging(true)
           ->serverSorting(true)
           ->serverGrouping(true);

$grid = new \Kendo\UI\Grid('grid');

$sid = new \Kendo\UI\GridColumn();
$sid->field('sid')
            ->title('Contact Name')
            ->width(240);

$ip = new \Kendo\UI\GridColumn();
$ip->field('ip')
            ->title('Contact Title');

$lv1 = new \Kendo\UI\GridColumn();
$lv1->field('lv1')
            ->title('Company Name');

$chtname = new \Kendo\UI\GridColumn();
$chtname->field('chtname')
        ->width(150);

$pageable = new Kendo\UI\GridPageable();
$pageable->refresh(true)
      ->pageSizes(true)
      ->buttonCount(5);

$grid->addColumn($sid, $ip, $lv1, $chtname)
     ->dataSource($dataSource)
     ->columnMenu(true)
     ->pageable($pageable);

echo $grid->render();
?>

但如果用官網的Remote Bind的範例,根本無法顯示結果。
只有顯示空的Table標頭。
https://docs.telerik.com/kendo-ui/php/widgets/grid/remote-binding

<?php
     $transport = new \Kendo\Data\DataSourceTransport();

     $read = new \Kendo\Data\DataSourceTransportRead();

     // Specify the url of the PHP page which will act as the remote service
     $read->url('FunctionReturnJson.php')
          ->type('GET');

     $transport->read($read);

     // Configure the model
     $model = new \Kendo\Data\DataSourceSchemaModel();

     $sidField = new \Kendo\Data\DataSourceSchemaModelField('sid');
     $sidField->type('string');

     $ipField = new \Kendo\Data\DataSourceSchemaModelField('ip');
     $ipField->type('string');

     $lv1Field = new \Kendo\Data\DataSourceSchemaModelField('lv1');
     $lv1Field->type('string');

     $model->addField($sidField)
           ->addField($ipField)
           ->addField($lv1Field);

     $schema = new \Kendo\Data\DataSourceSchema();

     $schema->model($model);

     $dataSource = new \Kendo\Data\DataSource();

     // Configure data source
     $dataSource->transport($transport)
                ->schema($schema);
     ?>

    <?php
      $grid = new \Kendo\UI\Grid('grid');

      $sidColumn = new \Kendo\UI\GridColumn();
      $sidColumn->field('sid');

      $ipColumn = new \Kendo\UI\GridColumn();
      $ipColumn->field('ip');

      $lv1Column = new \Kendo\UI\GridColumn();
      $lv1Column->field('lv1');

      // Configure columns, enable paging, filtering, sorting and grouping
      $grid->addColumn($sidColumn, $ipColumn, $lv1Column)
           ->filterable(true)
           ->sortable(true)
           ->pageable(true)
           ->groupable(true);
    ?>

    <?php
        echo $grid->render();
    ?>

希望能正常使用Grid與相關分頁功能,先謝謝指導。

補充,新手期間不能直接回應,在此補充。

1.我有用f12確認沒有任何錯誤訊息,所以確認不是js/css沒有引用到。
2.因為公司付費購買kendoui,所以希望我們用此套件開發,所以才被迫如此,不然像很多jQuery的套件都有類似功能(jquery tablesorter、jquery datatable),但老闆不喜歡。

小魚 iT邦大師 1 級 ‧ 2019-11-04 11:35:08 檢舉
最近剛好也想開始接觸Kendo UI
Rex Chien iT邦新手 4 級 ‧ 2019-11-04 14:31:52 檢舉
猜測可能是 kendo 找不到取資料的 URL,有沒有開 F12 確認一下 kendo 發出的請求是什麼?
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
ckp6250
iT邦好手 1 級 ‧ 2019-11-04 14:28:33

若是 php + grid , 推薦 jqgrid
我用了好些年,十分推崇。
樓主無妨試試。

我要發表回答

立即登入回答