image.png
如图所示，根据切换tab显示不同状态的订单
- 新增一个EnGird继承基类Grid
<?php
namespace App\Http\Admin\Extensions\Grid;
use \Encore\Admin\Grid;
class EnGrid extends EnGrid
{
/**
* Output as string.
*
* @return string
*/
public function __toString()
{
return $this->render();
}
}
- 简单修改你的列表页代码
public function index()
{
return Admin::content(function (Content $content) {
$content->header($this->title);
$content->description('列表');
$content->body($this->grid());
});
}
protected function grid()
{
$tab = new Tab();
$tab->add('全部', $this->data(0, 'zero'));
$tab->add('待处理', $this->data(1, 'one'));
$tab->add('处理中', $this->data(2, 'two'));
$tab->add('处理完成', $this->data([3, 4], 'three'));
return $tab;
}
private function data($where, $pageName)
{
$grid = new EnGrid(new Model);
//$grid = new Grid(new Model);
//设置页名
$grid->setName($pageName);
//设置批量操作
$grid->disableBatchActions(false);
$grid->header(function (){
$doughnut = view('admin.taxcombine');
return new Box('', $doughnut);
});
if($where) {
if(is_array($where)) {
$grid->model()->whereIn('status', $where);
}else{
$grid->model()->where('status', $where);
}
}
$grid->column('id', __('Id'));
$grid->expandFilter();
return $grid;
// return $grid->render();
}
问题1：筛选和model查询好像不兼容，点击筛选不会展开，需要展开筛选；
问题2：分页问题，需新增pagename $grid->setName($pageName);;但是在其他页点击下一页会跳到第一个tab去；
问题3：无法新增自定义操作和批量操作; 这里简单实现一下，没找到解决办法
//设置批量操作
$grid->disableBatchActions(false);
$grid->header(function (){
$doughnut = view('admin.taxcombine');
return new Box('', $doughnut);
});
//view 内中使用的类选择器查看网页elements改动，为pageName+xxxx
<div>
<input type="submit" class="btn btn-primary" id="combine" value="合并打款">
<script>
window.onload = function(){
$('.4-grid-select-all-btn').parent().remove();
}
$('#combine').on("click", function () {
var ids = [];
$('.icheckbox_minimal-blue.checked').each(function (index,item){
if($(this).attr('aria-checked') === 'true'){
ids.push($(this).children(".4-grid-row-checkbox").attr('data-id'))
}
})
console.log(ids)
$.ajax({
method: 'GET',
url: '{{ admin_base_path("hr/tax/combine") }}',
data: {
ids: ids,
},
success: function (data) {
if (data.status == 1) {
alert('操作成功');
location.reload();
return;
}else{
alert(data.msg)
location.reload();
return
}
}
});
})
</script>
</div>
