Try Jspreadsheet

試玩Jspreadsheet library(目前僅試著餵入資料)

by cactus77kiki

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://bossanova.uk/jspreadsheet/v4/jexcel.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v4/jexcel.css" type="text/css" />
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		crossorigin="anonymous">
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
		crossorigin="anonymous"></script>

<div id="vapp1">  

  <h5 style="margin-left: 10px;  margin-top: 5px; font-size: 16px;">
			<a href="#" style="color: black; text-decoration: none;">
				<i class="fa fa-home" aria-hidden="true"></i>
			</a> <i class="fa fa-angle-right" aria-hidden="true"></i> {{menutext}}
	</h5>
  <div class=" form-row" style="margin-left: 10px;">
						<div class="col mb-2">
							<!--
              查詢年月：
							<input type="text" class="form-control-sm " placeholder="YYYYMM" style="width:80px;"
								maxlength="6"/>
							<select class="form-control-sm" >
								<option value=''>- 選擇類型 -</option>
								<option v-for="code in 5" v-bind:value="code">{{code}}
								</option>
							</select>
              -->
							<button type="button" class="btn btn-outline-primary mb-1 btn-sm" v-on:click="gosearch">
								<i class="fa fa-search"></i> 取得api資料
							</button>	              
						</div>
					</div>
  

</div>
<div id="spreadsheet" style="margin-left: 10px;" >
  {{options.data}}
</div>

<div id="vapp3" style="text-align:left; margin-left:...

CSS

/* 20211119 Note:
jspreadsheet搭配vue使用心得
1. 依據div(id)長出元件
2. 初始化: 需給定一個設定物件(本例:vueins3之options)
   (1)定義header(欄位名稱)
   (2)定義資料(資料型態: 陣列內為陣列)
3. 考慮到通常會有[1.查詢區塊vueins1][3.查詢結果集vueins3][2.動作按鈕vueins2],故本例區分為3個vue instance
   (1)區塊1按下按鈕:api=>data=>餵給spreadsheet全域物件
   (2)區塊3:處理jspreadsheet初始化
   (3)區塊2:未實作按鈕功能
[4註]:資料類型請參考vueins3.myCars, 欄位(型態)設定請參考vueins3.options.columns
*/

/*其它疑問點
1.是否有分頁?
2.可否判斷資料的狀態:有異動或為新增?在資料送回後端時是否僅能整包資料集上傳?
*/
/*使用後覺得缺點
1.data為陣列內再包陣列，第2陣列內為值的集合(不含屬性),後端需要再加工,且須與前端的column對齊,比較不便例
2.enter鍵僅能跳列,不能跳欄
3.新增列並輸入資料後,要再新增一列空白列,資料集才會出現最後一筆keyin的資料
*/
/*其他類似的spreadsheet library，並未詳細survey如何使用
1.vue excel component: [vue-excel-editor](https://github.com/cscan/vue-excel-editor)
2.overall: https://dzone.com/articles/5-popular-standalone-javascript-spreadhsheet-libra
  (1)handsontable: github star數較jspreadsheet多,且也可支援vue,蠻有興趣研究的
3.webix: https://webix.com/spreadsheet/
*/
/*reference
github: https://github.com/jspreadsheet/ce
官方文件: https://bossanova.uk/jspreadsheet/v2/
api-如何增減資料: https://bossanova.uk/jspreadsheet/v4/examples/programmatically-updates
範例code: 1
中文範例說明: https://kknews.cc/zh-tw/code/rlqvax4.html
*/

JavaScript

let spreadsheet;
var vueins1 = new Vue({
	el: '#vapp1',
  data: {
  	//msg: 'text'
    menutext: 'menuname',
  },
  methods: {
  	//查詢
  	gosearch(){
    	let fakedata = [];
      axios.get('https://jsonplaceholder.typicode.com/comments')
				.then(function (Result) {
          //取得每筆資料->所有屬性->每筆資料每個屬性之值加入至dataarray          
          for(let idx = 0;idx<Result.data.length;idx++){
              let singleton = Result.data[idx];
              
              let dataarray = [];
              for(let kidx = 0; kidx<Object.keys(singleton).length;kidx++){
                let objkey = Object.keys(singleton)[kidx];
                dataarray.push(singleton[objkey]); 
              }
              fakedata.push(dataarray);
          } 
          //console.log(fakedata);
          for(let idx = 0;idx<fakedata.length;idx++){
            spreadsheet.insertRow(fakedata[idx]);        
          }
          spreadsheet.deleteRow(0, 1);//資料insert後才可刪除最後一筆        
			})
			.catch(function (error) {
		  	console.log(error.message);			
		  	alert("ajax錯誤");
			});
    },
  	initializer(){
    	
    }
  },
  created(){
  	this.initializer();
  }
});
var vueins3 = new Vue({
	el: '#vapp3',
  data: {
  	//msg: 'text'
    menutext: 'menuname',
  },
  methods: {
  	
  	initializer(){
    	
    }
  },
  created(){
  	this.initializer();
  }
});
var vueins2 = new Vue({
	el: '#spreadsheet',
  data: {
  	dataVal: [],
    /*myCars: [
        [
          "Jazz",
          "Honda",
          "2019-02-12",
          "",
          true,
          "$ 2.000,00",
          "#777700"
        ],
        ["Civic", "Honda", "2018-07-11", "", true, "$ 4.000,01", "#007777"],
        ["Z4", "BMW", "2017-11-24", "", false, "$ 324.072,58", "#700d0d"],
        [
          "Boxter S",
          "Porshe",
          "2019-08-24",
          "",
          true,
          "$ 307.839,45",
          "#0e0438"
        ]        
      ],*/
  	options: {
    	data:[[]],        
      //data:[],  
   ...