我想知道我是否可以拥有一个显示数据的表格,同时如果我单击编辑按钮,我可以编辑该表格上的某些字段,而不是转到不同的页面进行编辑他们。首先,我有一个显示这样的数据的表格。
<tbody data-bind="foreach: moneyborrowedtable">
<tr>
<td class="text-center"><span data-bind="formatDate:$data.INSERT_DT"></span></td>
<td class="text-center"><span data-bind="text:$data.symbol"></span> <span data-bind="text:$data.Amount"></span></td>
<td class="text-center"><span data-bind="text:$data.Interest"></span> %</td>
<td class="text-center"><span data-bind="text:$data.Loantime"> Days</span></td>
<td class="text-center"><span data-bind="text:$data.StatusDescription"></span></td>
<td class="text-center">
<span href="#" data-bind="if: ($data.borrowed_amount > 0 || $data.status == 0)">View</span>
<!-- <a href="#" data-bind="if: $data.borrowed_amount > 0, click: $root.getMoneyBorrowedForPaying">Pay</a> -->
<a href="#" data-bind="ifnot: ($data.borrowed_amount > 0 || $data.status == 0), click: $root.editMoneyBorrowed , click: $root.goForIt" ><span style="padding: 5px 10px;" class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
<a href="#" data-bind="ifnot: ($data.borrowed_amount > 0 || $data.status == 0), click: $root.deleteMoneyBorrowed"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
</td>
</tr>
</tbody>
我正在使用knockout js来显示数据。因此,当用户单击 editMoneyBorrowed 时,我会将他们带到他们编辑的不同页面,相关信息就在这里。 Controller 函数首先到达的位置。
public function editMoneyRequest($id, $viewonly) {
$this->load->helper('form');
$this->load->model('admin_page');
$this->load->model('localization');
$this->load->model('moneyrequest_page');
$this->load->model('user_profile');
/* Yhdenmukaistetaan sidebarien ulkonäköä. Jussi 13.07.2014 */
$facebookId = $this->Facebook->getUser();
$sidebarData = array(
'userName' => $this->user_profile->getUserName(),
'facebookId' => $facebookId,
'caller' => 'getMyLoans'
);
$this->load->view('header', $this->history->getPreviousPageInArray());
$this->load->view('moneyexchange_sidebar_view', $sidebarData);
$userId = $this->user_profile->getUserId();
$data = array(
'viewonly' => $viewonly,
'userId' => $userId,
'userName' => $sidebarData['userName'],
'currencyList' => $this->localization->getCurrencyList(),
'preValues' => $this->admin_page->getPreValues(),
'assuranceList' => $this->localization->getTextParamValues($userId, 'money_request', 'assurance_code'),
'providerList' => $this->localization->getTextParamValues($userId, 'money_request', 'provider_code'),
'paymenttermList' => $this->localization->getTextParamValues($userId, 'money_loan', 'payment_term'),
'moneyRequest' => $this->moneyrequest_page->getMoneyRequestWithStatusDescription($id)
);
$this->load->view("request_money_edit_view", $data);
$this->load->view("footer");
}
这是用于编辑的html页面。
<div class="well">
<?php
if(validation_errors() != false)
{
echo '<div class="form-group has-error">';
echo'<ul>';
echo validation_errors('<li class="control-label">', '</li>');
echo'</ul>';
echo '</div>';
}
/* form-horizontal */
$attributes = array('class' => 'form-horizontal', "data-bind" => "submit: verifyLoginToLoanersClub");
echo form_open('moneyrequest/saveEditedMoneyRequest', $attributes);
/*
if ($viewonly == 'false') {
echo '<h4 class="pull-left>'. lang("offer_edit_money_request_title") . '</h4>';
} else {
echo '<h4 class="pull-left>'. lang("offer_view_money_request_title") . '</h4>';
}
*/
?>
<div class="row">
<div class="col-sm-4">
<h4 class="pull-left"><?php echo lang("offer_edit_money_request_title"); ?></h4>
</div> <!-- col-sm-4 -->
<div class="col-sm-4">
</div> <!-- col-sm-4 -->
<div class="col-sm-4">
<input class="form-control" value="<?php echo $moneyRequest[0]->StatusDescription; ?>" disabled="true">
</div> <!-- col-sm-4 -->
</div> <!-- row -->
<input type="hidden" id="request_money_userid" name="userId" value="<?php echo $userId; ?>">
<input type="hidden" id="request_money_username" name="userName" value="<?php echo $userName; ?>">
<input type="hidden" id="request_money_provider_id" name="provider_id" value="<?php echo $moneyRequest[0]->provider_id; ?>">
<input type="hidden" id="request_money_provider_name" name="provider_name" value="<?php echo $moneyRequest[0]->provider_name; ?>">
<input type="hidden" name="ID" value="<?php echo $moneyRequest[0]->ID; ?>">
<input type="hidden" name="status" value="<?php echo $moneyRequest[0]->status; ?>">
<input type="hidden" name="Owner" value="<?php echo $moneyRequest[0]->Owner; ?>">
<input type="hidden" name="loan_orig_id" value="<?php echo $moneyRequest[0]->loan_orig_id; ?>">
<input type="hidden" name="ORIG_ID" value="<?php echo $moneyRequest[0]->ORIG_ID; ?>">
<input type="hidden" name="invoice_orig_id" value="<?php echo $moneyRequest[0]->invoice_orig_id; ?>">
<div class="row">
<div class="col-sm-4">
<div class="<?php if(form_error('amount')!= null){echo ' has-error';} ?>">
<div class="control-label pull-left"><?php echo lang("offer_of_amount");?></div>
<input class="form-control" value="<?php echo $moneyRequest[0]->Amount; ?>" name="amount">
<!-- <select name="amount" id="request_money_select_amount" class="form-control"> -->
<?php /*
foreach ($preValues as $prevalue)
{
if ($prevalue->Type == 1)
{
echo '<option value="' . $prevalue->Value . '"';
if ($moneyRequest[0]->Amount == $prevalue->Value)
{
echo ' selected';
}
echo '>' . $prevalue->Value . '</option>';
}
} */
?>
</select>
</div>
</div> <!-- col-sm-4 -->
<div class="col-sm-4">
<div class="<?php if(form_error('currency')!= null){echo ' has-error';} ?>">
<div class="control-label pull-left"><?php echo lang("offer_of_currency");?></div>
<select name="currency" id="request_money_select_currency" class="form-control">
<?php
foreach ($currencyList as $currency)
{
echo '<option value="' . $currency->ID. '"';
if($currency->ID==$moneyRequest[0]->Currency)
{
echo 'selected';
}
echo '>' . $currency->Abbreviation .'';
echo '</option>';
}
?>
</select>
</div>
</div> <!-- col-sm-4 -->
<div class="col-sm-4">
<div class="<?php if(form_error('interest')!= null){echo ' has-error';} ?>">
<div class="control-label pull-left"><?php echo lang("offer_of_intrest");?></div>
<input class="form-control" type="text" value="<?php echo $moneyRequest[0]->Interest; ?>" name="interest">
<!-- <select name="interest" id="request_money_select_interest" class="form-control"> -->
<?php /*
foreach ($preValues as $prevalue)
{
if ($prevalue->Type == 2)
{
echo '<option value="' . $prevalue->Value . '"';
if ($moneyRequest[0]->Interest == $prevalue->Value)
{
echo ' selected';
}
echo '>' . $prevalue->Value . '</option>';
}
} */
?>
<!-- </select> -->
</div>
</div> <!-- col-sm-4 -->
</div> <!-- row -->
<div class="row">
<div class="col-sm-4">
<div class="<?php if(form_error('available')!= null){echo ' has-error';} ?>">
<div class="control-label pull-left"><?php echo lang("offer_of_avail");?></div>
<input class="form-control" type="text" data-provide="datepicker" type="text" data-date-format="yyyy-mm-dd" value="<?php echo $moneyRequest[0]->Available; ?>" name="available">
</div>
</div> <!-- col-sm-4 -->
<div class="col-sm-4">
<div class="<?php if(form_error('loantime')!= null){echo ' has-error';} ?>">
<div class="control-label pull-left"><?php echo lang("offer_loan_time_days");?></div>
<select name="loantime" id="offer_money_select_loantime" class="form-control">
<?php
foreach ($preValues as $prevalue)
{
if ($prevalue->Type == 3)
{
/*echo'<option value="'. $prevalue->ID . '">' . $prevalue->Value . '</option>'; */
echo '<option value="' . $prevalue->Value . '"';
if ($moneyRequest[0]->Loantime == $prevalue->Value)
{
echo ' selected';
}
echo '>' . $prevalue->Value . '</option>';
}
}
?>
</select>
</div>
</div>
</form> <!-- Form Horizontal -->
</div> <!-- well -->
因此,完成此步骤后,我尝试将此信息发布到 Controller 函数并将其保存在数据库中。 所以我主要关心的是,这超过了 2 个步骤,而且我想在该表本身上执行所有操作,我不介意编辑第一个表的每个 td 类下的数据,但我真的希望用户不要转到另一个表页。 因此,我正在寻找有人建议我如何在该表本身或表下完成这个额外的编辑部分。我只想编辑表中的金额、利息和贷款期限,我不需要其他内容。请告诉我步骤:)
最佳答案
一个可能有用的简单编辑模型:-
<span data-bind="text:firstName,visible:!editable()">
</span>
<input type="text" data-bind="value:firstName,visible:editable"/ >
<button data-bind="click:editMe,text:editButtonText"></button>
https://jsfiddle.net/6fvnb946/18/
要点: 当您单击按钮时,可编辑的可观察对象会被启用,并且基于 UI 部分的隐藏或显示。
关于javascript - 在 1 页而不是 2 页中添加编辑功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35147952/