61,112
社区成员
发帖
与我相关
我的任务
分享jquery.handsontable.full.js 非常酷的可编辑表格
工作中遇到的表格插件，记录下jQuery Handsontable 是jQuery插件中一款非常酷的可编辑的表格，它的描述是：a minimalistic Excel-like data grid editor for HTML, JavaScript & jQuery. (一款类似于Excel的可编辑表格，通过HTML，JavaScript和jQuery可以对它进行实现)
...全文
请发表友善的回复…
发表回复
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中应该有吧
