javascript – 如何插入多个值onkey更改动作?

前端之家收集整理的这篇文章主要介绍了javascript – 如何插入多个值onkey更改动作?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
嗨,我正在使用codeigniter框架.我已经完成了一个自动填充动作与onkey更改.我使用ajax来发布一个id值给我的控制器功能,将从服务表中获取单个数据行.
现在我有超过1个记录的排名是相同的id.例如,
+----+-----------------+------+
+  1 +  iPhone6        +   2  +
+----+-----------------+------+
+  1 +  ipod           +   5  +
+----+-----------------+------+

这里我有两行具有相同的id现在当我发布id值,那么我需要获取数据和显示在我的视图页面.
为此,我需要在表中添加行.

我的控制器功能

<?PHP
class Admin_billing extends CI_Controller {

    public function __construct()
    {
        parent::__construct();

        $this->load->model('billing_model');

    }
 public function getdetails()
     {  
        $data_to_search=$_POST['val'];
        $details=array();

        $details['description']=$this->billing_model->get_service_name($data_to_search);
        $details['type']=$this->billing_model->get_service_name($data_to_search);
        $details['price']=$this->billing_model->get_service_pricevalue($data_to_search);

        echo json_encode($details);
     }
    }

这里有一个getdetails()具有数组细节.在这个细节数组中,我有单个数据的键和值,例如它可以保存数据
description =>电话订单,type => iphone,price => $7000.这将填写我的视图页面中的数据.现在如果我有不止一行如何使它工作?

我的模型功能

public function get_service_name($id)
{
    $this->db->select('*');
    $this->db->from('service');
    $this->db->where('id',$id);
    $query = $this->db->get();
    $result = $query->result_array();
    return $result[0]['name']; 
}

函数用于从我的数据库中的服务表中获取名称.

我的视图文件

<html>

<head>
  <script src="<?PHP echo base_url(); ?>assets/js/jquery.min.js"></script>
<script type="text/javascript" src="<?PHP echo base_url(); ?>assets/js/jquery-2.1.1.min.js"></script>
<script type='text/javascript' src='<?PHP echo base_url(); ?>assets/js/jquery-compat-git.js'></script>
<link href="<?PHP echo base_url(); ?>assets/css/jquery-ui.css" rel="Stylesheet"></link>
<script src="<?PHP echo base_url(); ?>assets/js/jquery-ui.js" ></script>


<script type='text/javascript'>
var baseurl='<?PHP echo base_url(); ?>';
$(function() {
    $('#test').on('change','input[name="pid[]"]',function() {
        var indexOfTheChangedRow = $(this).closest("tr").index();
        get_values(this.value,indexOfTheChangedRow);
    });
});

function get_values(val,rowIndex)
{
 $.ajax({
    url: baseurl + 'admin/billing/getdetails',type: 'post',data: {
        val: val
    },success: function (indexOfTheChangedRow,response) {
        if (response != "") {
            var json = jQuery.parseJSON(response),rowToUpdate = $("#test tr:nth-child(" + (indexOfTheChangedRow + 1) + ")");
            $('.description',rowToUpdate).val(json.description);
            $('.type',rowToUpdate).val(json.type);

        }
    }.bind(window,rowIndex),error: function (response) {
        alert("error");
    }
});
}

function displayResult() {
<?PHP

      $attributes = array('class' => 'form-horizontal','id' => '');
      $options_employee = array('' => "Select");
      foreach ($employee as $row)
      {
        $options_employee[$row['first_name']] = $row['first_name'];
      }
    $dropdown = form_dropdown('employee[]',$options_employee,set_value('employee[]'),'class="span2"');

      ?>

    var complex = <?PHP echo json_encode($dropdown); ?>;

    var row = document.getElementById("test").insertRow(-1);
    row.innerHTML = '<td><div>'+complex+'</div></td><td><input type="text" name="start_time[]" value="" style="width:35px;"/></td><td><input type="text" name="pid[]" onclick="BindControls()" id="pid" style="width:35px;"/></td><td><input type="text" name="description[]" class="description" value="" style="width:145px;"/></td><td><input type="text" name="type[]" class="type" value="" style="width:45px;"/></td>';
}
</script>

</head>


<body>
<?PHP

      $attributes = array('class' => 'form-horizontal','id' => '');
      $options_employee = array('' => "Select");
      foreach ($employee as $row)
      {
        $options_employee[$row['first_name']] = $row['first_name'];
      }
 echo form_open('admin/billing/add_tickets');
      ?>
            <div id="form"> 
             <!-- div form starts here.its for add table  -->
            <table id="test">
            <thead>
            <tr>
            <td>Employee</td>
            <td>Start Time</td>
            <td>Id</td>
            <td>Description</td>
            <td>Type</td>

            </tr>
            </thead>
            <tbody>
            <tr>
            <td><?PHP echo form_dropdown('employee[]','class="span2"');?></td>
            <td><input type="text" name="start_time[]" value="" style="width:35px;"/></td>
            <td><input type="text" name="pid[]" id="pid" value="" style="width:35px;"/></td>
            <td><input type="text" name="description[]" class="description" value="" style="width:145px;"/></td>
            <td><input type="text" name="type[]" class="type" style="width:45px;"/></td>

            </tr>
            </tbody>
            </table>

            <div id="add_row">
        <button type="button" onClick="displayResult()" class="add_r"></button>
                </div>

  <script src="<?PHP echo base_url(); ?>assets/js/function.js"></script>

</body>
</html>

这个我的视图页面在这里我有一个表与id测试,这个表由行与每个单元格中的输入元素.我有一个添加行按钮,调用一个javascript函数来动态添加行.在这个表中,我有一个输入元素与id =“pid []”当键更改操作发生时,它调用ajax函数并从数据库获取值.
这对单记录工作正常.当我有多个记录时,我没有明确的想法.

我需要得到一组数据.

2.动态添加行,并填充一个键更改操作中添加的所有行中的数据.

有人可以帮我代码吗?提前致谢.

解决方法

编辑:一旦获得了数组,只需要使用json_encode()并发回到ajax.在那里你可以解码它.你还需要在你的ajax中使用它:dataType:’json’

还要注意,我们在PHP和returnig $data数组中设置关键字’error’,如果有错误并检查ajax的success()中的值来推断是否有错误.

Javascript:注意这是你将要做的条纹化版本,但它的目的是为了你所需要做的.希望有帮助

$.ajax ( { method : 'POST',url : scriptUrl,data : data,cache : false,processData: false,/** Don't process the data **/
    contentType: false,/** Set content type to false as jQuery will tell the server its a query string request **/
    dataType : 'json',/** we will return data in the key-value format from the PHP file **/
    success : function ( data,textStatus,jqXHR ) { /** We can treat the returned data as object. **/
        if ( typeof data.error === 'undefined' ) { /** damn error **/ }
        else { /** We got our data. **/
            for (var key in data) {
                alert(key + " -> " + data[key]);
            }
        }
    }

无论记录数量和列数如何,这都适用于所有查询.

$query = $this->db->get();

/** Check for return value
    If there is an error,set error key,we will use it in the ajax to
    check if there was an error at the bancend 
 */

if ( ! $query ) { $data['error'] = TRUE; return $data; }

/**
 * Array to hold our data.
 * For reference look at the foreach() loop.
 */

$data = array (  );

/** Get each record as $row. **/
foreach ( $query->result (  ) as $row )
{

    /**
     * Temporary array to hold the data of this record.
     */
    $temp = array (  );

    /** Get each value as $key => $value pair **/
    foreach ( $row as $key => $value)
    {
        $temp [ $key ] = $value;
    }    
    array_push ( $data,$temp );
}
return $data;

现在$data是一个多维关联数组,$data [0]等于一个记录数组(‘id’=> 1,’name’=>’something’…);

$data = array ( array ( 'id' =>1,'name' => 'something'... ),( 'id' =>1,.... );

猜你在找的JavaScript相关文章