如何将 ActiveDataProvider 与 select2 一起使用?
How to use ActiveDataProvider with select2?
我正在尝试将 jquery-select2(加载远程数据)插件与 Yii2 搜索模型一起使用。截至目前,我的控制器 returns 从搜索模型创建的 $dataProvider。但是,它显然不是 select2 可以用来创建下拉列表的格式。
我需要对 $dataProvider 或 select2 做些什么才能让两者协同工作?
在我看来,有 2 个选项:
- 从$dataProvider 中提取'cat_name' 并将其设置为select2 可以使用的格式。
- 教 select2 如何读取 $dataProvider。
我不确定我会怎么做 2,我怀疑它会使 'tagging' 功能难以实现,因此我倾向于 1。
如有任何帮助,我们将不胜感激。
这是我的代码:
控制器端
public function actionCatSearch($q)
{
if (Yii::$app->request->isAjax) {
$searchModel = new CatSearch();
$dataProvider = $searchModel->search(['catSearch' => ['cat_name' => $q]]);
return $dataProvider->models;
}
}
JS端
$(document).ready(function(){
$('.js-select').select2({
tags: true,
ajax: {
url: 'cat-search',
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term
};
},
processResults: function (data, page) {
return {
results: data
};
},
cache: true
},
minimumInputLength: 1
});
});
尝试从模型中提取您需要的列
public function actionCatSearch($q)
{
if (Yii::$app->request->isAjax) {
$searchModel = new CatSearch();
$dataProvider = $searchModel->search(['catSearch' => ['cat_name' => $q]]);
$cat_name = array_column($dataProvider->models, 'cat_name');
return json_encode($cat_name);
}
}
花了一段时间,但我设法弄明白了。有几件事需要发生。首先,使用 Yii2 的内置序列化程序,然后 json_encode
结果。
在脚本方面,我不得不使用 templateResult
。
这里是修改的所有内容:
控制器端
public function actionCatSearch($q)
{
if (Yii::$app->request->isAjax) {
$searchModel = new CatSearch();
$dataProvider = $searchModel->search(['catSearch' => ['cat_name' => $q]]);
$serial = new Serializer();
$test = $serial->serialize($dataProvider);
return json_encode($test);
}
}
脚本端
function formatStuff (stuff) {
if (stuff.loading) return 'Searching...';
markup = "<p>" + stuff.cat_name + "</p>";
return markup;
}
$(document).ready(function(){
$('.js-select').select2({
tags: true,
ajax: {
url: 'cat-search',
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term
};
},
processResults: function (data, page) {
return {
results: data
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; },
minimumInputLength: 1,
templateResult: formatStuff,
});
});
我正在尝试将 jquery-select2(加载远程数据)插件与 Yii2 搜索模型一起使用。截至目前,我的控制器 returns 从搜索模型创建的 $dataProvider。但是,它显然不是 select2 可以用来创建下拉列表的格式。
我需要对 $dataProvider 或 select2 做些什么才能让两者协同工作?
在我看来,有 2 个选项:
- 从$dataProvider 中提取'cat_name' 并将其设置为select2 可以使用的格式。
- 教 select2 如何读取 $dataProvider。
我不确定我会怎么做 2,我怀疑它会使 'tagging' 功能难以实现,因此我倾向于 1。
如有任何帮助,我们将不胜感激。
这是我的代码:
控制器端
public function actionCatSearch($q)
{
if (Yii::$app->request->isAjax) {
$searchModel = new CatSearch();
$dataProvider = $searchModel->search(['catSearch' => ['cat_name' => $q]]);
return $dataProvider->models;
}
}
JS端
$(document).ready(function(){
$('.js-select').select2({
tags: true,
ajax: {
url: 'cat-search',
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term
};
},
processResults: function (data, page) {
return {
results: data
};
},
cache: true
},
minimumInputLength: 1
});
});
尝试从模型中提取您需要的列
public function actionCatSearch($q)
{
if (Yii::$app->request->isAjax) {
$searchModel = new CatSearch();
$dataProvider = $searchModel->search(['catSearch' => ['cat_name' => $q]]);
$cat_name = array_column($dataProvider->models, 'cat_name');
return json_encode($cat_name);
}
}
花了一段时间,但我设法弄明白了。有几件事需要发生。首先,使用 Yii2 的内置序列化程序,然后 json_encode
结果。
在脚本方面,我不得不使用 templateResult
。
这里是修改的所有内容:
控制器端
public function actionCatSearch($q)
{
if (Yii::$app->request->isAjax) {
$searchModel = new CatSearch();
$dataProvider = $searchModel->search(['catSearch' => ['cat_name' => $q]]);
$serial = new Serializer();
$test = $serial->serialize($dataProvider);
return json_encode($test);
}
}
脚本端
function formatStuff (stuff) {
if (stuff.loading) return 'Searching...';
markup = "<p>" + stuff.cat_name + "</p>";
return markup;
}
$(document).ready(function(){
$('.js-select').select2({
tags: true,
ajax: {
url: 'cat-search',
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term
};
},
processResults: function (data, page) {
return {
results: data
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; },
minimumInputLength: 1,
templateResult: formatStuff,
});
});