handsontable设置部分单元格只读及其他

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();//刷新表单

如图所示：

全表单都不可编辑