如何加载模型数据，以选择二下拉它使用了Ajax过滤在Yii中 [英] How to load model data to Select2 dropdown which uses Ajax filtering in Yii
问题描述
我用下面的选择2 Yii的小部件在我看来，以填充下拉列表。因为必需的选择列表的preparation数据包含多个2K记录我使用选择2与minimumInputLength参数和一个Ajax查询以生成基于用户输入的列表的部分结果。如果我创建一个新的纪录我一点问题都没有。它填充一切正常，我可以将数据保存到我的数据库。但是我不知道如何在我的更新动作载入保存的数据返回到该下拉。我读的地方，initselection用于这一目的，但我无法弄清楚如何使用它。
有人可以帮助我在这？
我的看法：
$这个 - ＆GT;插件（'ext.select2.ESelect2'，阵列（
'选择'=＆GT; #EtelOsszerendeles_osszetevo_id，
'选项'=＆GT;阵列（
allowClear'=＆GT;如此，
'占位'=＆GT;'！凯雷姆válasszonösszetevőt'，
minimumInputLength'=＆GT; 3，
AJAX=＆GT;阵列（
'URL'=＆GT;的Yii ::应用程序（） - ＆GT; createUrl（'etelOsszerendeles / filterOsszetevo'），
'的dataType'=＆GT; JSON，
quietMillis'=＆GT; 100，
'数据'=＆GT; JS：功能（文字，网页）{
返回 {
问：文本，
page_limit：10，
页面：页面，
};
}'，
'结果'=＆GT;JS：功能（数据页）{VAR更多=（页* 10）＆LT; data.total;返程{结果：数据，更多：更多}; }'，
），
），
））;？＆GT;
我的控制器的动作过滤器：
公共职能actionFilterOsszetevo（）
{
$列表= EtelOsszetevo ::模型（） - ＆GT;的findAll（'NEV像：osszetevo_neve'，阵列（'：osszetevo_neve'=＆gt;中％$ _ GET ['Q']％）。）;
$结果=阵列（）;
的foreach（$清单为$项）{
$结果[] =阵列（
'ID'=＆GT; $本期特价货品＆GT; ID，
文本=＆GT; $本期特价货品＆GT;内华达州，
）;
}
回声CJSON :: EN code（$结果）;
}
我用initSelection加载现有记录在以这种方式更新（我换成你的一些看法code与 ... 专注于主要的变化）。测试用的Yii 1.1.14。从本质上讲，我使用两种不同的Ajax调用：
查看：
＆LT; PHP
$这个 - ＆GT;插件（'ext.select2.ESelect2'，阵列（
'选择'=＆GT; #EtelOsszerendeles_osszetevo_id，
'选项'=＆GT;阵列（
...
...
AJAX=＆GT;阵列（
'URL'=＆GT;的Yii ::应用程序（） - ＆GT; createUrl（'客户机/ searchByQuery'），
...
...
'数据'=＆GT; JS：功能（文字，网页）{
返回 {
问：文本，
...
};
}'，
...
），
initSelection'=＆GT;JS：功能（元素，回调）{
VAR ID = $（元素）.VAL（）; //读取#selector值
如果（ID！==）{
$阿贾克斯（'的Yii ::应用程序（） - ＆GT; createUrl（客户端/ searchById'）'，{
数据：{ID：ID}，
数据类型：JSON
}）进行（功能（数据，textStatus，jqXHR）{回调（数据[0]）;}）;
}
}'，
），
））;
？＆GT;
现在在你的控制器，你应该接收参数为Ajax处理：查询（Q），为字符串，插入时;更新时的ID（ID）为INT。参数名称必须与阿贾克斯数据参数（在此示例中插入①;在更新 ID ）时读取$ _GET。 code未重构/优化：
控制器：
公共职能actionSearchByQuery（）{
$数据=客户::模型（） - ＆GT; searchByQuery（（字符串）$ _ GET ['Q']）;
$结果=阵列（）;
的foreach（$数据$项）：
$结果[] =阵列（
'ID'=＆GT; $本期特价货品＆GT; ID，
文本=＆GT; $本期特价货品＆GT;的名字，
）;
endforeach;
标题（内容类型：应用程序/ JSON）;
回声CJSON :: EN code（$结果）;
的Yii ::应用程序（） - ＆GT;结束（）;
}
公共职能actionSearchById（）{
$数据=客户::模型（） - ＆GT; findByPk（（INT）$ _GET ['身份证']）;
$结果=阵列（）;
的foreach（$数据$项）：
$结果[] =阵列（
'ID'=＆GT; $本期特价货品＆GT; ID，
文本=＆GT; $本期特价货品＆GT;的名字，
）;
endforeach;
标题（内容类型：应用程序/ JSON）;
回声CJSON :: EN code（$结果）;
的Yii ::应用程序（） - ＆GT;结束（）;
}
模式 - 自定义查询和订单/安全一点/清洁:)
公共职能searchByQuery（$查询=''）{
$标准=新CDbCriteria;
$ criteria-＆GT;选择='身份证，SSN，FULL_NAME;
$ criteria-＆GT;条件=SSN，如：SSN或FULL_NAME，如：FULL_NAME;
$ criteria-＆GT; PARAMS =阵列（
：SSN'=＆GT; '％'。 $查询。％，
：FULL_NAME'=＆GT; '％'。 $查询。％，
）;
$ criteria-＆GT;限额= 10;
返回$这个 - ＆GT;的findAll（$条件）;
}
编辑：
它的工作原理开箱时更新ploaded与传统的HTTP邮政（同步，例如使用的Yii生成的表单）$ P $。对于异步/ AJAX的更新，例如使用jQuery：
事件/触发：
$（'＃按钮'）。在（点击，功能（五）{
...
...您的更新逻辑，Ajax请求，读取数值，等
...
$（'＃select2_element）选择2（VAL，id_to_load）。
}）;
通过这个， initSelection 将再次与新的 id_to_load 值异步方式运行，通过ID重装纪录。
在你的情况，并为您的需求， initSelection 可能是完全不同的，以避免从数据库加载记录或的您可以使用 formatResult 和 formatSelection 自定义功能（在描述加载远程数据采集源$ C $ C）。阅读文档，我的理解是initSelection的回调需要通过ID和文本元素JSON数据正确加载，或者你可以尝试这两个概念（这initSelection与您的自定义JS事件/触发调用）（未测试）相结合：
'initSelection'=＆GT;JS：功能（元素，回调）{
//这里的code加载，建立自己的价值，
//这是非常基本的样本
VAR ID =身份识别码;
VAR文本='myvalue的';
数据= {
ID：身份证，
文：文本
}
回调（数据）;
}'，
或直接触发电话：
$（'＃按钮'）。在（点击，功能（五）{
...
......
$（＃select2_element）选择2（数据，{ID：身份识别码，文：MYVAL}）;
}）;
希望有所帮助。
I use the following select2 Yii widget in my view to populate a drop-down list. Since the data necessary for the preparation of the select list consists of more than 2K records I use select2 with minimumInputLength parameter and an ajax query to generate partial result of the list based on user input. If I create a new record I have no problem at all. It populates everything fine and I can save data to my database. However I don't know how to load saved data back to this drop-down during my update action. I read somewhere that initselection intended for this purpose but I couldn't figure out how to use it.
Can someone help me out on this?
My view:
$this->widget('ext.select2.ESelect2', array(
'selector' => '#EtelOsszerendeles_osszetevo_id',
'options' => array(
'allowClear'=>true,
'placeholder'=>'Kérem válasszon összetevőt!',
'minimumInputLength' => 3,
'ajax' => array(
'url' => Yii::app()->createUrl('etelOsszerendeles/filterOsszetevo'),
'dataType' => 'json',
'quietMillis'=> 100,
'data' => 'js: function(text,page) {
return {
q: text,
page_limit: 10,
page: page,
};
}',
'results'=>'js:function(data,page) { var more = (page * 10) < data.total; return {results: data, more:more }; }',
),
),
));?>
My controller's action filter:
public function actionFilterOsszetevo()
{
$list = EtelOsszetevo::model()->findAll('nev like :osszetevo_neve',array(':osszetevo_neve'=>"%".$_GET['q']."%"));
$result = array();
foreach ($list as $item){
$result[] = array(
'id'=>$item->id,
'text'=>$item->nev,
);
}
echo CJSON::encode($result);
}
I use initSelection to load existing record for update in this way (I replaced some of your view code with ... to focus in main changes). Tested with Yii 1.1.14. Essentially, I use two different ajax calls:
View:
<?php
$this->widget('ext.select2.ESelect2', array(
'selector' => '#EtelOsszerendeles_osszetevo_id',
'options' => array(
...
...
'ajax' => array(
'url' => Yii::app()->createUrl('client/searchByQuery'),
...
...
'data' => 'js: function(text,page) {
return {
q: text,
...
};
}',
...
),
'initSelection'=>'js:function(element,callback) {
var id=$(element).val(); // read #selector value
if ( id !== "" ) {
$.ajax("'.Yii::app()->createUrl('client/searchById').'", {
data: { id: id },
dataType: "json"
}).done(function(data,textStatus, jqXHR) { callback(data[0]); });
}
}',
),
));
?>
Now in your controller you should receive parameters for ajax processing: query (q), as string, when inserting; id (id) as int when updating. Parameter names must be same as ajax data parameters (in this sample insert q; in update id) when read in $_GET. Code is not refactored/optimized:
Controller:
public function actionSearchByQuery(){
$data = Client::model()->searchByQuery( (string)$_GET['q'] );
$result = array();
foreach($data as $item):
$result[] = array(
'id' => $item->id,
'text' => $item->name,
);
endforeach;
header('Content-type: application/json');
echo CJSON::encode( $result );
Yii::app()->end();
}
public function actionSearchById(){
$data = Client::model()->findByPk( (int) $_GET['id'] );
$result = array();
foreach($data as $item):
$result[] = array(
'id' => $item->id,
'text' => $item->name,
);
endforeach;
header('Content-type: application/json');
echo CJSON::encode( $result );
Yii::app()->end();
}
Model - custom query and a little of order / security / clean :)
public function searchByQuery( $query='' ) {
$criteria = new CDbCriteria;
$criteria->select = 'id, ssn, full_name';
$criteria->condition = "ssn LIKE :ssn OR full_name LIKE :full_name";
$criteria->params = array (
':ssn' => '%'. $query .'%',
':full_name' => '%'. $query .'%',
);
$criteria->limit = 10;
return $this->findAll( $criteria );
}
EDIT:
It works out of box when update is preloaded with traditional HTTP Post (synchronous, for example with Yii generated forms). For async/Ajax updates, for example with JQuery:
Event / Trigger:
$('#button').on("click", function(e) {
...
... your update logic, ajax request, read values, etc
...
$('#select2_element').select2('val', id_to_load );
});
With this, initSelection will run again in async way with new id_to_load value, reloading record by id.
In your case and for your needs, initSelection could be complete different to avoid load record from db or you can use formatResult and formatSelection custom functions (are described in Load Remote Data sample source code). Reading documentation, I understand that initSelection's callback need JSON data with id and text elements to load properly or you could try to combine both concepts (this initSelection with your custom JS event/trigger call) (not tested):
'initSelection'=>'js:function(element,callback) {
// here your code to load and build your values,
// this is very basic sample
var id='myId';
var text='myValue';
data = {
"id": id,
"text": text
}
callback(data);
}',
Or directly on Trigger call:
$('#button').on("click", function(e) {
...
... ...
$("#select2_element").select2("data", {id: "myId", text: "MyVal"});
});
Hope that helps.
这篇关于如何加载模型数据，以选择二下拉它使用了Ajax过滤在Yii中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
