nineinchnick/edatatables

Yii 框架的网格小部件,DataTables jQuery 插件的包装器

1.10.6 2015-04-23 14:27 UTC

This package is not auto-updated.

Last update: 2024-09-23 13:47:12 UTC


README

此小部件/包装器的目标是提供一个用于替换 Yii 框架中基本 CGridView 小部件的即插即用解决方案,使用 DataTables 插件。

它可用,但需要反馈。请在项目页面发布问题。

##功能

  • 使用 AJAX 调用重绘表格内容(在分页/排序/搜索后)
  • 使用 CGridView 列定义格式,支持所有基本特殊列,如按钮、复选框等
  • 表格标题中的自定义按钮
  • 默认为 JUI 的平滑主题
  • 通过bootstrap 扩展支持 Twitter Bootstrap
  • 支持部分可编辑单元格

##要求

##使用方法

它与 CGridView 不完全兼容。我决定不更改 DataTables 使用的 GET 参数名称,因此您必须同时使用提供的 EDTSort 和 EDTPagination 类以及修改过滤处理。见下文。

###安装

提取到扩展目录中,或使用 composer: $ composer require nineinchnick/edatatables:dev-master

在 config/main.php 中导入

'import' => array(
        ...
        'ext.edatatables.*', //if it's in your extensions folder
        'vendor.nineinchnick.edatatables.*', //if you're using composer (and have a 'vendor' alias!)
        ...
)

###使用

使用方法与 CGridView 类似。如果通过常规调用显示,只需运行小部件。要获取 AJAX 响应,发送 $widget->getFormattedData() 的 JSON 编码结果。

控制器中的操作

$widget = $this->createWidget('ext.edatatables.EDataTables', array(
 'id'            => 'products',
 'dataProvider'  => $dataProvider,
 'ajaxUrl'       => $this->createUrl('/products/index'),
 'columns'       => $columns,
));
if (!Yii::app()->getRequest()->getIsAjaxRequest()) {
  $this->render('index', array('widget' => $widget,));
  return;
} else {
  echo json_encode($widget->getFormattedData(intval($_REQUEST['sEcho'])));
  Yii::app()->end();
}

索引视图(对于非 AJAX 请求)

<?php $widget->run(); ?>

###准备数据提供程序

要使用排序、分页和过滤(通过工具栏中的快速搜索字段或自定义高级搜索过滤器表)等功能,传递给小部件的数据提供程序对象必须使用提供的 EDTSort 和 EDTPagination 类以及解析后发送的表单填充的 CDbCriteria 准备。

最简单的示例

$criteria = new CDbCriteria;
// bro-tip: $_REQUEST is like $_GET and $_POST combined
if (isset($_REQUEST['sSearch']) && isset($_REQUEST['sSearch']{0})) {
    // use operator ILIKE if using PostgreSQL to get case insensitive search
    $criteria->addSearchCondition('textColumn', $_REQUEST['sSearch'], true, 'AND', 'ILIKE');
}

$sort = new EDTSort('ModelClass', $sortableColumnNamesArray);
$sort->defaultOrder = 'id';
$pagination = new EDTPagination();

$dataProvider = new CActiveDataProvider('ModelClass', array(
    'criteria'      => $criteria,
    'pagination'    => $pagination,
    'sort'          => $sort,
))

一个更复杂的示例将基于使用模型和视图定义的搜索表单。然后将其属性放入 critieria 中,并将其传递给数据提供程序。

###其他选项

请查看DataTables 网页以获取有关

  • 表格布局
  • 样式
  • 多列排序等。
  • 一些示例和有趣的插件

###与 Twitter Bootstrap 一起使用

由于已经移除了 bootstrap 属性,请使用以下配置在 widget 工厂或作为您 bootstrap 主题的默认皮肤

'EDataTables' => array(
    'htmlOptions' => array('class' => ''),
    'itemsCssClass' => 'table table-striped table-bordered table-condensed items',
    'pagerCssClass' => 'paging_bootstrap pagination',
    'buttons' => array(
        'refresh' => array(
            'tagName' => 'a',
            'label' => '<i class="icon-refresh"></i>',
            'htmlClass' => 'btn',
            'htmlOptions' => array('rel' => 'tooltip', 'title' => Yii::t('EDataTables.edt',"Refresh")),
            'init' => 'js:function(){}',
            'callback' => 'js:function(e){e.data.that.eDataTables("refresh"); return false;}',
        ),
    ),
    'datatableTemplate' => "<><'row'<'span3'l><'dataTables_toolbar'><'pull-right'f>r>t<'row'<'span3'i><'pull-right'p>>",
    'registerJUI' => false,
    'options' => array(
        'bJQueryUI' => false,
        'sPaginationType' => 'bootstrap',
        //'fnDrawCallbackCustom' => "js:function(){\$('a[rel=tooltip]').tooltip(); \$('a[rel=popover]').popover();}",
    ),
    'cssFiles' => array('bootstrap.dataTables.css'),
    'jsFiles' => array(
        'bootstrap.dataTables.js',
        'jdatatable.js' => CClientScript::POS_END,
    ),
),

##资源