如何在CI中使用jquery保存多个行
如何在CI中使用jquery保存多个行
提问于 2016-01-07 13:02:28
在我的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我所拥有的只是为了只保存一行。如果有超过一个，我怎么能做到这一点？我有一个使用循环的想法，但我不知道如何在这里实现它。我还读过有关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回答 3
Stack Overflow用户
回答已采纳
发布于 2016-01-07 13:03:20
我已经为您创建了一个函数，它将循环并指示您的输入。
$('#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
});Stack Overflow用户
发布于 2016-01-07 13:37:40
获取每个输入字段的名称和ID，它们应该是唯一的，通过序列化到控制器发送表单。
Stack Overflow用户
发布于 2016-01-07 17:00:00
在服务器端，我们需要生成如所示的这里这样的行数组
//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);
}我希望这能帮上忙。我还没有测试代码。因此，如果您发现任何问题，请随意编辑。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34655886
复制相关文章
相似问题
腾讯云开发者
