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