yii2项目实战-filterModel搜索机制的实现分析
更新于 2016年11月06日 by 白狼 被浏览了 998 次

所谓的filterModel搜索,其实是 yii\grid\GridView 组件对外开放的一个功能,来满足各位日常开发所需,尽量避免个人再单独花费时间开发。鉴于有些同学基础实在不咋滴,这节课我们就来简单分析下gridview搜索机制的实现,权且当作补充。

搜索机制实现的流程上:根据表单提交,筛选数据。很简单。下面我们来看下yii2又是如何实现的?

先看效果:

通过index.php?r=category/index访问栏目的列表页,看到在每一个表头下面都有一栏搜索框,而我们在input框内输入点内容,鼠标离开或者回车就发现页面刷新了,而且搜出来了我们想要的结果。

接着来看下该效果是如何实现的:

先看前端:

输入框内输入内容有变化且鼠标离开input框页面刷新了,这就说明有change事件在监听input,而后拿到了输入框内的数据向服务端发起了请求,进而筛选出了数据。

右键查看源码,找到yiiGridView代码:

jQuery('#w0').yiiGridView({"filterUrl":"\/index.php?r=category%2Findex","filterSelector":"#w0-filters input, #w0-filters select"});

通过控制台分析,我们看到“#w0”是当前gridview的id属性值,(在未对gridview指定id的情况下,系统自动生成对应的id属性值)。当然,我们也可以通过gridview的options为gridview设定id属性

<?= GridView::widget([
    // ...
    'options' => ['id' => 'category'],
    // ...
?>

此时右键源码,查看的代码是这样的:

jQuery('#category').yiiGridView({"filterUrl":"\/index.php?r=category%2Findex","filterSelector":"#category-filters input, #category-filters select"});

也就是说yii为当前gridview对象绑定了yiiGridView方法。传递的参数是一个json对象,json对象键值分别是filterUrl和filterSelector, filterSelector即是表头下面的输入框和下拉框,这一点可以通过控

继续阅读

还有58%的精彩内容,购买继续阅读