jquery根据json自动生成表格

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>导入文件</title>
    <link rel="stylesheet" href="/js/bootstrap.min.css">
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/animate.css">
    <link rel="stylesheet" href="/css/global.css">
    <link rel="stylesheet" href="/css/loading.css">
</head>

<body>
    <div style="width: 1200px;margin: 0 auto;margin-top: 20px;">
        <form class="form-horizontal" method="post" enctype="multipart/form-data" role="form">
            <div class="form-group">
                <label for="firstname" class="col-sm-2 control-label">importTypeId</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="importTypeId" name="importTypeId"
                        placeholder="importTypeId">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="inputfile">文件输入</label>
                <div class="col-sm-10">
                    <input type="file" name="file" id="inputfile">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" class="btn btn-default" id="submit">上传</button>
                </div>
            </div>
        </form>

        <h1 id="LogInfo"></h1>
        <div style="overflow: auto;">
            <table align="center" class="table table-striped" id="table" border="1" style="margin-top: 20px;">
            </table>
        </div>


    </div>
    <script src="/js/loading.js"></script>
    <script>
        function loading() {
            $('body').loading({
                loadingWidth: 240,
                title: '请稍等!',
                name: 'upload',
                discription: '正在上传中...',
                direction: 'column',
                type: 'origin',
                // originBg:'#71EA71',
                originDivWidth: 40,
                originDivHeight: 40,
                originWidth: 6,
                originHeight: 6,
                smallLoading: false,
                loadingMaskBg: 'rgba(0,0,0,0.2)'
            });
        }




        $('#submit').click(function () {

            loading();
            $('#table').html('');
            $('#LogInfo').html('');

            var formdata = new FormData();
            formdata.append('file', $('#inputfile')[0].files[0]);
            formdata.append('importTypeId', $('#importTypeId').val());

            $.ajax({
                url: '/api/Upload/UploadExcel',
                type: 'post',
                contentType: false,
                processData: false,
                data: formdata
            }).done(function (data) {

                console.log(data);
                if (data.flag = 'success') {

                    Unplanned.logId = data.detail;
                    Unplanned.SharedResourceCreatingCheck();


                }
                else {
                    alert(data.flag + (data.message ? data.message : ""));
                }

            });
        })


        var Unplanned = {
            logId: 0,
            SharedResourceCreatingCheckUrl: '', // url api
            timer: null,
            SharedResourceCreatingCheck: function () {
                var _this = this;
                var obj = {};
                _this.SharedResourceCreatingCheckUrl = "/api/Upload/GetImportLogById?id=" + _this.logId;

                _this.PollingSharedResourceCreatingCheck(obj, 1000, function (data) {

                    removeLoading('upload');

                    var msg = '当前导入批次:' + _this.logId + ' 状态:' + (data.detail.importStatus == 'success' ? '成功' : '失败');
                    alert(msg);
                    $('#LogInfo').html(msg);

                    if (data.detail.importStatus == 'fail') {
                        constructTable('#table', JSON.parse(data.detail.importMsg))
                    }
                    else {
                        $.get('/api/Upload/LoadImportDataByBatch?pageSize=10&id=' + _this.logId).done(function (data) {

                            constructTable('#table', data.detail)

                        });
                    }

                });
            },
            // 轮询
            PollingSharedResourceCreatingCheck: function (data, delay, cb) {
                var _this = this;
                delay = delay || 1000;
                $.get(_this.SharedResourceCreatingCheckUrl, data, function (res) {
                    if (!res.isError && res.detail.importStatus == 'New') {
                        _this.timer = setTimeout(function () {
                            _this.PollingSharedResourceCreatingCheck(data, delay, cb);
                        }, delay)
                    } else {// 不需要轮询调回调
                        cb && cb(res);
                    }
                })
            }
        };


        function constructTable(selector, list) {

            $(selector).html('');

            // Getting the all column names
            var cols = Headers(list, selector);

            // Traversing the JSON data
            for (var i = 0; i < list.length; i++) {
                var row = $('<tr/>');
                for (var colIndex = 0; colIndex < cols.length; colIndex++) {
                    var val = list[i][cols[colIndex]];

                    // If there is any key, which is matching
                    // with the column name
                    if (val == null) {
                        val = "";
                    }


                    if (val?.constructor === Object) {
                        val = JSON.stringify(val);
                    }



                    row.append($('<td/>').html(val));
                }

                // Adding each row to the table
                $(selector).append(row);
            }
        }

        function Headers(list, selector) {
            var columns = [];
            var header = $('<tr/>');

            for (var i = 0; i < list.length; i++) {
                var row = list[i];

                for (var k in row) {
                    if ($.inArray(k, columns) == -1) {
                        columns.push(k);

                        // Creating the header
                        header.append($('<th/>').html(k));
                    }
                }
            }

            // Appending the header to the table
            $(selector).append(header);
            return columns;
        }

    </script>

</body>

</html>

posted on 2023-06-16 17:32  隨風.NET  阅读(119)  评论(0编辑  收藏  举报

导航