欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

<script src="./wijmo/dist/controls/wijmo.min.js"></script>
<script src="./wijmo/dist/controls/wijmo.grid.min.js"></script>
<script src="./wijmo/dist/controls/wijmo.grid.detail.min.js"></script>
<script src="./wijmo/dist/controls/wijmo.grid.xlsx.min.js"></script>
<script src="./wijmo/dist/controls/wijmo.xlsx.min.js"></script>

<script src="./jszip.min.js"></script>

var handleDrop = function (file) {
    var reader,
        workbook;
  
    if (file) {
        reader = new FileReader;
        reader.onload = function (e) {
            workbook = new wijmo.xlsx.Workbook(),
                workbook.load(reader.result);
        };
        reader.readAsDataURL(file);
    }
}

 workbook = new wijmo.xlsx.Workbook();
 workbook.load(reader.result);

var getCollectionView = function (workbook) {
    var collectionView = [];
    if (workbook) {
        var sheet = workbook.sheets[0],
            header = []; // 列標(biāo)題數(shù)組
      
        for (var i = 0, length = sheet.rows.length; i < length; i++) {
            var row = sheet.rows[i],
                rowArray = {};
            for (var j = 0, jLength = row.cells.length; j < jLength; j++) {
                var cell = row.cells[j];
                // 如果是第一行數(shù)據(jù)，那么是作為列標(biāo)題出現(xiàn)的，就放進(jìn)標(biāo)題數(shù)組中
                if (i === 0) {
                    header.push(cell.value);
                }
                else {
                    // 后面的行數(shù)組，就作為rowArray對(duì)象的屬性存儲(chǔ)，屬性名就是該列的標(biāo)題。
                    rowArray[header[j]] = cell.value;
                }
            }
            if (i !== 0) {
                collectionView.push(rowArray);
            }
        }
    }
    return collectionView;
} 

gridDiv = document.createElement(''div'');
gridDiv.classList.add(''grid'');
dataGrid = new wijmo.grid.FlexGrid(gridDiv);// 通過傳入容器構(gòu)造一個(gè)FlexGrid表單。
var collectionView = new wijmo.collections.CollectionView(getCollectionView(workbook));
dataGrid.itemsSource = collectionView;

(function () {
    var dataGrid = null,
        gridDiv = null,
        workbook = null;
    window.addEventListener(''load'', function () {
        gridDiv = document.createElement(''div'');
        gridDiv.classList.add(''grid'');
        dataGrid = new wijmo.grid.FlexGrid(gridDiv);
        var target = document.querySelector(''#target'');

        target.addEventListener(''dragenter'', function (e) {
            e.preventDefault();
            this.classList.remove(''hover'');

        });
        target.addEventListener(''dragleave'', function (e) {
            e.preventDefault();
            this.classList.add(''hover'');
        });
        target.addEventListener(''dragover'', function (e) {
            e.preventDefault();
            this.classList.remove(''hover'');
        });

        target.addEventListener(''drop'', function (e) {
            e.preventDefault();
            handleDrop(e.dataTransfer.files[0]);
            // 將這個(gè)表單添加到頁(yè)面上
            this.appendChild(gridDiv);
        });
    });

    var handleDrop = function (file) {
        var reader;
        var workbook;
      
        if (file) {
            reader = new FileReader;
            reader.onload = function (e) {
                workbook = new wijmo.xlsx.Workbook();
                workbook.load(reader.result);
                var collectionView = new          wijmo.collections.CollectionView(getCollectionView(workbook));
                dataGrid.itemsSource = collectionView;
                // console.log(dataGrid.collectionView);
            };
            reader.readAsDataURL(file);
        }
    }

    var getCollectionView = function (workbook) {
        var collectionView = [];
      
        if (workbook) {
            var sheet = workbook.sheets[0];
            var title = [];
          
            for (var i = 0, length = sheet.rows.length; i < length; i++) {
                var row = sheet.rows[i];
                var rowArray = {};
              
                for (var j = 0, jLength = row.cells.length; j < jLength; j++) {
                    var cell = row.cells[j];
                    if (i === 0) {
                        header.push(cell.value);
                    }
                    else {
                        rowArray[header[j]] = cell.value;
                    }
                }
                if (i !== 0) {
                    collectionView.push(rowArray);
                }
            }
        }
        return collectionView;
    }
})(window);

wijmo.grid.xlsx.FlexGridXlsxConverter.save(dataGrid,
    { includeColumnHeaders: true }, fileName);

<script src="./wijmo/dist/controls/wijmo.chart.min.js"></script>

chart = new wijmo.chart.FlexChart(''#chart'');
chart.initialize({
    itemsSource: collectionView,
    bindingX: ''name'',
    options: {
        groupWidth: 15
    },
    series: [
        { name: ''年齡'', binding: ''age'' },
    ]
});

chart.chartType = chart.chartType === wijmo.chart.ChartType.Column ?
    wijmo.chart.ChartType.Area :
    wijmo.chart.ChartType.Column;

關(guān)于本篇的代碼已經(jīng)上傳 http://files.cnblogs.com/files/likeFlyingFish/xlsWijmo.rar;
后續(xù)會(huì)托管到github.

最終還是比較快的完成了任務(wù)。

關(guān)于這個(gè)項(xiàng)目的Excel IO 就簡(jiǎn)單介紹到這里，這個(gè)項(xiàng)目現(xiàn)在已經(jīng)完成了，后續(xù)會(huì)分享一些其他的技術(shù)細(xì)節(jié)。

希望可以對(duì)你提供幫助。

本文轉(zhuǎn)自：http://www.cnblogs.com/likeFlyingFish/p/5794467.html