在web中js实现类似excel的表格控件
Execl功能非常强大，内置的很多函数或公式可以大大提高对数据的加工处理能力。那么在web中有没有类似的控件呢？经过一番搜寻，发现handsontable具备了基本的excel功能支持公式，同时能对数据进行实时编辑。另外支持拖动复制、Ctrl+C 、Ctrl+V 等等。在浏览器支持方面，它支持以下的浏览器： IE7+, FF, Chrome, Safari, Opera。
首先引入相关库文件，公式支持不包含在handsontable.full.js中，需要单独引入：
<script src="http://handsontable.github.io/handsontable-ruleJS/lib/jquery/jquery-1.10.2.js"></script> <script src="http://handsontable.github.io/handsontable-ruleJS/lib/handsontable/handsontable.full.js"></script> <link rel="stylesheet" media="screen" href="http://handsontable.github.io/handsontable-ruleJS/lib/handsontable/handsontable.full.css"> <script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/lib/lodash/lodash.js"></script> <script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/lib/underscore.string/underscore.string.js"></script> <script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/lib/moment/moment.js"></script> <script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/lib/numeral/numeral.js"></script> <script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/lib/numericjs/numeric.js"></script> <script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/lib/js-md5/md5.js"></script> <script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/lib/jstat/jstat.js"></script> <script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/lib/formulajs/formula.js"></script> <script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/js/parser.js"></script> <script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/js/ruleJS.js"></script> <script src="http://handsontable.github.io/handsontable-ruleJS/lib/handsontable/handsontable.formula.js"></script>
在HTML中放置一个Div容器来存放handsontable控件：
<body> <div id="handsontable-code"></div> </body>
在javascript代码中，首先获取div容器，然后创建表格控件：
<script type="text/javascript">
$(document).ready(function () {
var data1 = [
['=$B$2', "Maserati", "Mazda", "return 1+2;", 'return DataAccess.getScalar("select top 1 name from Cloud_Users where cellPhone=15895211486");', "=A$1"],
[2009, 0, 2941, 4303, 354, 5814],
[2010, 5, 2905, 2867, '=SUM(A4,2,3)', '=$B1'],
[2011, 4, 2517, 4822, 552, 6127],
[2012, '=SUM(A2:A5)', '=SUM(B5,E3)', '=A2/B2', 12, 4151]
];
function negativeValueRenderer(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
var escaped = Handsontable.helper.stringify(value),
newvalue;
if (escaped.indexOf('return') === 0) {
//计算列为只读
//cellProperties.readOnly = true;
td.style.background = '#EEE';
newvalue = document.createElement('span');
$.ajax({
//提交数据的类型 POST GET
type: "POST",
//提交的网址
url: "/services/CSEngine.ashx",
//提交的数据
data: { code: value, code2: escaped },
//返回数据的格式
datatype: "html",//"xml", "html", "script", "json", "jsonp", "text".
//在请求之前调用的函数
//beforeSend: function () { $("#msg").html("logining"); },
//成功返回之后调用的函数
success: function (data) {
// $("#msg").html(decodeURI(data));
newvalue.innerHTML = decodeURI(data);
},
//调用执行后调用的函数
complete: function (XMLHttpRequest, textStatus) {
//alert(XMLHttpRequest.responseText);
// alert(textStatus);
//HideLoading();
},
//调用出错执行的函数
error: function () {
//请求出错处理
// alert('error')
}
});
Handsontable.Dom.addEvent(newvalue, 'mousedown', function (e) {
e.preventDefault(); // prevent selection quirk
});
Handsontable.Dom.empty(td);
td.appendChild(newvalue);
}
// if row contains negative number
if (parseInt(value, 10) < 0) {
// add class "negative"
td.className = 'negative';
}
}
//类似excel进行拖放，公式会变
var container1 = $('#handsontable-code');
Handsontable.renderers.registerRenderer('negativeValueRenderer', negativeValueRenderer);
container1.handsontable({
data: data1,
minSpareRows: 1,
colHeaders: true,
rowHeaders: true,
contextMenu: true,
manualColumnResize: true,
formulas: true,
cells: function (row, col, prop) {
var cellProperties = {};
var escaped = Handsontable.helper.stringify(this.instance.getData()[row][col]);
if (escaped.indexOf('return')===0) {
cellProperties.renderer = "negativeValueRenderer";
}
return cellProperties;
}
});
});
</script>
其中 =SUM(B5,E3)的公式是RuleJs提供的，return 1+2是自己实现的C#代码脚本，需要单击解析：
public class CSEngine : IHttpHandler {
private static int count = 0;
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
try
{
count++;
string ret = "";
string code = context.Request["code"].ToString();
if (string.IsNullOrEmpty(code))
{
ret = "参数错误";
}
else
{
ScriptOptions options = ScriptOptions.Default
.AddReferences(
Assembly.GetAssembly(typeof(DBServices.DataAccess))
)
//.AddImports("System.Data")
//.AddImports("System.Data.SqlClient")
.AddImports("DBServices");
var state = CSharpScript.RunAsync(code, options).Result.ReturnValue;
ret = state.ToString();
state = null;
options = null;
}
Console.WriteLine(count);
context.Response.Write(ret);
}
catch(Exception ex)
{
//error
Console.WriteLine(count);
}
}
public bool IsReusable {
get {
return false;
}
}
}
运行代码，如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js实现表格筛选功能
本应用就两个主要实现: 1.表格的id 和 class之间的命名关系 请看图: 将组名和个人信息联表格联系起来,这样会很好的操作表格 HTML代码: <tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr> <tr class="child_row_01"><td>张三</td>
-
JS表格组件BootstrapTable行内编辑解决方案x-editable
前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件,遇到过一些坑,再此做个采坑记录吧!想要了解bootstrapTable的朋友可以移步JS组件系列--表格组件神器:bootstrap table. 一.x-editable组件介绍 x-editable组件是一个用于创建可编辑弹出框的插件,它支持三种风格的样式:bootstrap.Jquery U
-
Angularjs实现带查找筛选功能的select下拉框示例代码
前言 对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!所以为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有这样的插件,但我们用的是Angularjs,更希望用双向绑定,指令的方式优雅地解决这个问题. 分析 我们的目标是在原来的<select ng-options="">标签上新加一个属性 select-search 就能支持查找的功能.如果这个属性没起作用,也不影响原来的select的功
-
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
调用时可以这样: 1,tempStr=GetNewSelectStr(dataTable.value,"select"+rowIndex,true); 2,makeSelectBox("select"+rowIndex,tempStr,value,obj); tempStr-这个是返回的下拉列表值的框体 dataTable.value-这个是数据源(我这里是一张表) "select"+rowIndex-这个是ID号,也就是当前这个select的i
-
JS对HTML表格进行增删改操作
要求如下: 写一个html页面,里面有一个表格,储存用户信息,包括:用户名,密码,姓名,邮箱,电话,qq,身份证号. 现在要通过js对表格进行动态的增删改查(只是内存操作即可): 首先,加载页面时用js加载3条初始化记录: 有一个增加记录的按钮,点击后弹出一个div层提供输入,要求各字段必须符合输入格式且不能为空: 用户名:英文+数字+下划线: 密码:英文+数字+下划线+6位以上: 姓名:中文: 邮箱,电话,qq,身份证号符合格式: 每条记录有修改.删除: 修改类似增加,要把原来
-
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
复制代码 代码如下: <script> var value = "teset"; var s = new RegExp(value, "i")//I 表示不区分大小写(可省略) $(".lico").each(function (i, n) { //lico为所有li列表的class名 遍历 if (s.test($(n).text())) //筛选成功
-
jQuery+json实现动态创建复杂表格table的方法
本文实例讲述了jQuery+json实现动态创建复杂表格table的方法.分享给大家供大家参考,具体如下: function SetSubTable() { var obj = jQuery.parseJSON($("#SubJsonStrValue").val()); window.ALLPARAMTERS = obj; var row_str = ""; var span_num = 1 for (var i = 0; i < obj.length; i+
-
在jQuery中 关于json空对象筛选替换
Requirement: 一个json object,并且可能包含一些空值或者空字符串,在页面显示的时候希望遇到空值显示"N/A",但是有一部分值是允许空值的.因此希望通过筛选将空值设为"N/A".例如希望学生的"age"和"score"如果为空显示"N/A",而"sex"或者"comment"为空则不做处理. 复制代码 代码如下: var student = {
-
jquery遍历筛选数组的几种方法和遍历解析json对象
jquery grep()筛选遍历数组 复制代码 代码如下: $().ready( function(){ var array = [1,2,3,4,5,6,7,8,9]; var filterarray = $.grep(array,function(value){ return value > 5;//筛选出大于5的 }); for(var i=0;i<filterarray.length;i++){ alert(filterarray[i]); } for (key in filtera
-
vue.js表格组件开发的实例详解
前言 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件开发的基础 组件可以扩展 HTML 元素,封装可重用的代码.我理解为功能模块的模板吧. 对于vue来说,组件是这个样子的,我们在html里面写 <div id="example"> <my-compone