在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的那些部分被隱藏或顯示時被啓用。