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


adding edit functionality in 1 page instead of 2

我想知道我是否有可能有一个显示数据的表,同时如果我单击编辑按钮,我可以编辑该表上的某些字段,而不是转到不同的页面并编辑它们。首先,我有一个显示此类数据的表格。

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

我正在使用挖空 js 来显示数据。因此,当此人单击"编辑钱借"时,我将他们带到他们编辑的不同页面,相关信息在这里。控制器功能首先转到。

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

因此,在完成此步骤后,我尝试将此信息发布到contoller函数并将其保存在数据库中。所以我主要担心的是 这不仅仅是 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 的某些部分。

我自己有一点代码。我认为您想要的是能够单击 td 并编辑其中的数据?没有被重定向到另一个编辑页面?如果是这样,这一切都可以通过Jquery和CI轻松完成。

首先,一旦您点击TD,您就想抓住与之共同响应的Thead。你可以用下面的Jquery来获取Thead。您还希望将您希望能够编辑的TD转换为可编辑的内容,如下所示":

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

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

这可能需要您进行一些工作,以确保 Thead 变成数据库列。(我创建了一个较小版本的phpmyadmin,所以我的头直接是列名(

现在,在获取此内容后,您可能需要知道要尝试编辑的表的哪个 ID。为此,我为每个 TR 提供了一个数据属性,其中包含我正在编辑的记录的 ID。

现在,您希望在"发布"新输入后编辑数据。到目前为止,我们有了正在编辑的记录的列名和 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')