1.模板
[
["法律服务评价表","","","","","","",""],
["申请单位(盖章):","","","","","","",""],
["培训主题","","","","讲师","","",""],
["时间","","","","地点","","",""],
["讲师方面","","","10分(好)","9分(较好)","8分(一般)","7分(较差)","6分(差)"],
["A:讲授内容","","","","","","",""],
["B:表达技巧","","","","","","",""],
["C:问题处理能力","","","","","","",""],
["D:培训讲师专业知识","","","","","","",""],
["E:与学员的互动","","","","","","",""],
["F:能耐心解答学员的问题","","","","","","",""],
["G:态度的认真、严谨","","","","","","",""],
["课程方面","","","10分(好)","9分(较好)","8分(一般)","7分(较差)","6分(差)"],
["A:逻辑清晰,易于理解","","","","","","",""],
["B:内容详实,体系完善","","","","","","",""],
["C:对工作有帮助,有价值","","","","","","",""],
["对未来培训的需求或建议","","","","","","",""],
["","","","","","","",""],
["附件","","","","","","",""],
["","","","","","","",""]
]
2.模板的合并规则
{"rowHeaders":false,
"colHeaders":false,
"filters":false,
"dropdownMenu":false,
"fillHandle":false,
"colWidths":[70,70,70,100,100,100,100,100],
"mergeCells":[
{"row":0,"col":0,"rowspan":1,"colspan":8},
{"row":1,"col":0,"rowspan":1,"colspan":2},
{"row":1,"col":2,"rowspan":1,"colspan":6},
{"row":2,"col":0,"rowspan":1,"colspan":2},
{"row":2,"col":2,"rowspan":1,"colspan":2},
{"row":2,"col":4,"rowspan":1,"colspan":2},
{"row":2,"col":6,"rowspan":1,"colspan":2},
{"row":3,"col":0,"rowspan":1,"colspan":2},
{"row":3,"col":2,"rowspan":1,"colspan":2},
{"row":3,"col":4,"rowspan":1,"colspan":2},
{"row":3,"col":6,"rowspan":1,"colspan":2},
{"row":4,"col":0,"rowspan":1,"colspan":3},
{"row":5,"col":0,"rowspan":1,"colspan":3},
{"row":6,"col":0,"rowspan":1,"colspan":3},
{"row":7,"col":0,"rowspan":1,"colspan":3},
{"row":8,"col":0,"rowspan":1,"colspan":3},
{"row":9,"col":0,"rowspan":1,"colspan":3},
{"row":10,"col":0,"rowspan":1,"colspan":3},
{"row":11,"col":0,"rowspan":1,"colspan":3},
{"row":12,"col":0,"rowspan":1,"colspan":3},
{"row":13,"col":0,"rowspan":1,"colspan":3},
{"row":14,"col":0,"rowspan":1,"colspan":3},
{"row":15,"col":0,"rowspan":1,"colspan":3},
{"row":16,"col":0,"rowspan":1,"colspan":8},
{"row":17,"col":0,"rowspan":1,"colspan":8},
{"row":18,"col":0,"rowspan":1,"colspan":8},
{"row":19,"col":0,"rowspan":1,"colspan":8}
]
}
3.渲染表单
将模板的json和规则存在一个对象里
在页面进行直接展示时:js进行调用模板和规则,渲染表单
optionRule = JSON.parse(optionRule); //规则
optionRule.data = JSON.parse(data.templateData); //模板的json
initHandsontable(optionRule);//调用方法渲染
function initHandsontable (res){
var container = document.getElementById('template');//要放到的位置是id=‘template’的元素里
if(hot!=null)return;
hot = new Handsontable(container, res);
$("#hot-display-license-info").hide();
}
如图所示:
所有的单元格都是可以编辑的
4.设置部分单元格只读
optionRule = JSON.parse(optionRule); //规则
optionRule.data = JSON.parse(data.templateData); //模板的json
initHandsontable(optionRule);//调用方法渲染
setTableCell();//设置单元格部分只读
//渲染
function initHandsontable (res){
var container = document.getElementById('template');//要放到的位置是id=‘template’的元素里
if(hot!=null)return;
hot = new Handsontable(container, res);
$("#hot-display-license-info").hide();
}
//设置单元格部分只读
function setTableCell(){
//=======================指定某些项只读=========
hot.updateSettings({
cells:function(row,col){
var cellProperties ={};
if(col==0){//列数是0的
cellProperties.readOnly = true;
}
if(row==4||row==12){//行数是4或12的
cellProperties.readOnly = true;
}
if(row==1&&col==2){//行数为 1,列数为2的
cellProperties.readOnly = true;
}
if(row==3&&col==2){
cellProperties.readOnly = true;
}
if(row==2&&col==4){
cellProperties.readOnly = true;
}
if(row==3&&col==4){
cellProperties.readOnly = true;
}
if(row==17){
cellProperties.readOnly = false;
}
/*if(hot.getData()[row][col] ==='10分(好)'){//单元格内容是'10分(好)'的
cellProperties.readOnly = true;
}
if(hot.getData()[row][col] ==='9分(较好)'){
cellProperties.readOnly = true;
}
if(hot.getData()[row][col] ==='8分(一般)'){
cellProperties.readOnly = true;
}
if(hot.getData()[row][col] ==='7分(较差)'){
cellProperties.readOnly = true;
}
if(hot.getData()[row][col] ==='6分(差)'){
cellProperties.readOnly = true;
}*/
return cellProperties;
}
});
hot.render();
//==========================================
}
如图所示:
部分单元格实现了不可编辑,保证了表单的结构不会被改变,用户只填写需要填写的部分
5.设置全文只读
optionRule = JSON.parse(optionRule); //规则
optionRule.data = JSON.parse(data.templateData); //模板的json
initHandsontable(optionRule);//调用方法渲染
hot.updateSettings({readOnly:true});//全文只读
hot.render();//刷新表单
如图所示:
全表单都不可编辑