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

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

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

我的控制器功能

  1. <?PHP
  2. class Admin_billing extends CI_Controller {
  3.  
  4. public function __construct()
  5. {
  6. parent::__construct();
  7.  
  8. $this->load->model('billing_model');
  9.  
  10. }
  11. public function getdetails()
  12. {
  13. $data_to_search=$_POST['val'];
  14. $details=array();
  15.  
  16. $details['description']=$this->billing_model->get_service_name($data_to_search);
  17. $details['type']=$this->billing_model->get_service_name($data_to_search);
  18. $details['price']=$this->billing_model->get_service_pricevalue($data_to_search);
  19.  
  20. echo json_encode($details);
  21. }
  22. }

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

我的模型功能

  1. public function get_service_name($id)
  2. {
  3. $this->db->select('*');
  4. $this->db->from('service');
  5. $this->db->where('id',$id);
  6. $query = $this->db->get();
  7. $result = $query->result_array();
  8. return $result[0]['name'];
  9. }

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

我的视图文件

  1. <html>
  2.  
  3. <head>
  4. <script src="<?PHP echo base_url(); ?>assets/js/jquery.min.js"></script>
  5. <script type="text/javascript" src="<?PHP echo base_url(); ?>assets/js/jquery-2.1.1.min.js"></script>
  6. <script type='text/javascript' src='<?PHP echo base_url(); ?>assets/js/jquery-compat-git.js'></script>
  7. <link href="<?PHP echo base_url(); ?>assets/css/jquery-ui.css" rel="Stylesheet"></link>
  8. <script src="<?PHP echo base_url(); ?>assets/js/jquery-ui.js" ></script>
  9.  
  10.  
  11. <script type='text/javascript'>
  12. var baseurl='<?PHP echo base_url(); ?>';
  13. $(function() {
  14. $('#test').on('change','input[name="pid[]"]',function() {
  15. var indexOfTheChangedRow = $(this).closest("tr").index();
  16. get_values(this.value,indexOfTheChangedRow);
  17. });
  18. });
  19.  
  20. function get_values(val,rowIndex)
  21. {
  22. $.ajax({
  23. url: baseurl + 'admin/billing/getdetails',type: 'post',data: {
  24. val: val
  25. },success: function (indexOfTheChangedRow,response) {
  26. if (response != "") {
  27. var json = jQuery.parseJSON(response),rowToUpdate = $("#test tr:nth-child(" + (indexOfTheChangedRow + 1) + ")");
  28. $('.description',rowToUpdate).val(json.description);
  29. $('.type',rowToUpdate).val(json.type);
  30.  
  31. }
  32. }.bind(window,rowIndex),error: function (response) {
  33. alert("error");
  34. }
  35. });
  36. }
  37.  
  38. function displayResult() {
  39. <?PHP
  40.  
  41. $attributes = array('class' => 'form-horizontal','id' => '');
  42. $options_employee = array('' => "Select");
  43. foreach ($employee as $row)
  44. {
  45. $options_employee[$row['first_name']] = $row['first_name'];
  46. }
  47. $dropdown = form_dropdown('employee[]',$options_employee,set_value('employee[]'),'class="span2"');
  48.  
  49. ?>
  50.  
  51. var complex = <?PHP echo json_encode($dropdown); ?>;
  52.  
  53. var row = document.getElementById("test").insertRow(-1);
  54. 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>';
  55. }
  56. </script>
  57.  
  58. </head>
  59.  
  60.  
  61. <body>
  62. <?PHP
  63.  
  64. $attributes = array('class' => 'form-horizontal','id' => '');
  65. $options_employee = array('' => "Select");
  66. foreach ($employee as $row)
  67. {
  68. $options_employee[$row['first_name']] = $row['first_name'];
  69. }
  70. echo form_open('admin/billing/add_tickets');
  71. ?>
  72. <div id="form">
  73. <!-- div form starts here.its for add table -->
  74. <table id="test">
  75. <thead>
  76. <tr>
  77. <td>Employee</td>
  78. <td>Start Time</td>
  79. <td>Id</td>
  80. <td>Description</td>
  81. <td>Type</td>
  82.  
  83. </tr>
  84. </thead>
  85. <tbody>
  86. <tr>
  87. <td><?PHP echo form_dropdown('employee[]','class="span2"');?></td>
  88. <td><input type="text" name="start_time[]" value="" style="width:35px;"/></td>
  89. <td><input type="text" name="pid[]" id="pid" value="" style="width:35px;"/></td>
  90. <td><input type="text" name="description[]" class="description" value="" style="width:145px;"/></td>
  91. <td><input type="text" name="type[]" class="type" style="width:45px;"/></td>
  92.  
  93. </tr>
  94. </tbody>
  95. </table>
  96.  
  97. <div id="add_row">
  98. <button type="button" onClick="displayResult()" class="add_r"></button>
  99. </div>
  100.  
  101. <script src="<?PHP echo base_url(); ?>assets/js/function.js"></script>
  102.  
  103. </body>
  104. </html>

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

我需要得到一组数据.

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

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

解决方法

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

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

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

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

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

  1. $query = $this->db->get();
  2.  
  3. /** Check for return value
  4. If there is an error,set error key,we will use it in the ajax to
  5. check if there was an error at the bancend
  6. */
  7.  
  8. if ( ! $query ) { $data['error'] = TRUE; return $data; }
  9.  
  10. /**
  11. * Array to hold our data.
  12. * For reference look at the foreach() loop.
  13. */
  14.  
  15. $data = array ( );
  16.  
  17. /** Get each record as $row. **/
  18. foreach ( $query->result ( ) as $row )
  19. {
  20.  
  21. /**
  22. * Temporary array to hold the data of this record.
  23. */
  24. $temp = array ( );
  25.  
  26. /** Get each value as $key => $value pair **/
  27. foreach ( $row as $key => $value)
  28. {
  29. $temp [ $key ] = $value;
  30. }
  31. array_push ( $data,$temp );
  32. }
  33. return $data;

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

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

猜你在找的JavaScript相关文章