先来看望上面实时效果演示:
jQuery 1

 

用户点击编辑时,在点击行下动态产生一行。编辑铵钮变为disabled。
新爆发的一条龙有立异和注销的铵钮,点击“撤除”铵钮,删除刚刚动态发生的行。编辑铵钮状态回涨。

立异与删除铵钮效能尚未什么样特其他。

 在ASP.NET MVC视图html代码如下,普通的表格table,普通的html标签:
jQuery 2

除去的铵钮功用:
jQuery 3

  

jQuery 4jQuery 5

$('.Delete').click(function () {
            var flag = confirm('你确认是否删除记录?');
            if (flag) {
                var tr = $(this).closest('tr');

                var obj = {};
                obj.Ltc_nbr = tr.find('.SelectSingle').val();

                $.ajax({
                    type: 'POST',
                    url: "/Highway/LandTransportationCityDelete",
                    dataType: 'json',
                    data: JSON.stringify(obj),
                    contentType: 'application/json; charset=utf-8',
                    success: function (data, textStatus) {
                        if (data.Success) {
                            window.location.href = data.RedirectUrl;
                        }
                        else {
                            alert(data.ExceptionMessage);
                            return;
                        }
                    },
                    error: function (xhr, status, error) {
                        alert("An error occurred: " + status + "nError: " + error);
                    }
                });
            }
            return false;
        });

Source Code

 

编纂的铵钮效能,需求动态发生一新行。处理每一种字段的html的竹签:
jQuery 6

 

jQuery 7jQuery 8

 $('.Edit').click(function (e) {
            var tr = $(this).closest('tr')

            var row = $('<tr>');

            row.append($('<td><input class="city_key" type="hidden" value="' + tr.find('.SelectSingle').val() + '" /></td>'));
            row.append($('<td></td>'));

            $selectCity = $('<select />').attr({ name: 'city', class: 'selectcity' });
            $("<option></option>", { value: "", text: "" }).appendTo($selectCity);
            $.getJSON("/Highway/GetCities", function (data) {
                $.each(data, function (i, item) {
                    if (item.City_nbr == tr.find('.city_key').val()) {
                        $("<option></option>", { value: item.City_nbr, text: item.City_Name,selected :"selected" }).appendTo($selectCity);
                    }
                    else {
                        $("<option></option>", { value: item.City_nbr, text: item.City_Name}).appendTo($selectCity);
                    }
                })
            });
            row.append($('<td></td>').append($selectCity));

            row.append($('<td></td>'));
            row.append($('<td></td>'));
            row.append($('<td></td>'));

            $cb = $('<input/>').attr({ type: 'checkbox', class: 'ckbIsActived', checked: tr.find('.ckbIsActived').is(':checked') == true ? 'true' : '' });
            row.append($('<td></td>').append($cb));

            var $btnUpdate = $('<input/>').attr({ type: 'button', class: 'Update', value: '更新' });
            row.append($('<td style="width:40px;"></td>').append($btnUpdate));

            var $btnCancel = $('<input/>').attr({ type: 'button', class: 'Cancel', value: '取消' });
            row.append($('<td style="width:40px;"></td>').append($btnCancel));

            tr.after(row);

            $(this).attr("disabled", "disabled");
        });

Source Code

 

立异铵钮效用:
jQuery 9

 

jQuery 10jQuery 11

 $('table.city-list').delegate('.Update', 'click', function (event) {
            var tr = $(this).closest("tr");

            var obj = {};
            obj.Ltc_nbr = tr.find('.city_key').val();
            obj.City_nbr = tr.find('.selectcity').val();
            obj.IsActived = tr.find('.ckbIsActived').is(':checked');

            $.ajax({
                type: 'POST',
                url: "/Highway/LandTransportationCityUpdate",
                dataType: 'json',
                data: JSON.stringify(obj),
                contentType: 'application/json; charset=utf-8',
                success: function (data, textStatus) {
                    if (data.Success) {
                        alert("陆运城市更新成功。");
                        window.location.href = data.RedirectUrl;
                    }
                    else {
                        alert(data.ExceptionMessage);
                        return;
                    }
                },
                error: function (xhr, status, error) {
                    alert("An error occurred: " + status + "nError: " + error);
                }
            });
        });

Source Code

 

还三个撤除铵钮功效:
jQuery 12

 

jQuery 13jQuery 14

$('table.city-list').delegate('.Cancel', 'click', function (event) {
            var tr = $(this).closest("tr");
            tr.prev().find('.Edit').removeAttr('disabled');
            tr.remove();
        });

Source Code

 

 

相关文章

网站地图xml地图