数据表格展示某一行详情的实现

布满荆棘的人生 2024-04-18 10:03 74阅读 0赞

**功能说明**

项目中有一个功能是需要根据某一行数据的信息展示与这一行数据相关的详细信息，去百度里面搜索查看各种教程，都没有找到合适的，然后只能自己想办法来实现。效果如下:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rlbmd5aWxhbmcxMjM_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rlbmd5aWxhbmcxMjM_size_16_color_FFFFFF_t_70 1][]

**功能实现**

最开始时，没什么思路，看各种教程也没找到合适的例子可以复制、粘贴的。然后开始着手自己来做，首要考虑的是在获取的某一行数据后面创建一个相同的元素，每一行都表示一个tr元素，我只要拿到需要展示信息这一行的tr元素，则可以使用after在其后面添加一个tr行。把tr当做一个展示区域，然后在这个展示区域里面在初始化一个表格则可以实现这个功能。

有了思路后，然后开始做这个功能。数据表格的第一行是一个向右的箭头图标，初始化时向右，当点击展开某一行时，则让其显示一张新的图片，让其显示一张箭头向下的图标即可。给第一行添加单击事件时，可以传入必要的参数和一个指代当前对象的this。由于前端框架使用的是layui，第一行真实的数据在向上找三层，则可以用找到这一行对应的tr元素，进行添加工作。

按照这种设计思路一步一步来，马上问题接踵而至，如怎么控制让其第一行显示向下的箭头还是向右的箭头。这肯定需要某个变化的值来进行控制，好在html中可以对某个元素添加自定义属性，利用这个功能可以解决。初始化表格时，先给其一个默认的value值，然后点击时获取这个value值进行判断来控制其是需要展示向下还是向右的图片，问题解决。由于初始化时显示的是多行，每一行又有多列，然后在创建tr时，其展示的只有一列，这时则需要设置colspan属性即可。还有问题，当关闭某一行显示的详情时怎么处理呢？这时则需要删除之前的创建的元素。最后遇到的一个问题是，每次显示数据表格中某一行的详情时，详情里面还需要对新的数据表格进行操作，这时则需要每一个展示的数据表格都具有唯一的id，如何来做的？那就是在每一行数据中找一个具有唯一标识的字段来建立一个唯一的数据表格的id即可。核心代码如下：

//显示某一行详情
    function show_row_info(e, mcode) {
        let $type = $(e).attr('value');
        //获取当前元素的父元素tr
        let temp_tr = $(e).parent().parent().parent();
        if ('right' === $type) {
            $(e).css({"background-image": `url("{
      {projcfg.base}}/static/images/model/icon-table-down.png`});
            $(e).attr('value', 'down');
            //添加一个新元素，table的id不能一样，否则不能正常初始化表格
            let table_id = `table_${mcode}`;
            temp_tr.after(`<tr style="width: 100%;height: 100%;"><td colspan="9" width: 100%;height: 100%;"><table id="${table_id}"></table></td></tr>`);
            load_fold_table(mcode, table_id);//加载某一行的数据详情
        } else if ('down' === $type) {
            $(e).css({"background-image": `url("{
      {projcfg.base}}/static/images/model/icon-table-right.png`});
            $(e).attr('value', 'right');
            //移除新添加的元素
            temp_tr.next().remove();
        } else {
            console.error('类型错误！');
        }
    }

**经验总结**

项目开发中拿到需求或者是某些无从下手的问题时，先去百度里面根据关键词搜索相应的解决办法，看看有没有类似的。如果有那很好，拿过来稍微改动直接使用即可。如果没有那就自己想办法解决，先思考大致的思路，然后跟着这个思路去一步一步的实现需要实现的功能。这当中肯定会遇到很多很多的问题，我想办法总比困难多，大多数难题最终都能够解决。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rlbmd5aWxhbmcxMjM_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/bcde0e468e70412f9c849b6dfe843aa0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rlbmd5aWxhbmcxMjM_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/7e3e8d0d29b34ea3a58c6439b38231fc.png