nineinchnick / edatatables
Yii 框架的网格小部件,DataTables jQuery 插件的包装器
Requires
- php: >=5.3.0
- datatables/datatables: 1.10.*
- mozarcik/yii-datepicker: 1.4.*
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
- 支持部分可编辑单元格
##要求
- Yii 1.1.8 或更高版本
- PHP 5.3
- (可选) 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, ), ),
##资源
- GitHub: https://github.com/nineinchnick/edatatables
- Composer 包名 nineinchnick/edatatables