【泛微ecology】JS控制明细列显示隐藏 同时控制字段必填属性

/**
 * 需求描述———在流程表单里有一种很常见的需求：
 * 1. 根据某个字段的值控制 另一个字段是否必填（标准配置里触发字段只能为下拉框）
 * 2. 根据某个字段的值控制明细表里的某列显示与隐藏，同时显示则必填，隐藏则取消必填
 * 3. 泛微自带的cus_ControlDetailColumnByClass 方法不完善，当隐藏了某列后，新增一行，那个单元格还在
 * 以下方法是在泛微E8的基础上封装的js方法，用以解决上述问题。
 */
	
/**
 * 通过js改变字段的必填属性，以及必填时红色小感叹号的交互
 * @param fieldid (string)标签ID。注意如果是在明细表里，字段id还要加上行index才是标签id
 * @param sign (boolean)true就是设置为必填，false就是取消必填
 * 缺陷：最好在字段的标签上能判断出字段的类型。目前我只发现浏览类型的字段红色小感叹号位置需要特殊处理。
 * @author xf.liu 18-07-25
 */
function changeMustFillStyle = function(fieldid, sign, viewtype){
	var needCheck = $('input[name=needcheck]');//表单提交时的校验依据
	var needCheckArr = needCheck.val().split(",");
	var field = $("#"+fieldid);//目标字段
	var spanid = fieldid +"span";//红色小感叹号所在的span标签
	var isBrower = $(field.parents('td')[0]).find('.e8_browserSpan').length > 0;//尝试去判断是否浏览字段
	if(isBrower){//如果是浏览类型，span在这
		spanid += "img";
	}
	var span = $("#"+spanid);
	field.attr("mustFill", sign);//把是否必填的标志放在字段上
	if(sign){//置为必填
		if(!field.val()){//若此时字段值为空，
			span.html('<img src="/images/BacoError_wev8.gif" align="absmiddle">');//显示红色小感叹号
		}
		needCheckArr.push(fieldid);
		needCheck.val(needCheckArr.join(","));//加入校验
	}else{//取消必填
		span.html('');//清除红色小感叹号
		for(var i=0; i<needCheckArr.length; i++){//移除校验
			if(needCheckArr[i] == fieldid){
				needCheckArr.splice(i, 1);
				i--;
			}
		}
		needCheck.val(needCheckArr.join(","));
	}
	//以下代码都是为了，设置为必填后，红色小感叹号的交互
	var bindup = field.attr("bindup");//一个标记，表示是否绑定过交互事件
	if(!bindup && sign){//当设置为了必填且还未绑定交互时（这个判断就是为了防止重复绑定事件）
		if(isBrower){//浏览字段，特殊一点。还有什么字段特殊，在这个if条件里加
			field.bindPropertyChange(function(dom){
				if(!$(dom).attr("mustFill")){
					return;//字段此时是非必填，不用管
				}
				if(dom.value){//否则有值去除感叹号，没值显示感叹号
					span.html('');
				}else{
					span.html('<img src="/images/BacoError_wev8.gif" align="absmiddle">');
				}
			});
		}else{//其他字段默认通过blur事件控制
			field.blur(function(){
				if(!$(this).attr("mustFill")){
					return;//字段此时是非必填，不用管
				}
				if($(this).val()){//否则有值去除感叹号，没值显示感叹号
					span.html('');
				}else{
					span.html('<img src="/images/BacoError_wev8.gif" align="absmiddle">');
				}
			});
		}
		field.attr("bindup", true);//加上标记，防止重复绑定该交互事件
	}	
}
	
	
/**
 * 通过js控制明细表列的显示与隐藏。同时还能联动控制这一列的字段必填属性
 * @param dtableIndex (int)明细表的序号。因为表单中可能有多个明细表
 * @param colIndex (int)要控制的列的序号。
 * @param isHide (boolean)true为隐藏，false为显示
 * @param isRelateMustFill (boolean)true为同时控制字段必填属性，false就是不关联必填属性
 */
function controlDetailColumn = function(dtableIndex, colIndex, isHide, isRelateMustFill){
	var dtable = document.getElementById("oTable"+dtableIndex);
	var row, cell, fieldid, rowtype;
	for(var r=0; r<dtable.rows.length; r++){
		row = dtable.rows[r];
		rowtype = row.getAttribute("_target");//行类型
		cell = row.cells[colIndex];
		cell.style.display = isHide? "none": "table-cell";
		if(isRelateMustFill && rowtype == "datarow"){//对于数据行，如果要同时控制字段必填属性
			fieldid = "field"+ cell.getAttribute("_fieldid");//字段标签ID
			changeMustFillStyle(fieldid, !isHide);//直接调用封装好的方法
		}
	}
	//上面的代码完成了对已有行的控制。但是当新增一行时，没效果。下面的代码来解决这个问题
	var indexnum = $("#indexnum"+dtableIndex);
	var cdstr = indexnum.attr("controlDetail"), cdarr, newcdarr = [], purefieldid = fieldid.split("_")[0];
	if(cdstr && cdstr != 'undefined'){
		cdarr = cdstr.split(",");
	}else{
		cdarr = [];
	}
	for(var d=0;d<cdarr.length;d++){//其他列
		if(cdarr[d].split("-")[0] != purefieldid){
			newcdarr.push(cdarr[d]);
		}
	}
	newcdarr.push(purefieldid+"-"+isHide+"-"+isRelateMustFill);//按格式生成一个依据
	indexnum.attr("controlDetail", newcdarr.join(","));
	if(!indexnum.attr("bindup")){//防重复绑定
		indexnum.bindPropertyChange(function(dom){
			var cd = dom.getAttribute("controlDetail");//标记
			var cdArr = cd.split(","), item, cfid, td;
			for(var i=0; i<cdArr.length; i++){
				if(cdArr[i] != 'undefined'){
					item = cdArr[i].split("-");//标记项
					cfid = item[0] +"_"+ (dom.value-1);//标记字段的标签id
					td = $("#"+ cfid).parent('td');//向上找到所在单元格
					td.css('display', item[1] == "true"? "none": "table-cell");//控制显示与隐藏
					if(item[2] == "true"){//控制必填
						changeMustFillStyle(cfid, item[1] != "true");
					}
				}
			}
		});
		indexnum.attr("bindup", true);
	}
}


//使用示例一
//比如明细表格里，在每一行有个产品编号(浏览按钮)，为QC开头时，这一行的用途（文本）必填  
$("#indexnum0").bindPropertyChange(function(dom){
	//想给明细表里的字段绑定触发事件，需要借助indexnum监听行增加事件
	var cpbh = $("#field1234_"+ dom.value);
	cpbh.bindPropertyChange(function(cpinput){
		var ytid = "field4321_" + cpinput.id.split("_")[1];//这样来取到用途字段的id
		if(cpinput.value.slice(0,2) == "QC"){
			changeMustFillStyle(ytid, true);
		}else{
			changeMustFillStyle(ytid, false);
		}
	});
});
	
//使用示例二
//比如主表单里有个 赠送类型（下拉框）控制明细表里的第6列 是否显示，同时若显示则必填，隐藏则取消必填
$("#field5678").change(function(){
	if($(this).val() == "1"){
		controlDetailColumn(0, 5, true, true);
	}else{
		controlDetailColumn(0, 5, false, true);
	}
});