javascript - Jquery 数据表显示详细信息

Question

我有一个由包含详细信息的 JSON 返回提供支持的 jQuery DataTable，它单击该行并展开详细模板，从我的 JSON 加载列表，为此，我遵循 example .

我想知道如何加载详细信息而不隐藏它，就好像它是数据表行的序列，不能有展开和折叠的选项，详细信息必须始终可见

Column1| Column2| Column3|
Value1   Value2   Value3
  Detail1| Detail2| Detail3|
  ValueD1   ValueD2   ValueD3 

更新 - JSON

$scope.list = [
            {
                id:1,
                name: "Ze",
                listDetail: [
                    {
                        id:1,
                        description: "lt"
                    },
                    {
                        id:2,
                        description: "lt 3"
                    },
                ]
            },
            {
                id:2,
                name: "Ze 2",
                listDetail: [
                    {
                        id:3,
                        description: "lt 1"
                    },
                    {
                        id:4,
                        description: "lt 4"
                    },
                ]
            }
        ];

Answer 1

在这里，它应该可以工作:

这里是一个应该使用这样的 JSON 的解决方案:

• json

{
“画”:2，
“记录总数”:3，
“记录过滤”:3，
“数据”: [{
“类型”:“正常”，
“描述”:“泽奈达”，
“姓名”:“弗兰克”，
"age": "软件工程师",
“地点”:“纽约”
}, {
“类型”:“详细信息”，
"detail": "第一个细节"
}, {
“类型”:“详细信息”，
"detail": "第二个细节"
}, {
“类型”:“详细信息”，
"detail": "第三个细节"
}, {
“类型”:“正常”，
“描述”:“zerrz”，
“姓名”:“保罗”，
"age": "软件破坏者",
“地点”:“伦敦”
}, {
“类型”:“详细信息”，
"detail": "第三个细节"
}, {
“类型”:“正常”，
“描述”:“泽奈达”，
“姓名”:“弗兰克”，
"age": "软件工程师",
“地点”:“纽约”
}, {
“类型”:“详细信息”，
"detail": "第二个细节"
}, {
“类型”:“详细信息”，
"detail": "第三个细节"
}]
}

• js

$('#example').dataTable({
“处理”:真实，
“服务器端”:正确，
"ajax": "你的Ajax源",
"columns": [//您必须手动绑定(bind)列，因为第一个值不会显示
{
“数据”:“详细信息”
},
{
“数据”:“描述”
},
{
“数据”:“名称”
},
{
“数据”:“年龄”
},
{
“数据”:“位置”
}
],
“fnRowCallback”:函数(nRow，aData，iDisplayIndex，iDisplayIndexFull){
switch (aData[0]) {//第一个值指示它是详细行还是普通行
case 'normal'://如果是普通行，则只显示没有第一个详细信息的单元格
$(nRow).find('td')[0].style.display = '无';
休息;
case 'detail'://否则不显示除详细单元格之外的任何单元格，占用 5 个单元格
$(nRow).find('td')[1].style.display = '无';
$(nRow).find('td')[2].style.display = '无';
$(nRow).find('td')[3].style.display = '无';
$(nRow).find('td')[4].style.display = '无';
$(nRow).find('td')[0].colSpan = '5';//你的列数
休息;
}
}
});

它的工作方式是，每行技术上都有细节+正常单元格。

绘制时检查每行的行类型，并仅显示所需的单元格(因为其他单元格为空)

最后，对于详细信息行，我给出单元格数量的属性 colspan 以允许它占据行的所有宽度。

我还没有测试过它，所以 gl&hf ;) 如果您有任何问题，请随时发表评论。

并根据您的需要进行调整。