添加新的列表选项,动态刷新更新后的列表
Adding new list options, refreshing updated list dynamically
我正在通过尝试使用它制作一个项目来学习Yii2。
我有一个表格,里面有一些列表。我想实现一个添加新的列表选项的功能。
当前点击"添加新选项"按钮调用弹出式表单。提交后,Yii带我到这个新选项的页面。原因:
public function actionCreate()
{
$model = new Request();
if ($model->load(Yii::$app->request->post()) && $model->save()) {
return $this->redirect(['view', 'id' => $model->id]);
} else {
return $this->render('create', [
'model' => $model,
'manager' => Stuff::find()->all(),
'movercompany' => MoverCompany::find()->all(),
'worktype' => Worktype::find()->all(),
'customer' => Customer::find()->all(),
]);
}
}
提交后我想要的只是刷新更新的列表并选择新的选项。
我该怎么做?
_form.php:
<?php
use yii'helpers'Html;
use yii'helpers'ArrayHelper;
use yii'helpers'Url;
use yii'widgets'ActiveForm;
use kartik'select2'Select2;
use yii'bootstrap'Modal;
/* @var $this yii'web'View */
/* @var $model app'models'Request */
/* @var $form yii'widgets'ActiveForm */
?>
<div class="request-form">
<?php
$form = ActiveForm::begin();
date_default_timezone_set("Europe/Moscow");
$model->request_date = date('Y-m-d');
$model->request_time = date('H:i');
?>
<?= $form->field($model, 'request_date')->widget('yii'jui'DatePicker::classname(), [
'language' => 'ru',
'dateFormat' => 'yyyy-MM-dd',
]) ?>
<?= $form->field($model, 'request_time')->textInput(['style' => 'width: 70px;']) ?>
<?= $form->field($model, 'customer_id')->widget(Select2::classname(), [
'data' => ArrayHelper::map($customer, 'id', 'fullInfo'),
'language' => 'ru',
'options' => ['placeholder' => 'Выбрать клиента...'],
'pluginOptions' => [
'allowClear' => true
],
]);?>
<?= $form->field($model, 'KP_id')->textInput() ?>
<?= $form->field($model, 'quantity')->input('number', ['style' => 'width: 75px;']) ?>
<div>
<?= $form->field($model, 'request_type')->dropDownList(
ArrayHelper::map($worktype, 'id', 'title'),
array('prompt' => 'Выберите вид работ:', 'style' => 'width: 200px;')
) ?>
<?= Html::button('+', ['value' => Url::to('index.php?r=worktype/create'), 'class' => 'btn btn-success', 'id' => 'modalButton']) ?>
</div>
<?php
Modal::begin([
'header' => '<h4>Виды работ</h4>',
'id' => 'modal',
'size' => 'modal-lg',
]);
echo "<div id='modalContent'></div>";
Modal::end();
?>
<?= $form->field($model, 'payment_type')->dropDownList(
[
'0' => 'Нал',
'1' => 'Безнал'
],
['style' => 'width: 80px;'])
?>
<?= $form->field($model, 'address')->textarea(['rows' => 2]) ?>
<?= $form->field($model, 'minimal_payment')->input('number', ['style' => 'width: 100px;']) ?>
<?= $form->field($model, 'mover_company_id')->dropDownList(
ArrayHelper::map($movercompany, 'id', 'name'),
array('prompt' => 'Выберите компанию:', 'style' => 'width: 200px;')
) ?>
<?= $form->field($model, 'manager_id')->dropDownList(
ArrayHelper::map($manager, 'id', 'name'),
array('prompt' => 'Выберите менеджера:', 'style' => 'width: 200px;')
) ?>
<?= $form->field($model, 'workers_number')->input('number', ['style' => 'width: 100px;']) ?>
<?= $form->field($model, 'workhours')->input('number', ['style' => 'width: 100px;']) ?>
<?= $form->field($model, 'payment_additional')->input('number', ['style' => 'width: 100px;']) ?>
<?= $form->field($model, 'payment_car')->input('number', ['style' => 'width: 100px;']) ?>
<?= $form->field($model, 'payment_sum')->input('number', ['style' => 'width: 100px;']) ?>
<?= $form->field($model, 'status')->dropDownList(
[
'0' => 'Открыт',
'1' => 'Закрыт'
],
['style' => 'width: 200px;']
) ?>
<?= $form->field($model, 'comment')->textarea(['rows' => 2]) ?>
<div class="form-group">
<?= Html::submitButton($model->isNewRecord ? 'Создать' : 'Обновить', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
</div>
<?php ActiveForm::end(); ?>
</div>
我已经使用next技术实现了这个。
我需要在请求表单页面上动态地向公司列表添加一个选项。
-
所以首先我们在公司控制器中创建新的动作。它不同于actionCreate由renderAjax而不是渲染和返回1,而不是带你到新的公司页面:
公共函数actionAdd(){$model = new Company();
if ($model->load(Yii::$app->request->post()) && $model->save()) { echo 1; } else { return $this->renderAjax('create', [ 'model' => $model, ]); };
}
-
在包含公司列表的视图的_form.php中添加按钮:
Url:: (index . php ? r =公司/添加),"类"=>"btn btn-success",' id ' => ' modalButton ']) ?> -
添加包含创建新公司表单的弹出窗口。
3.1。_form.php:
use yii'bootstrap'Modal;
use yii'widgets'Pjax;
<?php
Modal::begin([
'header' => '<h4>Company<h4>',
'id' => 'modal',
'size' => 'modal-lg',
]);
echo "<div id='modalContent'></div>";
Modal::end();
?>
3.2。对公司列表应用pjax:
<?php Pjax::begin(['id' => 'companyList']); ?>
...
<?php Pjax::end(); ?>
3.3。编辑资产/AppAsset.php:
public $js = [
'js/main.js'
];
3.4。创建文件夹和js文件web/js/main.js:
$(function(){
$('#modalButton').click(function(){
$('#modal').modal('show')
.find('#modalContent')
.load($(this).attr('value'));
});
});
3.5。添加脚本到公司视图_form.php:
<?php
$script = <<< JS
$('form#{$model->formName()}').on('beforeSubmit', function(e)
{
var '$form = $(this);
$.post(
'$form.attr("action"), // serialize yii2 form
'$form.serialize()
)
.done(function(result) {
if(result == 1)
{
$(document).find('#modal').modal('hide');
$.pjax.reload({container:'#companyList'});
$(document).on('pjax:complete', function() {
$('#customer-company_id option:last-child').attr('selected', true);
})
}else
{
$('$form).trigger("reset");
$("#message").html(result.message);
}
}).fail(function()
{
console.log("server error");
});
return false;
});
JS;
$this->registerJs($script);
?>
这是我们所拥有的:按下添加按钮弹出一个带有新选项属性的表单。提交此表单关闭弹出窗口,刷新公司列表并选择新选项,这是最后一个。
相关文章:
- 更新成员数据模型中的记录列表
- orderBy$filter在项目删除(拼接)后阻止ng重复列表更新
- 如何在从下拉列表中选择不同的值后更新和调用javascript函数
- 如何创建独立于数组更新的组件列表
- 下拉列表未从计算的可观察项更新
- 正在更新列表框所选索引
- JavaScript:更新<选择>给定月份输入的天数列表
- Jquery 拖动列表更新
- jQuery使用XML数据更新UL列表
- jQuery:动态更新 N 个最新值的列表
- 从knockout.js中的下拉列表更新对象
- 基于第一多选下拉列表更新第二多选下拉列表
- jquery多选列表更新失败
- 在jquery中用两个下拉列表更新URL
- 基于下拉列表更新ng中的值重复
- AJAX列表更新,获取新元素并计数
- 选择JavaScript列表更新
- 使用easyrtc的房间占用侦听器,如何在用户列表更新后立即调用其他用户
- 在ASP.NET MVC中使用Jquery基于所选下拉列表更新表
- 根据另一个列表更新选择列表