一、x-editable组件介绍
x-editable组件是一个用于创建可编辑弹出框的插件，它支持三种风格的样式：bootstrap、Jquery UI、Jquery。大致效果如下图：
根据博主一贯的风格，这里肯定是选用第一种喽。首先还是给出开源地址吧。
x-editable开源地址：https://github.com/vitalets/x-editable
x-editable文档地址：http://vitalets.github.io/x-editable/docs.html
x-editable在线Demo：http://vitalets.github.io/x-editable/demo-bs3.html
1、x-editable初体验
首先下载基于bootstrap的源码到本地。引用相关文件。
<link href="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />
<script src="/Scripts/jquery-1.9.1.min.js"></script>
<script src="/Content/bootstrap/js/bootstrap.min.js"></script>
<script src="~/Content/bootstrap3-editable/js/bootstrap-editable.js"></script>
页面元素
复制代码代码如下:
<a href="#" id="username" data-type="text" data-title="用户名">用户名</a>
js初始化
$(function () {
$('#username').editable()
})
trHtml="<tr>"+
"<th style='width: 5%'><input class='awsui-checkbox' id='checkboxStyle' value='' type='checkbox'/></th>"+
"<th style='width: 6%'>序号</th>"+
"<th style='width: 8%'>类型</th>"+
"<th style='width: 23%'>公司</th>"+
"<th style='width: 23%'>付款方</th>"+
"<th style='width: 12%'>金额</th>"+
"<th style='width: 15%'>日期</th>"+
"<th style='width: 8%'>状态</th>"+
"</tr>"
$("thead").append(trHtml)
直接用<input class='awsui-checkbox' id='checkboxStyle' value='' type='checkbox'/>就好
设置样式的方式跟html中的css类似，SpreadJS有很多样式的属性，通过设置对应的属性来完成整体样式的设置：构造一个样式并设置不同的属性, 示例代码如下:
var style = new GC.Spread.Sheets.Style()
style.backColor = 'red'
style.foreColor = 'green'
style.isVerticalText = 'true'
之后可以将此样式设置给单元格, 行, 或者列:
//set style to cell.
sheet.setStyle(5, 5, style, GC.Spread.Sheets.SheetArea.viewport)
//set style to row.
sheet.setStyle(5, -1, style, GC.Spread.Sheets.SheetArea.viewport)
//set style to column.
sheet.setStyle(-1, 5, style, GC.Spread.Sheets.SheetArea.viewport)
样式在不同的层级结构中具有不同的优先级别, 如下: 单元格 >行 >列。
另外，SpreadJS 支持给样式设置一个名称, 并将这个命名过的样式加入到表单的名称样式集合中。这样让样式的使用和管理更方便。
构造一个名称样式, 并将此样式添加到表单或者 Spread 控件的名称样式集合中。
var style = new GC.Spread.Sheets.Style()
style.name = 'style1'
style.backColor = 'red'
//add to sheet's named style collection.
sheet.addNamedStyle(style)
//add to spread's named style collection.
spread.addNamedStyle(style)
当名称样式添加到表单名称样式集合中后, 可以通过样式的名称找到它:
sheet.getNamedStyle('style1')
spread.getNamedStyle('style1')
如果名称样式不再使用, 你可以将其从名称集合中删除掉:
sheet.removeNamedStyle('style1')
spread.removeNamedStyle('style1')
