js数据给动态表格赋值
实现的这么一个效果,因为属于二次开发所以不涉及动态表格增删的具体方法,记录一下如何将值赋进去。
思路:
1、选择数据后,根据需求增加动态表格行数;
2、获取第一行数据如果没有直接赋值;
3、如果有,二次追加。
注:
坑1:获取不到动态表格字段,给数据选择框和动态表格建立父子关系window.parent.xuanze();
坑2:赋值时获取不到动态表格字段,赋值完成后动态表格才增加完,给赋值方法延时。
坑3:前端将id遍历逐一传到后台查询,最好将id传到后台遍历处理,否则返回数据不好处理。
坑4:二次追加数据时,需要获取增加的行数的字段然后追加,拿到动态表格的行数和选择数据的条数进行遍历。
坑5:二次追加时,动态表格需要遍历,返回的数组需要遍历,要将每一行对应一条数据添加,目前只想到内循环在赋值完成后重新给初始值赋值,然后跳出循环。若有更好的方式望指教。
坑6:还差一步去重。
//ids选中的数据的id;data是选中的数据(实际上只需传data即可)
function xuanze(ids,biaoshi,data){
//获取选中数据的长度
var k = data.length
//获取动态表格的行数
var len = $(".subtable").find("tr").length - 2;
//获取第一行的数据
var leixing = $("input[name='HZ8080817684e7e40176b65b60b80c7c_LX_0']").val();
if(leixing){ //如果有数据则选中几个数据就新增加几行
addRows(k); //增加动态表格行的方法
}else{//如果没有数据就子女增加选中数据长度-1行(因为动态表格初始化会有一行空行)
addRows(k-1);
}
//因为动态表格增加的行会有延迟,所以将赋值的方法延迟等动态表格增加完成,否则获取不到字段(产品问题)
setTimeout(function(){
var list = [];
//将ids转换成JSON字符串传到后台
var id2 = JSON.stringify(ids);
jQuery.ajax({
async: false,
cache: false,
type: "POST",
url: horizon.paths.apppath+"/gwsz/fwgl/getXiangguan.wf",
data: {"ids":id2,"biaoshi":biaoshi},
dataType : "text",
success: function(res) { //后台返回的数据是JSON格式
//将JSON字符串转换为JSON对象
var list = JSON.parse(res);
//如果leixing不存在说明是第一次增加往动态表格上添加数据
if(! leixing){
for(var i=0; i<list.length; i++){
//下边是字符串拼接赋值
if(biaoshi == "shouwen"){
$("input[name='HZ8080817684e7e40176b65b60b80c7c_LX_"+i+"']").val("相关收文");
}
if(biaoshi == "qianbao"){
$("input[name='HZ8080817684e7e40176b65b60b80c7c_LX_"+i+"']").val("相关签报");
}
if(list[i].shouwenriqi){
$("input[name='HZ8080817684e7e40176b65b60b80c7c_WH_"+i+"']").val(list[i].shouwendanwei+"["+list[i].shouwenriqi+"]"+list[i].shouwenbianhao);
}
if(! list[i].shouwenriqi){
$("input[name='HZ8080817684e7e40176b65b60b80c7c_WH_"+i+"']").val(list[i].shouwendanwei+"[]"+list[i].shouwenbianhao);
}
$("input[name='HZ8080817684e7e40176b65b60b80c7c_XH_"+i+"']").val(i+1);
$("input[name='HZ8080817684e7e40176b65b60b80c7c_BT_"+i+"']").val(list[i].title);
$("input[name='HZ8080817684e7e40176b65b60b80c7c_XGID_"+i+"']").val(list[i].id);
$("input[name='HZ8080817684e7e40176b65b60b80c7c_BT_"+i+"']").attr("readonly","true");
$("input[name='HZ8080817684e7e40176b65b60b80c7c_WH_"+i+"']").attr("readonly","true");
$("input[name='HZ8080817684e7e40176b65b60b80c7c_XH_"+i+"']").attr("readonly","true");
}
}
//如果类型存在说明不是第一次在动态表格中添加数据,属于追加数据
if(leixing){
//k选择的数据的条数,len动态表格长度
for(var i=0; i<list.length; i++){ //遍历list
for(var j=len; j<len+k; j++ ){ //len是行数,k是选中数据的条数
if(biaoshi == "shouwen"){
$("input[name='HZ8080817684e7e40176b65b60b80c7c_LX_"+j+"']").val("相关收文");
}
if(biaoshi == "qianbao"){
$("input[name='HZ8080817684e7e40176b65b60b80c7c_LX_"+j+"']").val("相关签报");
}
if(list[i].shouwenriqi){
$("input[name='HZ8080817684e7e40176b65b60b80c7c_WH_"+j+"']").val(list[i].shouwendanwei+"["+list[i].shouwenriqi+"]"+list[i].shouwenbianhao);
}
if(! list[i].shouwenriqi){
$("input[name='HZ8080817684e7e40176b65b60b80c7c_WH_"+j+"']").val(list[i].shouwendanwei+"[]"+list[i].shouwenbianhao);
}
$("input[name='HZ8080817684e7e40176b65b60b80c7c_XH_"+j+"']").val(j+1);
$("input[name='HZ8080817684e7e40176b65b60b80c7c_BT_"+j+"']").val(list[i].title);
$("input[name='HZ8080817684e7e40176b65b60b80c7c_XGID_"+j+"']").val(list[i].id);
$("input[name='HZ8080817684e7e40176b65b60b80c7c_BT_"+j+"']").attr("readonly","true");
$("input[name='HZ8080817684e7e40176b65b60b80c7c_WH_"+j+"']").attr("readonly","true");
$("input[name='HZ8080817684e7e40176b65b60b80c7c_XH_"+j+"']").attr("readonly","true");
len=j+1; //循环完成后重新给len赋值
break;//跳出循环,如果不跳出循环的话,内循环走完在到外循环会出现list中后边赋值的数据将前边赋值数据覆盖掉问题
}
}
}
}
}
});
},300);
}