社区
CSS
帖子详情
jquery.handsontable.full.js 非常酷的可编辑表格
yysuiyueran
2016-07-05 11:08:31
工作中遇到的表格插件,记录下jQuery Handsontable 是jQuery插件中一款非常酷的可编辑的表格,它的描述是:a minimalistic Excel-like data grid editor for HTML, JavaScript & jQuery. (一款类似于Excel的可编辑表格,通过HTML,JavaScript和jQuery可以对它进行实现)
...全文
1326
7
打赏
收藏
jquery.handsontable.full.js 非常酷的可编辑表格
工作中遇到的表格插件,记录下jQuery Handsontable 是jQuery插件中一款非常酷的可编辑的表格,它的描述是:a minimalistic Excel-like data grid editor for HTML, JavaScript & jQuery. (一款类似于Excel的可编辑表格,通过HTML,JavaScript和jQuery可以对它进行实现)
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
7 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
rp722
2018-05-07
打赏
举报
回复
大神你好 ,我遇到json数据到前台了,但是handsontable 表格没数据显示,能帮忙看下吗,谢谢
qq_34908178
2017-01-22
打赏
举报
回复
下拉列表的内容怎么用ajax获取啊?还有导出,总显示找不到方法,要么就没有getPlugin定义,不是一个函数
hookee
2016-07-12
打赏
举报
回复
JPF1024
2016-07-12
打赏
举报
回复
不错,学习一个。。。。。。。。。。
yysuiyueran
2016-07-11
打赏
举报
回复
<html> <head> <title>查办统计表</title> <link rel="stylesheet" media="screen" href="${ctx}/js/handsontable/jquery.handsontable.full.css"> <script type="text/javascript" src="${ctx}/js/handsontable/jquery.handsontable.full.js"></script> <script type="text/javascript"> var head =[{caseType:"",caseTypeName:"类别",lianCount: "数(件)",banjieCount:"办结..", banjieMoney:"",yisongCount:"移送..",yisongMoney:"",destroyDen:"捣毁..(个)",publicityCount:"信息..数(件)"}, {caseType:"",caseTypeName:"",lianCount: "",banjieCount:"件数", banjieMoney:"金额(万元)",yisongCount:"件数",yisongMoney:"金额(万元)",destroyDen:"",publicityCount:""}]; var body =[]; <c:forEach var="item" items="${Dictionary.GSTB}"> body.push({caseType:"${item.itemValue }",caseTypeName:"${item.itemName }"}); </c:forEach> var bottom =[{caseType:"",caseTypeName:"说明:</br> 1.数据按月份统计,每月22日前报送当年1月至上月底的累计数据。</br> <p style='color: red'> 3.红色区域为校验未通过,请核对。</p> "}]; $(function() { //默认当前月份 的上一个月份 var year = ""; var date=new Date(); var year = date.getFullYear(); var month= date.getMonth(); $("#reportMonthCode").val(year+"年"+month+"月"); $("#titleYearCode").val(year); $("#titleMonthCode").val(month); function getData() { var data=eval('${data}'); if(data){ return head.concat(data,bottom); }else{ return head.concat(body,bottom); } } var notEmptyValidate = function(){ var instance = $container.handsontable("getInstance"); var emptyCount = 0; var i = 2; while (i < instance.countRows() - 1) { var j = 1; while (j <= instance.countCols() - 2) { var cellDate = instance.getDataAtCell(i, j)+""; if(cellDate == null || cellDate ==''||cellDate == 'undefined'||!(Handsontable.helper.isNumeric(cellDate))){ instance.getCell(i,j).className="htInvalid"; emptyCount += 1; } j++; } if(instance.getDataAtCell(i, j)!= null && !(Handsontable.helper.isNumeric(instance.getDataAtCell(i, j)+""))){ emptyCount += 1; } i++; } if(emptyCount == 0){ return true; }else{ return false; } } var $container = $("#example1"); $container.handsontable({ data: getData(), autoWrapRow:true, autoWrapCol:true, maxRows: getData().length, columns: [ {data: "caseTypeName"}, {data: "lianCount",type: 'numeric'}, {data: "banjieCount",type: 'numeric'}, {data: "banjieMoney",type: 'numeric',format: '0,0.00'}, {data: "yisongCount",type: 'numeric'}, {data: "yisongMoney",type: 'numeric',format: '0,0.00'}, {data: "destroyDen",type: 'numeric'}, {data: "publicityCount",type: 'numeric'} ], cells: function (row, col, prop) { var cellProperties = {}; if (row === 0 || row === 1 || col === 0) { cellProperties.readOnly = true; cellProperties.renderer = safeHtmlRenderer; } if(row === 0 || row === 1){ cellProperties.renderer = centerRenderer; } return cellProperties; }, mergeCells: [ {row: 0, col: 0, rowspan: 2, colspan: 1}, {row: 0, col: 1, rowspan: 2, colspan: 1}, {row: 0, col: 2, rowspan: 1, colspan: 2}, {row: 0, col: 4, rowspan: 1, colspan: 2}, {row: 0, col: 6, rowspan: 2, colspan: 1}, {row: 0, col: 7, rowspan: 2, colspan: 1}, {row: 5, col: 0, rowspan: 1, colspan: 8} ] }); var handsontable = $container.data('handsontable'); $("#submit").click(function(){ var reportMonthCode = $("#reportMonthCode").val(); if(reportMonthCode == null || reportMonthCode == "" || typeof(reportMonthCode)=='undefined'){ $.ligerDialog.warn("填报月份不能为空","提示信息",function(){ return false; }); }else if(notEmptyValidate()){ var dataArry = handsontable.getData(); //删除表头 dataArry.shift(); dataArry.shift(); //删除最后一行数据 dataArry.pop(); var data = JSON.stringify(dataArry); $.ajax({ url: "save.ht", data: {"data": data,"reportMonthCode":reportMonthCode,"orgPyType":"GS"}, type: 'POST', success: function (data) { if (data) { $.ligerDialog.success("上报成功!","提示消息",function(){ window.location.href=window.location.href.getNewUrl(); }); } }, error: function () { $.ligerDialog.error("上报失败!","提示信息"); } }); }else{ $.ligerDialog.warn("填报数据为空或格式错误","提示信息",function(){ return false; }); } }); }); function setTitleTimeCode(){ var yearCode = $dp.cal.getP('y'); var monthCode = $dp.cal.getP('M'); if(monthCode < 10){ monthCode = monthCode.substring(1,2); } $("#titleYearCode").val(yearCode); $("#titleMonthCode").val(monthCode); //回填选择时间的数据 var reportMonthCode = $dp.cal.getNewDateStr('yyyyMM'); loadData(reportMonthCode); } function loadData(reportMonthCode){ var $container = $("#example1"); var handsontable = $container.data('handsontable'); $.ajax({ url: "get.ht", data: {"reportMonthCode":reportMonthCode,"orgPyType":"GS"}, type: 'POST', dataType:'json', success: function (data) { var newData; if(data){ newData = head.concat(eval(data),bottom); }else{ newData = head.concat(body,bottom); } handsontable.loadData(newData); }, error: function () { var newData = head.concat(body,bottom); handsontable.loadData(newData); } }); } </script> </head> <body> <div class="panel"> <div class="panel-body"> <h2 style="text-align: center;"><input type="text" id="titleYearCode" style="width: 50px;border:0;text-align: right;" readonly="readonly"/>年 <input type="text" id="titleMonthCode" style="margin-left:2px;width: 25px;border:0;" readonly="readonly"/>月工商部门办案案件统计表</h2> <div style="text-align: left;margin-top: 5px;margin-bottom: 5px;"> <span style="font-size: 14px;">填报单位:${org.orgName }</span> <span style="font-size: 14px;margin-left: 20px;" >填报月份: <input id="reportMonthCode" name="reportMonthCode" type="text" readonly="readonly" class="Wdate" onclick="WdatePicker({dateFmt:'yyyy年M月',Mchanged:setTitleTimeCode,ychanged:setTitleTimeCode})" /> <font color="red">*</font> </span> <span style="margin-left: 20px;"> <input type="button" value="提 交" id="submit"/> </span> </div> <div class="handsontable" id="example1"></div> </div> </div> </body> </html>
yysuiyueran
2016-07-11
打赏
举报
回复
有,给你个页面,你瞅瞅,下班了,我不想看
张祠
2016-07-08
打赏
举报
回复
涨知识,在jquery的demo中应该有吧
jQuery
小白入门课第二季
Jquery
入门 第二季 介绍.mp4复习
Jquery
入门 第1季 内容.mp4用append prepend after before添加 .mp4用remove empty删除元素【注意对比英文文档】 .mp4获取并设置 CSS 类.mp4用css()获取和设置属性.mp4width height 多个处理尺寸的重要方法.mp4遍历traversing 查找元素的祖先.mp4遍历 查找后代 children和find.mp4遍历 查找同胞siblings 兄弟姐妹 .mp4遍历 过滤filter 缩小搜索范围.mp4ajax 简介.mp4
jQuery
AJAX 加载 load().mp4
jQuery
AJAX 加载用 ajax().mp4
jQuery
- AJAX get() 和 post() 方法.mp4
jQuery
ajax - serialize() 方法.mp4
jQuery
入门 第二季 总结.mp4
jQuery
Handsontable
【
jQuery
插件-一个非常
酷
的可
编辑表格
】
jQuery
Handsontable
是
jQuery
插件中一款非常
酷
的可编辑的表格,它的描述是:a minimalistic Excel-like data grid editor for HTML, JavaScript &
jQuery
. (一款类似于Excel的可
编辑表格
,通过HTML,JavaScript和
jQuery
可以对它进行实现) 我们来简单介绍下0.10.0-beta4,此版本也是最新版本,当然可能会有一些bug,但是,对于这种开源项目,我们也应该抱着一种尝试与学习的心态去面对,所以,我们
在线表格编辑插件
handsontable
使用
记录:
handsontable
,在线表格编辑插件 地址:https://github.com/
handsontable
/
handsontable
效果: 使用: <link rel="stylesheet" href="/static/
js
Conversion/chartTool/css/
jquery
.
handsontable
.full.css"> <script src="/static/
js
Conversion/chartTool/
js
/
jquery
.
handsontable
.ful
Handsontable
给力的仿Excel
JQuery
插件
转自 http://blog.csdn.net/MarseilleEE/article/details/53433962
Handsontable
是一个相当给力的
jQuery
插件,它实现了 HTML 页面中的表格编辑功能,并且是仿 Excel 的编辑效果。在 Excel 中可进行的操作,你几乎都可以在网页中做到,如拖动复制、Ctrl+C 、Ctrl+V 等等。另外在浏览器支持方
handsontable
一个Excel一样的外观数据网格组件
今天想讲讲一个很给力的JQUERY插件---Handsontable,它实现了在HTML中仿EXCEL效果,几乎在EXCEL中可以实现的功能,利用它都可以在页面中实现。 如:排序,分组,数据绑定,拖动复制等。 快速启动 1:下载必须包 download it in a ZIP file. 2:引入基础文件 3然后添加一个用于呈现
CSS
61,112
社区成员
60,730
社区内容
发帖
与我相关
我的任务
CSS
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
复制链接
扫一扫
分享
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章