文献种类:专题技术总结文献;
开发工具与关键技术:DW与 JavaScript
作者: ;年级: ;撰写时间: 年 月 日
JavaScript流程控制语句
开发工具与关键技术:Adobe Dreamweaver JavaScript
作者:学生的姓名
撰写时间:2020年4月20日
宝剑锋从磨砺出,梅花香自苦寒来!
这是写您的知识点总结
案(1)//声明全局变量:学生表、提示层、表格
var tabStudent, layer, layuiTable;
1,加载事件。2layui.use()模块加载,3渲染表格
(2)条件查询
获取条件值,验证值, 表格重载 --(条件赋值)
例子:var classID = $("#classID").val();
if (classID == “” || classID == undefined) {
classID = 0;
}
//表格重载
tabStudent.reload({
where: {
studentNumber: studentNumber,
studentName: studentName,
classID: classID,
studentIDCard: studentIDCard,
},
page: {
curr: 1//重新从第一页开始
}
});
(3)重置条件
//重置表单
$(’#formSlecet input[type=“reset”]’).click();
表格重载(条件清空)
(4)图片
//(1)学生图片
//showPicture:自定义列的名称
function showPicture(rowData) {
var picture = rowData.studentPicture;//图片
if (picture != undefined && picture != null && picture != '') {
return '<button type="button" class="layui-btn layui-btn-xs" onclick="openUserPicture(\'' + picture + '\')">查 看</button>';
}
else {
return "未上传";
}
}
//3、==============查看学生图片==============
//openUserPicture:自定义列点击事件的名称
function openUserPicture(picture) {
//图片路径
Var pictureUrl = ‘@Url.Content("~/Document/studentPicture/")’ + picture;
//图片元素
var img = ‘’;
//使用layer显示图片
layer.open({
type: 1,// 页面层
title: false,//关闭标题
closeBtn: 0,//不显示关闭按钮
shadeClose: true,//点击遮罩层关闭弹窗
content: img //弹窗显示内容
});
}
//4、==============用户头像图片选择并显示==============
//(1)新增选择:打开图片文件选择 思路:1打开图片文件选择,2正则验证图片并绑定图片 3、文件读取器4、获取选择图片5. 判断选择的文件扩展名是否符合正则表达式6.使用FileReader读取图片并转为URL 7.文件读取 onload事件,将读取到图片显示的到Img元素
@* ###图片*@
function showImageSelectDialog() {
//使用jqury触发文件选择框的点击事件
$("#studentPictureFile").click();
}
//(2)新增模态框:正则验证图片并绑定图片
regexImageFilter = /^(?:image\/bmp|image\/gif|image\/jpg|image\/jpeg|image\/png)$/i;
//文件读取器
var imgReader = new FileReader();
//文件选择控件改变事件 -- 将选择的图片显示到 img元素
function loadImgToImg() {
//选取选择图片
var imgfFile = $("#studentPictureFile").get(0).files[0];
//判断选择的文件扩展名是否符合正则表达式
if (regexImageFilter.test(imgfFile.type)) {
//使用FileReader读取图片并转为URL
imgReader.readAsDataURL(imgfFile);
} else {
alert("选择的不是一个有效的图片文件");
}
}
//文件读取 onload事件,将读取到图片显示的到Img元素
imgReader.onload = function (evt) {
$("#studentPicture").attr("src", evt.target.result);
}
//(3)修改选择:打开图片文件选择
function showUImageSelectDialog() {
//使用jqury触发文件选择框的点击事件
$("#studentUPictureFile").click();
}
//(4)新增模态框:正则验证图片并绑定图片
//文件读取器
var imgUReader = new FileReader();
//文件选择控件改变事件 -- 将选择的图片显示到 img元素
<