一、通过弹窗保存数据时
-
$('#fm').find('input,select').each(function (){})通过查里面包含的特定标签来循环 -
$(this).val()获取value -
$(this).attr('属性')获取特定标签的属性 -
$('select[name="cs_id"]')这种拼接定位方法 -
委托事件
$('#table_tb').on('click','#Idremove',function ()给一个大的框架绑定里面细节的委托事件
image.png
-
添加的思路
<form id="fm" class="form-horizontal">
<form>
-
整体都在form中，可以通过循环找到里面的标签，利用字典将他们封装起来，这里注意checkbox，要判断的是被选中的，封装起来
$('#btnSave').click(function () {
var postData={}
$('#fm').find('input,select').each(function () {
var v=$(this).val()
var n = $(this).attr('name')
if(n=="gender"){
if($(this).prop('checked')){
postData[n] = v
};
}else{
postData[n] =v;
}
});}
整体配合ajax处理,这里也可以直接用.serialize()不用循环
function bindSave() {
$('#btnSave').click(function () {
var postData={}
$('#fm').find('input,select').each(function () {
var v=$(this).val()
var n = $(this).attr('name')
if(n=="gender"){
if($(this).prop('checked')){
postData[n] = v
};
}else{
postData[n] =v;
}
});
console.log(postData)
$.ajax({
url:'/add_students/',
type:'POST',
data:postData,
dataType:"JSON",
success:function(arg){
if(arg.stutus){
createRow(postData,arg.data)
}else{
$("#errorMsg").text(arg.message)
}
}
})
});
}
-
注意这里用了个 createRow(postData,arg.data)是为了在添加的时候，不用刷新页面，造成页面已经添加的假象
function createRow (postData,nid) {
var tr = document.createElement('tr')
$(tr).attr('nid',nid)
var tdID = document.createElement('td')
tdID.innerHTML = nid
$(tr).append(tdID);
var tdName = document.createElement('td')
tdName.innerHTML = postData.name
$(tr).append(tdName);
var tdgender = document.createElement('td')
if(postData.gender == "1"){
console.log(postData.gender)
tdgender.innerHTML ="男"
}else{
tdgender.innerHTML ="女"
}
$(tr).append(tdgender);
var tdage = document.createElement('td')
tdage.innerHTML = postData.age
$(tr).append(tdage);
var tdcls = document.createElement('td')
tdcls.innerHTML = $('select[name="cs_id"]').find('option[value="'+postData.cs_id+'"]').text()
$(tr).append(tdcls)
$("#table_tb").append(tr)
}
-
删除的思路
-
点击删除时触发，一个弹窗，用来删除，给那些虚构的添加行，做委托事件
弹窗，绑定委托事件的弹窗
function bindDel() {
$('#table_tb').on('click','#Idremove',function () {
$('#delModal').modal('show');
var rowID = $(this).parent().parent().attr('nid');
$('#delNid').val(rowID);
})
}
触发删除
function bindDelConfirm() {
$('#delConfirm').click(function () {
var rowId = $('#delNid').val();
$.ajax({
url: '/del_student/',
type: 'GET',
data: {'nid': rowId},
dataType:'JSON',
success:function (arg) {
if(arg.status){
$('tr[nid="'+ rowId+'"]').remove();
$('#delModal').modal('hide');
}
}
})
})
}
-
触发编辑
$(this).parent().prevAll()获取同级属性，在页面上自定义属性
{# 编辑 #}
function bindEdit() {
$('#tb').on('click','.edit-row',function () {
$('#eidtModal').modal('show');
//1.获取当前行的所有数据
// 将数据赋值到对应的对话框的指定位置
$(this).parent().prevAll().each(function () {
// cls_id
var v = $(this).text();
var n = $(this).attr('na');
if(n=='cls_id'){
var cid = $(this).attr('cid');
$('#eidtModal select[name="cls_id"]').val(cid);
}else if(n=='gender'){
// v=True
if(v=='True'){
$('#eidtModal :radio[value="1"]').prop('checked',true);
}else{
$('#eidtModal :radio[value="0"]').prop('checked',true);
}
}else {
// n=age
// v=12
$("#eidtModal input[name='"+ n +"']").val(v)
}
});
})
