在1页而不是2中添加编辑功能

Question

我想知道它是否可能让我有一张桌子在显示数据，同时如果我点击编辑按钮，我可以编辑该桌子上的某些字段而不是转到其他页面并编辑它们。要开始我有一个表显示这样的数据。

<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 --> 

所以这一步完成之后，我尝试发布此信息到位指示功能，并将其保存在数据库中。 所以我主要关心的是，这是更多的2个步骤，并且我想在桌子上做所有事情，我不介意编辑第一个表的每个td类下的数据，但我真的希望用户不要去另一页。 因此，我正在寻找某人就如何在该表格或表格下完成额外编辑部分的建议。我只想编辑表格中的AMOUNT，INTEREST和LOAN PERIOD，我不需要其他的东西。请告诉我在步骤:)

Answer 1

我已经有了一点自己的代码。我想你想要的是能够点击一个td并编辑其中的数据？没有被重定向到另一个编辑页面？如果是这样，这可以通过Jquery和CI轻松完成。

首先，一旦你点击一个TD，你想抓住与之共同响应的Thead。你可以用下面的jquery抓住Thead。 您也想将TD的要能够编辑成CONTENTEDITABLE像遵循“：

`<td contenteditable="true"></td>` 


$("td").click(function(e){ 
    $("table thead tr th").eq($value.index()); 
}); 

这可能需要工作的，确保边中一点点THEAD变成数据库列。（我创建了一个较小版本的phpmyadmin，所以我的Theads是直接使用列名的）

现在你抓住这个之后，你可能需要知道你想要编辑的表的ID。通过给每个TR一个数据属性和我正在编辑的记录的ID。

现在你想编辑数据一旦你“发布”你的新输入。到目前为止，我们有我们正在编辑的记录的列名和ID。所缺少的就是桌子。同样，对我来说，我不需要这样做，因为我的网址响应了我正在编辑的字段。我想这对你来说不是很难找到自己的办法来做这样的事情（也许把表名（加密）发送到视图）。

现在您想要发送正在发送到您的处理程序的数据。你可以通过使用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')

Answer 2

编辑的一个简单的模型，这可能是有用的： -

<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的那些部分被隐藏或显示时被启用。