前言
我的前端实在是太差劲了，导致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拼接已经废弃了，让我不要再使用。以后不使用了，直接在加载的时候把内容行加载进去然后隐藏吧