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

jQuery结合ajax之编辑、取消和保存综合功能【原创】

HTML+CSS Eva 2970浏览 0评论

主要说的是最近一个项目中的一个模块。里面包含了许多综合的知识,还有一些我们需要注意的地方。效果图如下:
43

部分JS代码如下:

        //业务编辑
        $('body').on('click', '.business_edit_btn', function () {
            var obj = $(this).siblings('.business_price_span');
            var price = (obj.children('.money').text()).trim();//trim()函数用于删除字符串空格

            obj.children('.money').html('<input type="text" data-price="'+ price + '" name="price" value="' + price + '" />');
			$(this).hide();
			$(this).siblings(".business_cancel_btn").show();
			$(this).siblings(".business_submit_btn").show();//点击编辑,出现取消、保存按钮
    
			var parent_id = $(this).siblings(".describe1").data('parent-id');
			var business_type_id = $(this).siblings(".describe2").data('business-type-id');
			var business_name = $(this).siblings(".describe3").text();//获取select属性值,input的值
			
			var html1 = "<select name='' class='select1' >";
			var selected = '';
			$.each( business_types, function (index, item) {
				if ( parent_id == index) {
					selected = 'selected';
				} else {
					selected = '';	
				}
				html1 += '<option value="' + item['business_type_id'] + '" ' + selected + '>' + item['business_type_name'] + '</option>';
			})//将后台返回的数据遍历,即第一个下拉框的值
			html1 += "</select>";					
			
			var html2 = "<select name='' class='select2'  >";

			var children = business_types[parent_id]['children'];
			var selected_business = '';

			$.each( children, function (index, item) {
				if ( business_type_id == item['business_type_id']) {
					selected_business = 'selected';
				} else {
					selected_business = '';	
				}
				html2 += '<option value="' + item['business_type_id'] + '" ' + selected_business + '>' + item['business_type_name'] + '</option>';
			});

			html2 += "</select>";//根据第一个下拉框的值,遍历出第二个下拉框的值,即联动菜单
			
			var html3 = '<input type="text" class="input1" placeholder="业务名称" value="'+ business_name.trim() + '" />'; //改变html属性
            $(this).siblings(".describe1, .describe2, .describe3").hide();//隐藏原先的span标签
            $(this).parent("td").append(html1,html2,html3);//将生成的元素追加到表格中
			
     	});

        //业务取消
        $('body').on('click', '.business_cancel_btn', function() {
            
            var moneyVal=$(this).siblings(".business_price_span").find("input").val();
            var text="<span class='business_price_span' style='float:right; padding-right:20px; line-height:40px;'>总金额:<span class='money'>"+moneyVal+"</span> 元</span>";   

            var price_reset = $(this).siblings(".business_price_span").find("input[name='price']").data("price");

            //将原先表单的值隐藏在data属性中,在这里获取

            $(this).siblings(".business_price_span,.money,.select1,.select2,.input1").remove();
            $(this).siblings(".describe1, .describe2, .describe3").show();
            $(this).after(text);//追加总金额
            $(this).hide();
            $(this).siblings(".business_submit_btn").hide();
            $(this).siblings(".business_edit_btn").show();
            $(this).siblings(".business_price_span").children(".money").text(price_reset);

            //重置数据。这里不能使用reset方法,因为表单中的input是生成的,而且不止一个。
        })

        //业务金额保存
        $('body').on('click', '.business_submit_btn', function () {

            var business_id = $(this).data('id');
            var price = $(this).siblings('.business_price_span').find('input').val();
			var business_name = $(this).siblings(".input1").val();
			var business_type_id = $(this).siblings(".select2").val();

            var parent_id = $(this).siblings(".select1").val();
            var parent_name = $(this).siblings(".select1").find("option:selected").text();
            var business_type_name = $(this).siblings(".select2").find("option:selected").text();

            var that = $(this);//将$(this)赋给一个变量
            $.ajax({
                url: 'index.php?c=business&a=updatePrice&business_id=' + business_id,
                type: 'post',
                data: {business_name: business_name, business_type_id: business_type_id, price: price},
                success: function (data) {
                    var data = $.parseJSON(data);
                    if (data.flag == 1) {

                        if (price > 0 ) {
                            var html = '<a href="index.php?c=payment&a=index&business_id='+ business_id +'" class="develop">';
                            html += '<div class="develop_box"></div>';
                            html += '<p>款项进展</p>';
                            html += '</a>';
                            that.after(html);

                        }//判断如果金额大于0 ,出现款项进展按钮

                        that.siblings(".describe1").text(parent_name + "->").show();
                        that.siblings(".describe2").text(business_type_name + "->").show();
                        that.siblings(".describe3").text(business_name).show();
                        that.siblings(".select1, .select2, .input1").remove();
                        that.siblings(".business_price_span").find(".money").html('<span class="money">'+ price + '</span>')//点击保存时,追加数据

                        that.hide();
                        that.siblings(".business_cancel_btn").hide();
                        that.siblings(".business_edit_btn").show();

                    } else {
                        alert(data.content);
                    }
                }
            })
        })

代码中的功能就不一一解释了,主要是想说其中需要注意的地方。
比如:
1、AJAX里面$(this)是不起作用的。
在jQuery使用ajax后$(this)失效,原因很简单,$(this)指向的是最近调用它的jquery对象,即$(this)就是表示ajax对象了。在AJAX的success里面应该指向的是一个Deferred对象。而$(this)一般是用来将一个dom节点转换成jquery对象,所以在ajax的success里面无效了。
解决办法也是很简单,在使用$.ajax({})前将$(this)赋给一个变量后即可在$.ajax({})内使用。

2、html()、text()与val()的区别。
对于text()和html()来说,获取元素内部的值的用法基本上是一样的,结果是由所有匹配元素包含的文本内容组合起来的文本,所以xml和html都可以获取(元素闭合)。

而对于val() 则是获得第一个匹配元素的当前值,比如利用这个方法将获得的是input 元素的value值,而利用text()方法是获取不到的,因为不是闭合元素。
还有其他的一些细节,由于时间问题,就不一一描述了。

转载时请注明出处及相应链接,本文永久地址:https://www.askaura.com/5836.html


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

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