使用JSON动态添加表行

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用JSON动态添加表行相关的知识,希望对你有一定的参考价值。

我很难用JSON添加新的表行。

情况

目前我正在编程拖放功能。上传文件后,文件信息将解析为JSON并返回到View页面。我想要的是我想用JSON文件信息动态添加新表行。

问题我应该如何使用JSON格式填写双引号部分?

var rowNode = table.row.add( [
            "",
            "",
            "[what should i write here??]",
            "[what should i write here??]",
            "<td id=wtax_file_type></td>",
            "<td id=all_tax></td>",
            "<td id=tax_date></td>",
            "<button class='btn btn-xs btn-default'><i class='icon-file-pdf text-error'></i><span> 테스트.pdf</span></button>",
            "<a class='btn-link color-primary'>[이동]</a>"
        ] ).draw().node();

我的JS代码

myDropzone.on("success", function(file, res) {


        /* removew preview when upload success*/
        $(file.previewElement).remove();

        console.log(res);

        if (res.result) {
            if (res.data) {
                if (res.data.f_idx) {
                    $('#f_idx').text(res.data.f_idx);
                }
                if (res.data.client_name) {
                    $('#client_name').text(res.data.client_name);
                }
                if (res.data.client_biz_no) {
                    $('#client_biz_no').text(res.data.client_biz_no);
                }
                if (res.data.wtax_file_type) {
                    $('#wtax_file_type').text(res.data.wtax_file_type);
                }
                if (res.data.all_tax) {
                    $('#all_tax').text(res.data.all_tax);
                }
                if (res.data.tax_date) {
                    $('#tax_date').text(res.data.tax_date);
                }
            }
        }

        var fileObj=JSON.parse(res);


       var rowNode = table.row.add( [
            "",
            "",
            "[what should i write here??]",
            "what should i write here??]",
            "<td id=wtax_file_type></td>",
            "<td id=all_tax></td>",
            "<td id=tax_date></td>",
            "<button class='btn btn-xs btn-default'><i class='icon-file-pdf text-error'></i><span> 테스트.pdf</span></button>",
            "<a class='btn-link color-primary'>[이동]</a>"
        ] ).draw().node();


    });
答案

根据datatable's documentation,这可以这样做:

table.row.add( [
        "",
        "",
        "[what should i write here??]",
        "[what should i write here??]",
        $('#wtax_file_type').text(),
        $('#all_tax').text(),
        $('#tax_date').text(),
        "<button class='btn btn-xs btn-default'><i class='icon-file-pdf text-error'></i><span> 테스트.pdf</span></button>",
        "<a class='btn-link color-primary'>[이동]</a>"
    ] ).draw( false );

以上是关于使用JSON动态添加表行的主要内容,如果未能解决你的问题,请参考以下文章

向动态创建的表行添加按钮

如何动态添加表行[重复]

从动态添加的表行中获取数据

使用 jQuery 从 AJAX 响应(json)构建表行

对动态表行使用 jquery 数据表

动态添加的表行不会触发 Click 事件