在Portal的标准编辑界面Edit Form添加
效果图：
将原本的tab的html清空后，用所需要的html的覆盖。写在web page的content page中；如果是自定义界面可以直接将append里的html放到界面中function大致相同。
代码（使用bootstrap样式）：
$("table[data-name=tab_4_section_2]").html("");
$("table[data-name=tab_4_section_2]").append(`<div class="col-md-12" style="width: 50%;">
<div id="nooneloadfile_"style="display:block; border: 1px solid #ccc; border-radius: 20px; width: 100%;height: 360px;">
<!-- <span>File limit of 10mb</span> -->
<input type="file" onchange="changeload()" id="inputfile" multiple="multiple"
style="display: none;">
<div id="uploadfile_" onclick="loadclick()" style="position: absolute;
left: 47%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 100px;
text-align: center;
color: #666666;">+</div>
</div>
<div id="haveoneloadfile_"
style="overflow: auto;display: none;padding: 2% 5%; border: 1px solid #ccc; border-radius: 20px; width: 100%;height: 360px;">
<label for="exampleInputEmail2" style="width:65%" class="col-md-9">Attachment</label>
<div class="col-md-1" style="
margin-right: 3%;width: 6.33333%;
">
<button type="button" style="display: none;" id="btn_Downltable"
class="btn btn-primary" onclick="Downlclick()">
<span class="glyphicon glyphicon-arrow-down"></span>
</button>
</div>
<div class="col-md-1" style="
margin-right: 3%;width: 6.33333%;
">
<button type="button" style="display: none;" id="btn_Deletetable"
class="btn btn-primary" onclick="Deleteclick()">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
<div class="col-md-1"><button type="button" id="btn_uploadtable"
class="btn btn-primary" onclick="loadclick()"><span class="glyphicon glyphicon-folder-close"></span></button>
</div>
<table class="col-md-12 table table-condensed">
<thead>
<td><input type="checkbox" id="checkAlltable_" name="checkAll" /></td>
<td>Number</td>
<td>File name</td>
<td style="
text-align: center;
">Operation</td>
</thead>
<tbody id="tableuplaodfile_">
</tbody>
</table>
</div>
</div>`);
$("#checkAlltable_").click(function (event) {
/*将所有行的选中状态设成全选框的选中状态*/
$('.checkitem_').prop('checked', $(this).prop('checked'));
/*并调整所有选中行的CSS样式*/
if ($(this).prop('checked')) {
$('.checkitem_').parent().parent().addClass('warning');
$("#btn_Deletetable").show();
$("#btn_Downltable").show();
} else {
$('.checkitem_').parent().parent().removeClass('warning');
$("#btn_Deletetable").hide();
$("#btn_Downltable").hide();
}
event.stopPropagation();
});
var js = `javascript: DelAzureBlob();PostAzureBlob();if(typeof entityFormClientValidate === 'function'){if(entityFormClientValidate()){if(typeof Page_ClientValidate === 'function'){if(Page_ClientValidate('')){clearIsDirty();disableButtons();this.value = 'Processing...';}}else{clearIsDirty();disableButtons();this.value = 'Processing...';}}else{return false;}}else{if(typeof Page_ClientValidate === 'function'){if(Page_ClientValidate('')){clearIsDirty();disableButtons();this.value = 'Processing...';}}else{clearIsDirty();disableButtons();this.value = 'Processing...';}};WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentContainer$EntityFormControl_8912e8763f3ded11bba2000d3a856423$UpdateButton", "", true, "", "", false, true))`;
//这里将原本的submit提交按钮的js替换掉，这里删除与提交事件增加文件提交function
$("input[value=Submit]").attr('onclick', js)
GetAzurecase();
})
function loadclick() {
$('#inputfile').trigger('click');
}
function Downlclick() {
var listurl = [];
$.each($('#tableuplaodfile_ tr').find('input:checked').parent().parent().find("a"), function (index, data) {
$('#tableuplaodfile_ tr').find('input:checked').parent().parent().find("a").eq(index).attr("href");
listurl.push({ name: $('#tableuplaodfile_ tr').find('input:checked').parent().parent().find("a").eq(index).attr("download"), url: $('#tableuplaodfile_ tr').find('input:checked').parent().parent().find("a").eq(index).attr("href") })
})
console.log("listurl");
console.log(listurl);
$.each(listurl, function (index, data) {
download(data.name, data.url)
})
}
function download(name, href) {
const iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.style.height = 0;
iframe.src = href;
document.body.appendChild(iframe);
setTimeout(() => {
iframe.remove();
}, 1000);
}
function changeload() {
console.log($("#inputfile").val());
let file = $("#inputfile")[0].files;
//先获取到文件
$.each(file, function (index, data) {
if (!!data) {
$("#nooneloadfile_").hide();
$("#haveoneloadfile_").show();
}
let reader = new FileReader();
reader.readAsDataURL(data); //将文件读取为 DataURL,也就是base64编码
reader.onload = function (ev) { //文件读取成功完成时触发
var dataURL = ev.target.result; //获得文件读取成功后的DataURL,也就是base64编码
filelist.push({ filecontent: dataURL.substring(dataURL.indexOf("base64,") + 7), filename: data.name, new_azureid: "", new_path: "", subject: "" });
// if (filelist.length >= 5) {
// $("#btn_uploadtable").hide();
// }
var disabled = "";
$("#tableuplaodfile_").html("");
$.each(filelist, function (index, data) {
if (!!!data.new_previewpath) {
disabled = "disabled";
}
$("#tableuplaodfile_").append(`
<tr>
<td><input class="checkitem_" onclick="checkitemOnclick()" type="checkbox" name="checkItem" value="`+ (index) + `"/></td>
<td>`+ (index + 1) + `</td>
<td>`+ data.filename + `</td>
<td style="text-align: center;">
<button class="btn btn-primary"type="button" style="color: #003e7e;background-color: transparent;border: 0px;" onclick="Deletetableloadfile(`+ index + `)">
<span class="glyphicon glyphicon-trash"></span>
</button>
<a href="`+ data.new_previewpath + `"class="btn btn-primary"type="button" ` + disabled + ` style="margin-left:10px;color: #003e7e;background-color: transparent;border: 0px;" download="` + data.filename + `">
<span class="glyphicon glyphicon-arrow-down" ></span>
</a>
</td>
</tr>`);
});
}
})
}
function CheckAlltable() {
console.log($('.checkitem_'));
/*将所有行的选中状态设成全选框的选中状态*/
$('.checkitem_').prop('checked', $(this).prop('checked'));
/*并调整所有选中行的CSS样式*/
if ($(this).prop('checked')) {
$('.checkitem_').parent().parent().addClass('warning');
$("#btn_Deletetable").show();
$("#btn_Downltable").show();
} else {
$('.checkitem_').parent().parent().removeClass('warning');
$("#btn_Deletetable").hide();
$("#btn_Downltable").hide();
}
};
function checkitemOnclick() {
//$(this).parent().parent().toggleClass('warning');
/*如果已经被选中行的行数等于表格的数据行数，将全选框设为选中状态，否则设为未选中状态*/
$("#checkAlltable_").prop('checked', $('#tableuplaodfile_ tr').find('input:checked').length == $('#tableuplaodfile_ tr').length ? true : false);
if ($('#tableuplaodfile_ tr').find('input:checked').length > 0) {
$("#btn_Deletetable").show();
$("#btn_Downltable").show();
} else {
$("#btn_Deletetable").hide();
$("#btn_Downltable").hide();
}
}
function Deleteclick() {
var stringtt = "";
$.each($('#tableuplaodfile_ tr').find('input:checked'), function (index, data) {
stringtt = stringtt + "," + $('#tableuplaodfile_ tr').find('input:checked').eq(index).val();
})
stringtt += ",";
var new_arr = [];
$("#inputfile").val('');
if (filelist.length <= 1) {
filelist = [];
} else {
for (let i = 0, len = filelist.length; i < len; i++) {
if (stringtt.indexOf("," + i + ",") == -1) {
new_arr.push(filelist[i]);
}
else{
dellist.push({ path: filelist[i].new_path, id: filelist[i].new_azureid });
}
}
}
filelist = new_arr;
console.log("filelist:");
$("#tableuplaodfile_").html("");
var disabled = "";
$.each(filelist, function (index, data) {
console.log(data);
if (!!!data.new_previewpath) {
disabled = "disabled";
}
$("#tableuplaodfile_").append(`
<tr>
<td><input class="checkitem_" onclick="checkitemOnclick()" type="checkbox" name="checkItem" value="`+ (index) + `"/></td>
<td>`+ (index + 1) + `</td>
<td>`+ data.filename + `</td>
<td style="text-align: center;">
<button class="btn btn-primary"type="button" style="color: #003e7e;background-color: transparent;border: 0px;" onclick="Deletetableloadfile(`+ index + `)">
<span class="glyphicon glyphicon-trash"></span>
</button>
<a href="`+ data.new_previewpath + `"class="btn btn-primary"type="button" ` + disabled + ` style="margin-left:10px;color: #003e7e;background-color: transparent;border: 0px;" download="` + data.filename + `">
<span class="glyphicon glyphicon-arrow-down" ></span>
</a>
</td>
</tr>`);
});
if (filelist.length <= 0) {
$("#nooneloadfile_").show();
$("#haveoneloadfile_").hide();
}
}
var dellist = [];
function Deletetableloadfile(deleteindex) {
$("#inputfile").val('');
if (filelist.length <= 1) {
dellist.push({ path: filelist[0].new_path, id: filelist[0].new_azureid });
filelist = [];
} else {
var del = filelist.splice(deleteindex, 1);
dellist.push({ path: del[0].new_path, id: del[0].new_azureid });
}
console.log("filelist:");
$("#tableuplaodfile_").html("");
var disabled = "";
$.each(filelist, function (index, data) {
if (!!!data.new_previewpath) {
disabled = "disabled";
}
console.log(data);
$("#tableuplaodfile_").append(`
<tr>
<td><input class="checkitem_" onclick="checkitemOnclick()" type="checkbox" name="checkItem" value="`+ (index) + `"/></td>
<td>`+ (index + 1) + `</td>
<td>`+ data.filename + `</td>
<td style="text-align: center;">
<button class="btn btn-primary"type="button" style="color: #003e7e;background-color: transparent;border: 0px;" onclick="Deletetableloadfile(`+ index + `)">
<span class="glyphicon glyphicon-trash"></span>
</button>
<a href="`+ data.new_previewpath + `"class="btn btn-primary"type="button" ` + disabled + ` style="margin-left:10px;color: #003e7e;background-color: transparent;border: 0px;" download="` + data.filename + `">
<span class="glyphicon glyphicon-arrow-down" ></span>
</a>
</td>
</tr>`);
});
if (filelist.length <= 0) {
$("#nooneloadfile_").show();
$("#haveoneloadfile_").hide();
}
}
标签：function,checked,parent,app,portal,附件,btn,data,find From： https://www.cnblogs.com/ctwpx/p/17025702.html