Question

在我的html中，通过按下按钮动态添加行。

<button id="add-row">Add New Row</button>

<div class="container">
  <div class="row"><!-- Begins with 1 row -->
    <input type="text" class="text"><input type="number" class="number">
  </div>
  <div class="row"><!-- IF user adds 1 row -->
     <input type="text" class="text"><input type="number" class="number">
  </div>
</div>
<button id="save">Save</button>

在我的jQuery中

//Add row
$('#add-row').on('click',function(){
      $('.container').prepend('<div class="row">'+
                                '<input type="text" class="text"><input type="number" class="number">'+
                              '</div>');
});
//Save
$('#save').on('click',function(){
  var text = $('.text').val();
  var number = $('.number').val();
  $.ajax({
  type: "POST",
  url: BASE_URL+'save/saverows',
  dataType: 'html',
  data: {text:text,number:number},
  async: false,
  success: function(data){ 
      alert('Rows saved!');
      } 
  }); 
});

在我的CI控制器中

public function saveRows(){
    $data = array(
        'text' => $this->input->post('text'),
        'number' => $this->input->post('number')
    );

    $this->Row_model->saveAll($data);
}

在我的CI模型中

 public function saveAll($data){
    $this->db->insert('savehere', $data);
  }

数据库表看起来像这样

ID  TEXT  NUMBER
1   a     11
2   b     22
3   c     33
4   d     44

我所拥有的只是仅保存一行。如果超过1，我怎么能做到这一点？我有一个使用循环的想法，但我不知道如何在这里实现它。我还阅读了关于CI的批量插入，但它有一定数量的行要保存。

我的问题出在#save onclick。如何检索所有text和number值，然后将其传递给jquery ajax，然后传递给codeigniter controller。

使用Ilan Hasanov的答案如下。数组的console.log是：

for (var i = 0; i < arrText.length; i++) {
      console.log(arrText[i]+" "+arrNumber[i]);
}
text 100
text2 55

Answer 1

我为你创建了一个循环和输入你的输入的函数。

$('#add-row').on('click', function() {
$('.container').prepend('<div class="row">' + '<input type="text" class="text"><input type="number" class="number">' + '</div>');
});

//Save
$('#save').on('click', function(index) {
var arr = [];
  $(".row").each(function() {
  var text   = $(this).find('input[type=text]').eq(index).val();
  var number = $(this).find('input[type=number]').eq(index).val();
   arr.push({
      text: text,
      number: number
   });
});

$.ajax({
      type: "POST",
      url: BASE_URL+'save/saverows',
      data: {batch:arr},
      async: false,
      success: function(data){
          alert('Rows saved!');
      }
  });
});

在你的控制器中你做

public function saveRows(){
$this->db->insert_batch('savehere', $this->input->post('batch'));
}

'savehere' replace to your table name

我们之前在数据库结构的jQuery中创建了数组，因此必须插入漂亮的短代码。

取决于您的数据库结构

arr.push({
   text: text,
   number: number
});

或者如果你的数据库是大写的那么

arr.push({
   TEXT: text,
   NUMBER: number
});

Answer 2

获取每个输入字段的名称和ID，该字段应该是唯一的通过序列化发送到控制器

发送表单

Answer 3

在服务器端，我们需要生成如here

所示的行数组

//Save
$('#save').on('click',function(){
    var data = [];
    $('.text').each(function(index){
        // text and number are datatypes in database. so i mentioned respected column name
        var row = { "text_col": $(this).val(), "number_col": $('.number')[index].val()   }; 
   data.push(row);
     });

    $.ajax({
          type: "POST",
          url: BASE_URL+'save/saverows',
          dataType: 'json',
          data: data,
          async: false,
          success: function(data){
        if(data == "done"){
        alert('Rows saved!');
        }
    }
  });
});

控制器：

public function saveRows(){
    if ($this->input->is_ajax_request()){
    $data = $this->input->post();
    // I assume row_model already loaded by you.
    $this->Row_model->saveAll($data);
    $this->output->set_output("done");
    }
    $this->output->set_output("failed");
}

内部Row_model

public function saveAll($data){
    $this->db->insert_batch('table_name', $data);
 }

我希望这会有所帮助。我还没有测试过代码。因此，如果您发现任何问题，请随时编辑。

如何在CI中使用jquery ajax保存多行

3 个答案: