最新消息:文章中包含代码时,请遵守代码高亮规范!

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

JavaScript Eva 2835浏览 0评论

要实现的效果图如下:

CRM主页_03

大致的思路是这样的:

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

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

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

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

部分HTML代码:

<?php foreach ($customers as $customer) { ?>
<tr>
    <td>
	<?php foreach ($customer['members'] as $member) { ?>
	<span  data-id="<?php echo $member['member_id']; ?>"><?php echo $member['member_name']; ?><a></a></span>
	<?php } ?>
        <div class="join_btn" >
           <input data-customer-id="<?php echo $customer['customer_id']; ?>" type="button" class="join_add" value="添加" />
           <input type="button" class="join_set" value="编辑" />
           <input type="button" class="join_cancel" value="取消" />
        </div>
    </td>
</tr>
<?php } ?>

js代码:

$(function(){
    //添加
    $('.join_select p').click(function() {
        $(this).addClass('selected1').siblings().removeClass('selected1');
    }); //在点击成员时增加selected1样式(背景色)

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

	var html = '<div class="join_select">';

	<?php foreach ($enabled_users as $enabled) { ?>
	html += "<p data-id='<?php echo $enabled['user_id']; ?>'><?php echo $enabled['user_name']; ?></p>"
	<?php } ?>

	html += '</div>';

	$(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('<span data-id="' + user_id + '">' + user_name + '<a></a></span> ');
                	} 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://www.askaura.com/5200.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者Eva的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!