php ajax 编辑功能,jQuery结合ajax实现添加、编辑功能【原创】

要实现的效果图如下：

大致的思路是这样的：

1、点击添加时发生事件，循环出成员。

2、点击成员发生事件，将成员添加到参与人中。

3、点击编辑，出现×号和取消按钮。点×号可以删除成员，再执行ajax。

4、点击取消，移除样式，变为编辑按钮。

部分HTML代码：

<?php echo $member['member_name']; ?>

js代码：

$(function(){

//添加

$('.join_select p').click(function() {

$(this).addClass('selected1').siblings().removeClass('selected1');

}); //在点击成员时增加selected1样式(背景色)

$(".join_add").click(function(){ //点击添加时生成一个下拉列表，并且循环遍历出成员

$('.join_select').remove();

var html = '

';

html += "

'><?php echo $enabled['user_name']; ?>

"

html += '

';

$(this).after(html);

});

$('.join_btn').on('click', '.join_select p', function() { //给未来元素添加事件

$(this).addClass('selected1').siblings().removeClass('selected1');

var that = $(this);

var user_id = $(this).data("id");//获取当前点击成员的user_id

var user_name = $(this).text();

var customer_id = $(this).parent().siblings(".join_add").data("customer-id");//获取当前点击成员的customer_id

if (user_id) {

$.ajax({

url: 'index.php?c=permission&a=add&customer_id=' + customer_id,

type: 'post',

data: { member_id: user_id },

dataType: 'json',

success:function(data) {

if ( data.flag == 1) {

that.parents('div.join_btn').before('' + user_name + ' ');

} else {

alert(data.content);

}

}

});

}//ajax执行成功后，在添加按钮前添加选中的成员名称。

});

//编辑

$(".join_btn").mouseleave(function() { //鼠标移走事件

$('.join_select').remove();

})

$(".join_set").click(function(){

$(this).parent().siblings("span").addClass("delete");

$(this).siblings(".join_cancel").show();

$(this).hide(); //当点击编辑按钮时，给添加的参与人增加样式(出现背景，右上方出现×号)

})

//删除

$(".delete a").live("click",function() { //给删除按钮这一未来元素添加事件

var that = $(this);

var user_id = $(this).parent().data("id");

var user_name = $(this).parent().text();

var customer_id = $(this).parent().siblings(".join_btn").children(".join_add").data("customer-id");

if (user_id) {

$.ajax({

url: 'index.php?c=permission&a=delete&customer_id=' + customer_id,

type:'post',

data: {member_id: user_id},

dataType: 'json',

success:function(data){

if(data.flag == 1) {

that.parent(".delete").remove(); //当ajax执行成功后，删除成员

}

}

})

}

})

//取消

$(".join_cancel").click(function() {

$(this).parent().siblings().removeClass("delete");

$(this).siblings(".join_set").show();

$(this).hide(); //点击取消时，移除成员样式，取消按钮变编辑按钮。

})

})

转载时请注明出处及相应链接，本文永久地址：https://blog.yayuanzi.com/5200.html

微信打赏

支付宝打赏

感谢您对作者Eva的打赏，我们会更加努力！    如果您想成为作者，请点我