整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
preadJS纯前端表格控件是基于HTML5的JavaScript电子表格和网格功能控件，适用于.NET、Java和移动端等各平台在线编辑类Excel功能的表格程序开发。
本文介绍了如何设置SpreadJS的表格样式。
1. Spread.Sheets 提供了很多有关表格的公用接口。通过这些公用接口你可以很容易的管理和分析相互关联的数据。
2. 你可以控制是否要显示表格的表头和表尾，是否要以一种行（列）交替的样式显示表格，是否要把第一列或者最后一列高亮。例如：
3. Spread.Sheets 支持一些内置的表格样式，你也可以自己定制样式。比如：
效果展示：
试用SpreadJS，请通过以下方式联系我们：
微信：GrapeCityDT
邮件：marketing.xa@grapecity.com
官网：www.gcpowertools.com.cn
葡萄城是全球最大的控件提供商，世界领先的企业应用定制工具、企业报表和商业智能解决方案提供商，为超过75%的全球财富500强企业提供服务。
preadJS 是一款基于 HTML5 的纯前端电子表格控件，兼容 450 种以上的 Excel 公式，凭借其 “高性能、跨平台、与 Excel 高度兼容”的产品特性，备受以华为、苏宁易购、天弘基金等为代表的企业用户青睐。SpreadJS 为用户带来亲切的 Excel 使用体验的同时，满足 Web Excel 组件开发、表格文档协同编辑、数据填报、Excel 类报表设计等业务场景，极大降低了企业研发成本和项目交付风险。
SpreadJS支持Vue----一个JavaScript框架，该框架为开发人员提供了不同的工具，以帮助他们构建复杂的用户界面和Web应用程序。
SpreadJS可以通过以下两种方式与Vue一起使用：
使用节点包管理器
此方法涉及以下步骤：
<template>
<div>
<gc-spread-sheets
:hostClass='hostClass'
>
<gc-worksheet
:dataSource="dataTable"
:autoGenerateColumns = 'autoGenerateColumns'
>
<gc-column
:width="width"
:dataField="'price'"
:visible = 'visible'
:formatter = 'formatter'
:resizable = 'resizable'
></gc-column>
</gc-worksheet>
</gc-spread-sheets>
</div>
</template>
<script>
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
import '@grapecity/spread-sheets-vue'
export default {
data(){
return {
hostClass:'spread-host',
autoGenerateColumns:true,
width:300,
visible:true,
resizable:true,
formatter:"$ #.00"
}
},
computed:{
dataTable(){
let dataTable = [];
for (let i = 0; i < 42; i++) {
dataTable.push({price: i + 0.56})
}
return dataTable
}
}
}
</script>
<style scoped>
.spread-host {
width: 500px;
height: 600px;
}
</style>
使用传统HTML
此方法涉及以下步骤：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello SpreadJS Vue</title>
<link rel="stylesheet" href="lib/gc.spread.sheets.excel2016colorful.0.0.0.css" type="text/css"/>
<style>
#app{
width: 100%;
height:100%;
}
.vue-demo{
width: 800px;
height:400px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="app">
<app></app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="lib/gc.spread.sheets.all.0.0.0.js"></script>
<script src="lib/gc.spread.sheets.vue.js"></script>
<script type="text/x-template" id="app-template">
<div>
<gc-spread-sheets
v-bind:hostClass='hostClass'
@workbookInitialized='spreadInitHandle'
>
<gc-worksheet >
</gc-worksheet>
</gc-spread-sheets>
</div>
</script>
<script type="text/javascript">
window.onload = function () {
Vue.component('app', {
template: '#app-template',
data:function () {
return {
hostClass: "vue-demo"
}
},
methods: {
spreadInitHandle: function (spread) {
window.mySpread = spread;
console.log('now you can also get spread from window');
}
}
});
new Vue({
el:"#app",
})
}
</script>
</body>
</html>
SpreadSheets，Worksheet和Column是具有标签层次结构的基本元素。其他元素通过设置来起作用。主要标签层次为：
<gc-spread-sheets>
<gc-worksheet>
<gc-column> </ gc-column>
...
</ gc-worksheet>
...
</ gc-spread-sheets>
今天的内容就到这了，不要忘了在评论区留下的意见和建议！点击了解更多！获取最新资讯以及试用特权
挑选了10款在网站开发中很实用的 HTML5 & jQuery 插件，如果你正在寻找能优化网站，使其更具创造力和视觉冲击，那么本文正是你需要的。这些优秀的 jQuery 插件能为你的网站提供各种各样强大的功能和效果。
1.Dynatable
Dynatable 这款 jQuery 插件能很好的改善标准 HTML 列表的可用性。一旦初始化，插件就会通过列表的行和列转换成 JSON 对象数组，时刻准备操作。它可以提供强大的排序，过滤，分页或者是搜索 API，同时可以用简单的方式处理所有操作，可以被用于其他架构的 HTML 元素。
2. Least.js
Least.js 用于创建随机响应式的 HTML5 和 CSS3 图像库，包括 Lazyload。它非常容易安装和使用，而且最终效果都是非常华美和漂亮。
3 AudioPlayer.js
AudioPlayer.js 是可以在任何 web 页面快速放置 HTML5 驱动的 jQuery 音频播放器插件。这款插件的界面非常别致（不使用任何图片），有个响应式的布局，支持触摸。它有着主要的控制功能（播放，暂停，音量和播放时间）；大小只有 4 kb。
4. Echo.js
Echo 是个独立的 JavaScript 延迟加载图像工具。Echo 使用 HTML5 data-* 属性，速度非常的快。Echo 可以在 IE8+ 的浏览器运行， 它是非常简单的图像延迟加载工具，大小最小为 1KB ，是个 library agnostic（没有 jQuery/Zepto/other）
Lazy-loading 只会在元素将要被查看时才会请求从服务器中加载图像，通过简单的修改图像 src 属性就可以自动运行。同时这也是异步操作的一个优势所在。
5. Slippery
Slippry 是个 jQuery 图像库插件，拥有很多现代化时尚元素。首先，它使用 HTML5 & CSS3 标记，在响应式布局（可选）上运行的非常好。它可以变成 Sass 或者是 CSS 样式，有多种转换选择，其中包括 Ken Burns 效果。
滑块可以设置为自动滑动，显示标题，后退-前进+导航控制。它提供重大事件函数的回调，多个示例和一个详细文档。
6. AudioPlayer.js
AudioPlayer.js 是可以在任何 web 页面快速放置 HTML5 驱动的 jQuery 音频播放器插件。这款插件的界面非常别致（不使用任何图片），有个响应式的布局，支持触摸。它有着主要的控制功能（播放，暂停，音量和播放时间）；大小只有 4 kb。
7. HTML5 Sortable
HTML5 Sortable 是个创建可排序列表和网格的 jQuery 插件，使用本地 HTML5 拖拽 API。它有类似 jQuery UI 的 API + 行为。这是个轻量级插件（压缩后小于 1kb），支持 “连接列表（在不同列表转移条目）”，最厉害的是兼容所有主流浏览器。
8. Droparea
Droparea 是个 HTML5 拖拽文件上传 jQuery 插件，服务端包含一个 PHP 脚本。简单的拖拽图片文件进去指定的区域，图片就会自动的上传到你的服务器。在上传的同时，用户可以看到上传的进度。目前测试结果支持 Google Chrome 和 Mozilla Firefox。
9 jQuery.HTML5Form
jQuery.Html5form 是个 jQuery 插件，添加没有 HTML5 表格验证功能到非兼容的浏览器中，不要求任何自定义函数或者代码。用户只要用 HTML5 语法创建表格，它就会自动执行。同时，这个插件还提供额外的一些功能，比如错误信息提示等错误处理方案，用户可以自行选择自己需要的。
10. Cuepoint JS
Cuepoint JS 是一个为 HTML5 视频增加提示点和字幕的插件，几秒就显示一组字幕。它提供一个设置时间的事件，可以用来附加任何元素跳到多媒体第二个提示点。
上面的内容有某有帮到你呢，欢迎在底部留言点评提意见。
*请认真填写需求信息，我们会在24小时内与您取得联系。
