yii2项目实战-filterModel搜索机制的实现分析

所谓的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即是表头下面的输入框和下拉框，这一点可以通过控