Question

我的数据库中有一行表示银行交易。在屏幕上，用户可以看到红叉或绿色勾号，具体取决于表格中的值。

我希望用户能够点击图片（它实际上是Twitter Bootsrap GLYPHICON），将调用发送到我的数据库以切换数据库中的布尔标志（位），然后刷新屏幕使用更新的数据。

但是，我希望它快！所以，我很高兴客户端切换图像，而javascript函数进行更新。

到目前为止，我有这个：

屏幕图片：

<td><a href="#"><span data-key="@line.Id" class="toggle glyphicon @(line.IsOnStatement ? "glyphicon-ok credit_colour" : "glyphicon-remove debit_colour")"> </span></a></td>

所以，一个href（允许点击），我所在行的数据键，一些代码显示它是否应显示OK或十字架。

当我点击它时，我会调用这个javascript：

$(function () {
        $('.toggle').on('click', function () {
            var data = { transactionId: $(this).data('key') };

            $.ajax({
                url: '@Url.Action("ToggleOnStatement", "Transaction")',
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify(data),
                cache: false,
                async: true,
                success: function (result) {
                    if (result.Success == 'true') {
                        window.location = '@Url.Action("Transactions", "Transaction", new { bankAccountId = Model.BankAccountId })';
                    } else {
                        alert(result.Message);
                    }
                },
                error: function () {
                    alert(id);
                }

            });


        });

这个有效！但是，我正在使用以下行重新加载我的交易屏幕：

window.location = '@Url.Action...

我想做的是打电话，但不刷新整个屏幕。相反，我想检查行当前是否为false，更改为true并刷新字形，否则显示false。

我可以在此功能中执行此操作吗？切换图标？我想这个功能目前还不知道状态。我当前的实现从数据库获取状态，并返回新状态。我更喜欢坚持客户端。我可以将状态存储在行中，还是存储在数据字段中？

此外，＆＃39>＆＃39;导致我的屏幕回到页面顶部。我可以有一个可点击的对象，而不是让屏幕移动吗？我是否认为＃是锚，在屏幕的顶部？

编辑：我找到了一个100％有效的解决方案 - 但我不知道为什么会有效。

我在网上找到了一个例子，并对其进行了一些修改：

var state = $(e.target).toggleClass('glyphicon-ok glyphicon-remove');
            var colour = $(e.target).toggleClass('credit_colour debit_colour');
            $("i.indicator").not(state).removeClass("glyphicon-ok").addClass("glyphicon-remove");
            $("i.indicator").not(colour).removeClass("credit_colour").addClass("debit_colour");

这完美无缺。但是......不明白为什么。什么是＆＃39;指标＆＃39;？什么是＆＃39; i.indicator＆＃39;？为什么这样做？我的屏幕上没有类别指示器。它应该失败。

此处找到了解决方案：bootstrap 3 glyphicon swap state on click

编辑：好的，我明白了。它是完成工作的toggleClass。其余的都没用，只涉及这个例子。删除其余的，工作。好像它已经解决了。等待任何评论。

使用后台处理切换图像

0 个答案: