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

标签 javascript php codeigniter knockout.js

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

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

相关文章:

php - 当小数前面没有数值时, Twig 假设标点符号/字符串?

php - 带有 CLI 脚本的 Codeigniter 站点

mysql - 如何在 codeigniter mysql 中使用不同的 id 执行多次更新

php - 当codeigniter中Left Join表为空时查询返回空

javascript - 巴别塔 : Function parameter types in ES6

区间搜索树的Javascript实现

javascript - 在 div 底部加载动态内容

javascript - 谷歌地图导致其他元素溢出正文

php - preg_replace表中的td

php - Polybuild PHP 文件