js实现在表元列中自动添加复选框

1. 需求描述

客户需要在浮动表格后,指定列上都根据浮动自动添加上复选框,可对复选框进行进行勾选,选择后,通过点击一个按钮,用热区的方式,将复选内容在热区中进行过滤(if未选择,弹出提示 else if 超过三个  提示超过   else 热区钻取)

浮动表格像热区传递内容有:浮动文本caption数组(用于显示标题),浮动Id数组(用于过滤)

效果图:

编辑界面



结果页面


2. 使用脚本

客户端脚本

setCheckBox("GRID1","C",2,"B");

setCheckBox("GRID6","C",2,"B");

setCheckBox("GRID7","C",2,"B");

/**

gridId:需要添加复选框的表格ID

checkBoxCol:需要添加复选框的列:例如:"C"

spanNum:是行是否合并单元格,如果没有首行,输入0;如果首行合并在结果页面显示合并两个单元格,此次输入2

hideCol:隐藏列:例如需要隐藏ID列,则此处输入列名"B",如果不需要隐藏列,则此处直接写""

**/

function setCheckBox(gridId,checkBoxCol,spanNum,hideCol){

var grid = g_rptpage.getGridById(gridId);

if(spanNum>0){

for(var i = 1; i<grid.rows; i++){

var cell = $("#" + gridId + "."+checkBoxCol + (1 + i));

var input = $("<input>").attr({"name":"_select","type":"checkbox"});

cell.append(input);

}

$("#" + gridId + ".A"+1).attr({"colspan":spanNum});

if(hideCol!=""){

for(var i = 1; i<grid.rows; i++){

$("#" +gridId+"."+hideCol+(i+1)).css({display:"none",width:"0px"});

}

}

}else{

for(var i = 1; i<=grid.rows; i++){

var cell = $("#" + gridId + "."+checkBoxCol + i);

var input = $("<input>").attr({"name":"_select","type":"checkbox"});

cell.append(input);

}

if(hideCol!=""){

for(var i = 1; i<=grid.rows; i++){

$("#" +gridId+"."+hideCol+i).css({display:"none",width:"0px"});

}

}

}

}

/**

实现效果:输入容器ID,获取容器内所有复选框左侧第一列的文本内容,返回数组(如果要获取右侧第一列,将prev()改成next())

divId:输入容器Id

**/

function getCellValue(divId){

var arr = [];

$.each($("#" +divId + " input[name="_select"]"),function(i, n){

if(n.checked){

arr.push($(n).parent().prev().text());

}

});

return arr;

}

/**

实现效果:输入容器ID,获取容器内所有复选框左侧的左侧列的文本内容,返回数组(如果要获取右侧的右侧列,将prev().prev()改成next().next())

divId:输入容器Id

**/

function getName(divId){

var arr = [];

$.each($("#" +divId + " input[name="_select"]"),function(i, n){

if(n.checked){

arr.push($(n).parent().prev().prev().text());

}

});

return arr;

}

按钮“选择后点击这里”脚本:

var checkNum=getCellValue("HHH5").length;

if(checkNum>3){

showError("复选内容超过3项,请重新选择,最多选择三项!!!")

}else if(checkNum<=3&&checkNum>0){

_zcalcn([["Widget1","HHH6","@carList="+getCellValue("HHH5")+";@carName="+getName("HHH5")+""]]);

} else if(checkNum==0){

showError("未进行选择,请勾选,最多选择三项!!!")

}

具体附件:

自动复选框.zip

附件列表

0

文档内容仅供参考
如果您需要解决具体问题,还可以登陆亿信社区
在提问求助板块提问,30分钟内帮您解决问题

如果您认为本词条还有待完善,请编辑

上一篇js实现表元下角标单位字体设置

下一篇如何让门户侧边栏收起

请先登录

创建词条

词条信息

admin
admin

超级管理员|词条创建者

1415

浏览次数:1031 次

编辑次数:1次 历史版本

更新时间:2018-11-22