我想知道我是否有可能拥有一个表格来显示数据，同时如果单击编辑按钮，我可以编辑该表格中的某些字段，而不是转到不同的页面并进行编辑他们。为了开始，我有一个表格显示这样的数据。
<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时，我将它们带到他们编辑的不同页面，其中的信息就在这里。 控制器功能首先进入。
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 -->
完成此步骤后，我尝试将此信息发布到控制器函数并将其保存在数据库中。 所以我主要担心的是这是两个步骤，我想在那个表上做一切，我不介意编辑第一个表的每个td类下的数据，但我真的希望用户不要去另一个页。 所以我正在寻找有人如何在该表本身或表格下完成这个额外编辑部分的建议。我只想编辑表中的AMOUNT，INTEREST和LOAN PERIOD，我不需要其他东西。请告诉我步骤:)）
答案 0 :(得分：1)
一个可能有用的简单编辑模型： -
<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部分时，将启用可编辑的observable。
答案 1 :(得分：0)
我自己有一小段代码。我想你想要的是能够点击一个td并编辑里面的数据？没有被重定向到另一个编辑页面？如果是这样，可以使用Jquery和CI轻松完成。
首先，当您点击TD时，您想要抓住与之共同响应的Thead。您可以使用以下Jquery获取Thead。 您还希望将您希望能够编辑的道明转变为满足，如跟随＆＃34;：
`<td contenteditable="true"></td>`
$("td").click(function(e){
$("table thead tr th").eq($value.index());
});
这可能需要您确保Thead变成数据库列的一些工作。 （我创建了一个较小版本的phpmyadmin，所以我的Theads直接是列名）
现在，在你抓住这个之后，你可能需要知道你正在尝试编辑的表格的哪个ID。我这样做是为每个TR提供一个数据属性，其中包含我正在编辑的记录的ID。
现在，您希望在发布＆＃34;发布＆＃34;之后编辑数据。你的新输入。到目前为止，我们已经有了我们正在编辑的记录的列名和ID。所有缺失的都是表格。同样，对我来说，我不需要这样做，因为我的URL会响应我正在编辑的字段。我想你找到一种方法来做这样的事情并不困难（或者把表名（加密）发送到视图中）。
现在您要将发送的数据发布到处理程序。您可以使用Jquery $.post()函数来执行此操作。
$("td").click(function(e){
var $id =$(this).parent().data('id');
$('td[contenteditable]').keydown(function(e) {
// trap the return key being pressed
if (e.keyCode === 13) {
e.preventDefault();
var $value = $(this);
var $field = $("table thead tr th").eq($value.index()).html();
$valuenew = $value.html();
$.post( "URL_to_post_to",
{ id: $id, newvalue: $valuenew, field: $field , table : "users"} );
//The code below displays a loading screen and then refreshes the page.
$(".se-pre-con").css("display", "");
setTimeout(function(){
location.reload(true);
}, 2000);
}
});
});
这就是我处理数据编辑的方式。现在要抓住帖子，您就像在CI中一样完全相同：$this->input->post('id')或$this->input->post('table')