Spread JS 随笔一简单表格

肯定没问题

已于 2023-10-19 13:07:32 修改

阅读量374

点赞数

分类专栏：前端学习文章标签： spread-js 表格控件

于 2017-06-05 19:44:25 首次发布

本文链接：https://blog.csdn.net/caidong1314/article/details/72870571

版权

前端学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Spread JS 随笔一简单表格 (可编辑行)

Spread JS 是一个在线Excel表格控件，功能非常强大。下面大概的介绍一下简单的使用。

最简单的表格

在工程文件中的head 部分引用相关的css 和js

<head>
　　　　　 <link rel="styleSheet" href="CSS/gc.spread.views.dataview.10.1.1.css" />
         <script src="JS/gc.spread.common.10.1.1.min.js" type="text/javascript"></script>
         <script src="JS/gc.spread.views.dataview.10.1.1.min.js" type="text/javascript"></script>
         <script src="JS/gc.spread.views.gridlayout.10.1.1.min.js" hg type="text/javascript"></script>
         <script src="JS/gc.spread.views.dataview.locale.zh-CN.10.1.1.min.js"></script><!--加载中文的-->
　　</head>

在页面主体部分添加一个容器

<body>
　　　<div id="grid1" class="grid" style="  width:100%; height:500px;"></div>
</body>

准备好数据，在页面添加一个JS

<script type="text/javascript">
　　　　 //相关的列头名 相关数据
　　　　var data = [{
            "姓名": "张三",    //字符串要加双引号
            "年龄": 22,
            "性别": "男",
            "身高": 192,
            "爱好": "看书",
            "电话": 114,
            "住址": "地球",
            "性格": "开朗",
            }, {
　　　　　　　"姓名": "李四",   
            "年龄": 34,
            "性别": "女",
            "身高": 165,
            "爱好": "唱歌",
            "电话": 100,
            "住址": "火星",
            "性格": "温柔"
　　　　　}]; 

//无需编辑表格
var dataView = new GC.Spread.Views.DataView(document.getElementById("grid1"), data, 

new GC.Spread.Views.Plugins.GridLayout( //相关的其他功能设置在此添加设置  )); 　　


//如果需要可编辑表格

//var dataView = new GC.Spread.Views.DataView(document.getElementById("grid1"), data, 

//new GC.Spread.Views.Plugins.GridLayout(
// {
//    allowEditing: true
//   } 
// )); 　　
 
</script>

示例图

spread Js

肯定没问题

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Spread JS 随笔一简单表格

Spread JS 随笔一简单表格 (可编辑行)Spread JS 是一个在线Excel表格控件，功能非常强大。下面大概的介绍一下简单的使用。　　最简单的表格　　 1. 在工程文件中的head 部分引用相关的css 和js　　　　　
复制链接

扫一扫