Jquery操作表格多出一个内容行

目录

• 前言
• 需求
  • 如何监听每一行点击，获取点击id
  • 前后端
• 问题更新，ajax异步带来的问题
• 废弃使用HTML拼接

前言

我的前端实在是太差劲了，导致Jquery操作表格多出一个内容行，这个功能我都做不出来，我想着使用Bootstrap的折叠，还想着使用Jquery的显示消失，搞了半天没搞出来满意的效果。最后还是经理过来分分钟手写出来.....

我发现一个问题，所谓的.Net后端，Java后端，在互联网工作中基本都得会前端，至少会Jquery，Bootstrap这些，所以，我决定好好补习一下前端知识。

需求

需求就是标题了，我希望Jquery操作表格多出一个内容行，目前表格是这样的

我想点击其中的任意一行，点击之后这一行下面出来新的内容行，比如，我这一行点击之后去后台获取几行数据，然后展示出来

如何监听每一行点击，获取点击id

由于我想点击型号，就出来内容行，所以，我在型号上加一个内容，因为每一行都可以点击，所以我加id肯定是不行的，那只能加class了，而且，我每点击某一行，都得获取这一行的一个数据id，这个时候用id=变量id肯定是不行的，我怎么获取这个id的值呢？而且，我点击展开了，收缩的时候必须只收缩这行的，不能收缩全部的。所以结果如下

<tr id="mark@(item.ProductStockId)">
<td data-title="型号">
    <span class="view-warehouse" data-id="@item.ProductStockId">
        <i class="fa fa-plus-square-o"></i>
        @item.ProductName
    </span>
</td>

class写了，id我用data-id来代替了，这样我可以很方便的获取data-id的值。

重要的是我的tr标签写了一个id，叫mark，这是为了我的内容行以HTML的形式贴上去。mark后面加了id，这个是为了我收缩的时候，只收缩我这一行

前后端

我可以写一个js方法，

$(function () {
    id=0;
    innerHTML = "";
    isGetMessage = false;
    $("#example .view-warehouse").click(toggleWareHouse);
    //$("#example .view-warehouse").hover(toggleWareHouse);

    function toggleWareHouse(e) {
        var $that = $(e.target);
        var MessageId = $that.attr("data-id");
        var icon = $that.find('i');

        if (MessageId == id) {
            isGetMessage = true
        } else {
            id = MessageId;
            isGetMessage = false;
            innerHTML = "";
        }
        if (!isGetMessage) {
            isGetMessage = true;
            $.ajax({
                type: 'get',
                url: '/ProductStock/GetProductWarehouse?ProductStockId=' + MessageId,
                success: function (data) {
                    for (var i = 0; i < data.productStockWarehouses.length; i++) {
                        // style="display:none;"
                        innerHTML +=
                            '<tr class="ware' + MessageId + '"'+ '> <td colspan="5">库存详细信息</td>' +
                            '<td>' + data.productStockWarehouses[i].WarehouseId + '</td><td>数量' + data.productStockWarehouses[i].Quantity + '</td><td>有货</td>' +
                            '<td>' +
                            '<div class="btn-group">' +
                            '<button type="button" class="btn btn-default btn-sm">' +
                            '操作' +
                            '</button>' +
                            '<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">' +
                            '<span class="caret"></span>' +
                            '</button>' +
                            '<ul class="dropdown-menu" role="menu">' +
                            '<li>' +
                            '<a href="javascript:;"
                            '<i class="fa fa-edit"></i> 存货转仓' +
                            '</a>' +
                            '</li>' +
                            '<li>' +
                            '<a href="javascript:;">' +
                            '<i class="fa fa-trash-o"></i> 出库销售' +
                            '</a>' +
                            '</li>' +
                            '</ul>' +
                            '</div>' +
                            '</td></tr>';
                    }
                    $("#mark" + MessageId).after(innerHTML);
                }
            });
        }

        if (icon.hasClass('fa-plus-square-o')) {
            icon.removeClass('fa-plus-square-o').addClass('fa-minus-square-o');
            $(".ware" + MessageId).show();
            $("#mark" + MessageId).after(innerHTML);
        } else {
            icon.removeClass('fa-minus-square-o').addClass('fa-plus-square-o');
            $(".ware" + MessageId).hide();
            $(".ware" + MessageId).html('');
        }
    }

});

这个是jquery的选择器，选择id为example 下的class为view-warehouse的元素进行监听，点击之后出发toggleWareHouse方法。

$("#example .view-warehouse").click(toggleWareHouse);

toggleWareHouse方法可以写一个e，这个e就是我们点击的内容，e.target就是我们点击的这一行元素

function toggleWareHouse(e) {
var $that = $(e.target);

下面这个就是找到i元素，然后切换图标

var icon = $that.find('i');
 if (icon.hasClass('fa-plus-square-o')) {
icon.removeClass('fa-plus-square-o').addClass('fa-minus-square-o');

我们在每行的tr上加了一个mark标签，我们使用after方法，进行后面的html添加，这样添加的tr都是兄弟标签

 $("#mark" + MessageId).after(innerHTML);

折叠的时候你的内容行是要删除的，这里使用html('');

 $(".ware" + MessageId).html('');

然后到了内容行内容的时候了，其实可以选择在加载表格的时候直接把内容行全部加载出来隐藏着，分页一页才10个数据，所以不担心浪费资源。

我这里使用的是ajax去后台加载数据的方法，而且每次点击同一行只加载一次，我使用全局变量进行了判断

最后就是后端了，很简单

      public ActionResult GetProductWarehouse(int ProductStockId)
        {
            List<ProductStockWarehouse> productStockWarehouses = _productStockWarehouseBll.GetProductStockWarehouseByProductStockId(ProductStockId);

            return Json(new { productStockWarehouses },JsonRequestBehavior.AllowGet);
        }

问题更新，ajax异步带来的问题

我发现一个问题，因为我是ajax请求的，而ajax请求默认是异步的，这导致了什么？

异步导致的问题是需要时间，而这个需要时间就出现了一个bug，我快速点击型号来加载内容行，我一秒点几次，会发现，会出现重复的内容行。

因为我在ajax异步消耗的时间中快速的重复点击，ajax异步还没反应过来呢，下面的js就执行了几次了。

修改这个问题就很简单了，把异步修改为同步，去掉ajax里面的innerHTML

ajax添加     async: false,
ajax内部删除  $("#mark" + MessageId).after(innerHTML);

废弃使用HTML拼接

注意：拼接HTML已经被淘汰，我以后不会这样做了

我的经理过来看了我写的代码，说HTML拼接已经废弃了，让我不要再使用。以后不使用了，直接在加载的时候把内容行加载进去然后隐藏吧