JavaScript MVC应用：表格操作与数据管理-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_49884688/article/details/108064118

这篇博客总结了JavaScript MVC模式下处理表格数据的技巧，包括全局变量声明、条件查询、重置条件、图片展示和管理、以及数据的新增、修改、删除操作。涉及的技能有layuiTable的使用、条件赋值、Ajax数据交互、表单重置、layer弹窗显示图片等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文献种类：专题技术总结文献；
开发工具与关键技术：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 + '\')">查&nbsp;&nbsp;看</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元素

    function loadUImgToImg() {
        //选取选择图片
        var imgfFile = $("#studentUPictureFile").get(0).files[0];
        //判断选择的文件扩展名是否符合正则表达式
        if (regexImageFilter.test(imgfFile.type)) {
            //使用FileReader读取图片并转为URL
            imgUReader.readAsDataURL(imgfFile);
        } else {
            alert("选择的不是一个有效的图片文件");
        }
    }
    //文件读取 onload事件，将读取到图片显示的到Img元素
    imgUReader.onload = function (evt) {
        $("#studentUPicture").attr("src", evt.target.result);
    }

弹出新增模态框（导入模态框）：1、reset（重置表单）2、modal（显示模态窗体）
保存新增
1、申明变量接收获取的参数的val()
var studentPictureFile = $("#studentPictureFile").get(0).files[0];//
2、条件判断，表单数据不能为空

3、Ajax发送FormData数据

获取用户头像——如果有图片就要用（Ajax发送FormData数据
//构建FormData数据
var form = new FormData();
form.append(“studentNumber”, studentNumber);
form.append(“studentName”, studentName);
form.append(“studentSex”, studentSex);
form.append(“classID”, classID);
form.append(“telephone”, telephone);
form.append(“studentIDCard”, studentIDCard);
form.append(“stuPicture”, studentPictureFile);） //请求
$.ajax({
method: “post”,
url: ‘@Url.Content("~/Main/InsertStudent")’,
data: form,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
success: function (msg) {
//关闭加载层
layer.close(layerIndex);
if (msg.State) {
//成功
layer.alert(msg.Text, { icon: 6 });
//关闭模态窗体
$("#modInsertStudent").modal(“hide”);
//刷新table
tabStudentSearch();
} else {
//失败
layer.alert(msg.Text, { icon: 5 });
}
}
});传递数据
（第二种（没有图片或文件）） $.post("@Url.Content("~/SystemMaintenance/TCCMaintain/InsertAirport")",
{
airportCode: strAirportCode,
airportName: strAirportName,
cityName: strCityName,
pinyinName: strPinyinName

                },//提交到控制器中的数据

                function (msg) {
                    if (msg.State == true) {
                        $("#modalAirport").modal('hide');//关闭模态窗体
                        layer.alert(msg.Text);
                        TabAirport = layTable.reload('tbAirport');//表格刷新
                        
                    } else {
                        layer.alert(msg.Text);
                    }



                });

弹出修改模态框：1、reset（重置表单）2、 $.post("", { Id: ID }, function (data) {获取数据的input的值，用data.的方法回填}
（页面数据回填）
3、modal（显示模态窗体）
保存修改
1、申明变量接收获取的参数的val()【和新增一样，但是：要比新增多获取一个ID（id是Form里面的一个input，隐藏的元素）】

2.条件判断，表单数据不能为空

3、Ajax发送FormData数据
比新增多获取一个ID（id是Form里面的一个input，隐藏的元素）】
删除
一个提示，一个请求（和修改一样通过ID根据主键ID查询要删除的信息）
//(3) 点击table表格中的删除按钮删除该行数据
function saveDelete(studentID)
{
layer.confirm(" 您确定要删除该学生信息?", { icon: 3, titile: “提示” }, function (index) {
$.post("/Main/DeleteStudent",
{ studentID: studentID }, function (returnJson) {
if (returnJson.State == true) {
layer.close(index);
//刷新table
tabStudentSearch();
}
layer.alert(returnJson.Text, { icon: 6 });
});
});
}
两种写法
$.post("@Url.Content("~/Main/DeleteStudent")", { studentID: studentID },function()
$.post("@Url.Content("~/Main/DeleteStudent?StudentID=")" + studentID,function()

导入（有模板）
1、弹出导入模态框modal(‘show’);，2、点击下载模板文件（通过 window.open()方法向控制器发送请求）
2、
控制器：1、string filePath =获取服务器上的指定虚拟路径相对应的物理文件路径。 Server.MapPath();——模板文件
3、判断模板文件是否存在：System.IO.File.Exists（）;如果为true就执行第四步
4、获取模板文件的名称，定义一个string 变量接收： Path.GetFileName（）
5、 return File(new FileStream(filePath, FileMode.Open), “application/octet-stream”, strfileName);
如果为 false就返回：使用字符串创建一个内容结果对象：return Content(“”);

上传文件：两种请求方式：第一种
1、 XMLHttpRequest对象用于在后台与服务器交换数据，
//定义表单数据对象 FormData
var fdObj = new FormData();
//获取表单中的数据
var xlsFile = $(’#fileExcel’).get(0).files[0];

        //向对象中添加要发送的数据
        fdObj.append("xlsFile", xlsFile);

        //创建XMLHttpRequest对象
        var xhr = new XMLHttpRequest();
        var layerIndex = layer.load();//打开加载层

        //指定提交类型和选择要发送的地址  上传文件只能使用POST请求，不能用get请求
        xhr.open("post", "@Url.Content("~/OthersMaintenance/UserDataMaintain/ImportExcel")");
        //接收返回值
        xhr.onload = function (data) {
            layer.close(layerIndex);//关闭加载层

            //data.currentTarget.responseText 具体的返回内容
            //console.log(data.currentTarget.responseText);
            var strMsg = data.currentTarget.responseText;
            //将字符串转json对象
            var msg = JSON.parse(strMsg);
            if (msg.State) {
                layer.alert(msg.Text, { icon: 1 });
                //关闭模态框
                $("#modImportUser").modal('hide');
                //刷新表格
                TabUserList.reload({
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            } else {
                layer.alert(msg.Text, { icon: 2 });
            }
        }
        //发送数据
        xhr.send(fdObj);

第一种方式

var userPicture = $("#userPictureFile").get(0).files[0];//获取用户头像
var layerIndex = layer.load();//打开加载层
//=使用JQuery Ajax发送FormData数据
//构建FormData数据
var form = new FormData();

    form.append("userPicture", userPicture);
    //=使用JQuery发送FormData数据
                  //数据提交到控制器中
        //请求
        $.ajax({
            method: "post",//请求的类型
            url: '@Url.Content("~/OthersMaintenance/UserDataMaintain/UpdateUser2")',
            data: form,
            processData: false,  // 告诉jQuery不要去处理发送的数据
            contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
            success: function (msg) {
                //关闭加载层
                layer.close(layerIndex);
                if (msg.State) {
                    //成功
                    layer.alert(msg.Text, { icon: 6 });
                    //关闭模态窗体
                    $("#modUpdateUser").modal("hide");
                    //刷新table，（重新载入）
                    TabUserList = layuiTable.reload("tabUserList");
                } else {
                    //失败
                    layer.alert(msg.Text, { icon: 5 });
                }

控制器：

//思路：
//1、获取上传的文件；2、把文件转换为二进制数组；3、二进制数组转成内存流；4、利用NPOI把内存流中的数据读取成Excel
//5、使用NPOI读取数据
// Path:检查文件 GetExtension()获取文件的后缀
string strExtension = Path.GetExtension(xlsFile.FileName);

导出(有模板)
第一步：获取条件值；第二步： //拼接参数字符串
var strTemp = ‘&studentNumber=’ + studentNumber + ‘&studentName=’ + studentName + ‘&classID=’ + classID + ‘&studentIDCard=’ + studentIDCard;
提示
layer.confirm(‘是否要为你导出当前学生数据?’, { icon: 3, titile: “提示” }, function (index) {
layer.close(index);//关闭提示框
//新标签页打开下载excel的url，下载excel文件
//向控制器请求数据
window.open(’@Url.Content("~/Main/ExportStudentData?")’ + strTemp.substring(1, strTemp.length));
});

控制器：条件参数
第一步：数据查询，条件验证，把数据转换为列表ToList()；
第二步：根据模板文件的Excel导出{
（1）： //==1-检查模板文件是否存在
// Server.MapPath 将相对的路径转为实际的物理路径

//判断模板是否存在
（2）： //==2-使用NPOI打开模板Excel
//=2.1-使用文件打开模板文件
//=2.2-使用NPOI打开模板Excel 得到一个工作簿
//==3-打开模板所在第一个工作表
//构建单元格样式
//==4-设置标题，如果筛选时间段不为空就拼接上筛选时间段
//提取模板标题
//==5-往模板中填充数据
//=5.1-设置数据单元格的样式
//水平垂直居中对齐
style.Alignment = NPOI.SS.UserModel.HorizontalAlignment.Center;
style.VerticalAlignment = NPOI.SS.UserModel.VerticalAlignment.Center;
//设置边框为实线
style.BorderLeft = NPOI.SS.UserModel.BorderStyle.Thin;
style.BorderTop = NPOI.SS.UserModel.BorderStyle.Thin;
style.BorderRight = NPOI.SS.UserModel.BorderStyle.Thin;
style.BorderBottom = NPOI.SS.UserModel.BorderStyle.Thin
//==5.2-开始填充数据
int index = 2;//目前这个模板数据开始填充数据的行索引为2
//遍历查询出的数据填充Excel单元格（for循环）
NPOI.SS.UserModel.IRow row = sheet.CreateRow(index); ;//给sheet添加一行
row.Height = 22 * 20;//设置行高
//设置单元格数据
例子： row.CreateCell(1).SetCellValue(list[i].studentNumber.ToString());
//设置单元格样式
for (int j = 0; j < row.Cells.Count; j++)
{
row.GetCell(j).CellStyle = style;
}
index++;
//设置列宽为自动适应
for (int i = 0; i < sheet.GetRow(0).Cells.Count; i++)
{
sheet.AutoSizeColumn(i);
sheet.SetColumnWidth(i, sheet.GetColumnWidth(i) * 17 / 10);

        }
  //以流的方式返回
        string fileName = "学生信息" + DateTime.Now.ToString("yyyy-MM-dd-HH-mm-ss-ffff") + ".xls";
        //把Excel转化为流，输出
        MemoryStream BookStream = new MemoryStream();//定义内存流
        excelBookTemplate.Write(BookStream);//将工作薄写入内存流
        BookStream.Seek(0, SeekOrigin.Begin);//输出之前调用Seek（偏移量，游标位置）方法：获取文件流的长度
        //参数:File(fileStream要发送到响应的流,contentType内容类型（MIME 类型）,fileDownloadName浏览器中显示的文件下载对话框内要使用的文件名。)            
        return File(BookStream, "application/vnd.ms-excel", fileName);;}
          导出(无模板)

自己构建表头数据
导出Excel：
//创建Excel对象工作簿
HSSFWorkbook book = new NPOI.HSSF.UserModel.HSSFWorkbook();
//创建Excel对象工作簿中的工作表
ISheet sheet = book.CreateSheet();
#region (1)给导出的Excel设置表头
///标题样式
ICellStyle cellStyle = book.CreateCellStyle();//声明样式
cellStyle.Alignment = HorizontalAlignment.Center;//水平居中
cellStyle.VerticalAlignment = VerticalAlignment.Center;//垂直居中
IFont font = book.CreateFont();//声明字体
font.Boldweight = (Int16)FontBoldWeight.Bold;//加粗
font.FontHeightInPoints = 10;//字体大小
cellStyle.SetFont(font);//加入单元格
//单元格样式
ICellStyle cellstyle = book.CreateCellStyle();//声明样式
cellstyle.Alignment = HorizontalAlignment.Center;//水平居中
cellstyle.VerticalAlignment = VerticalAlignment.Center;//垂直居中

        //创建第一行
        NPOI.SS.UserModel.IRow row1 = sheet.CreateRow(0);//给sheet添加第一行的头部标题
        row1.Height = 22 * 20;
        row1.CreateCell(0).SetCellValue("序号");
        row1.CreateCell(1).SetCellValue("旅客姓名");
        row1.CreateCell(2).SetCellValue("旅客类型");
        row1.CreateCell(3).SetCellValue("证件类型");
        row1.CreateCell(4).SetCellValue("证件号码");
        row1.CreateCell(5).SetCellValue("联系人姓名");
        row1.CreateCell(6).SetCellValue("联系人电话");

        //给每个单元格添加样式
        for (int i = 0; i < row1.Cells.Count; i++)
        {
            row1.GetCell(i).CellStyle = cellstyle;

        }

        #endregion

给导出的Excel设置数据（for循环）同上
导出(无模板之合并表头式)
自己构建表头数据
#region 导出Excel 表头
//==1. 声明一个Workbook对象
HSSFWorkbook workbook = new HSSFWorkbook();
//==2. 创建工作表 Sheet 并设置名称
ISheet sheet = workbook.CreateSheet();//创建工作表
workbook.SetSheetName(0, “旅客信息”);//设置工作表名称
//==3.设置标题合并单元格，设置样式
//==3.1、创建第一行索引0，设置行高
IRow row0 = sheet.CreateRow(0);//创建行
//=3.2、创建一个单元格索引为0
ICell cell0 = row0.CreateCell(0);//创建单元格
//string strDate = DateTime.Now.ToString(“yyyy-MM-dd HH:mm:ss”);
string strTitle = “旅客信息” ;
if (!string.IsNullOrEmpty(startEndDate))
{
strTitle = strTitle + " " + startEndDate;
}
cell0.SetCellValue(strTitle);//赋值
//=3.2.1、创建一个单元格样式
ICellStyle cellStyle_Title = workbook.CreateCellStyle();//声明并【CreateCellStyle】创建列的样式
cellStyle_Title.Alignment = HorizontalAlignment.Center;//水平居中
cellStyle_Title.VerticalAlignment = VerticalAlignment.Center;//垂直居中

        IFont font_title = workbook.CreateFont();//声明字体
        font_title.Color = NPOI.HSSF.Util.HSSFColor.Blue.Index;//设置字体颜色
        font_title.Boldweight = (Int16)FontBoldWeight.Bold;//加粗
        font_title.FontHeightInPoints = 18;//字体大小

        cellStyle_Title.SetFont(font_title);//设置单元格字体

        //=3.2、合并单元格（第几行开始，到第几行结束，第几列开始，到第几列结束【索引开始的】）
        sheet.AddMergedRegion(new NPOI.SS.Util.CellRangeAddress(0, 0, 0, 6));
        //=3.2.2、设置单元格样式
        cell0.CellStyle = cellStyle_Title;
        //==4、 设置表头
        //==4.1 创建一行  索引 1
        IRow row1 = sheet.CreateRow(1);//给sheet添加第二行的头部标题
        row1.Height = 22 * 20;//设置行高
        //=4.2- 创建单元格  并设置值
        row1.CreateCell(0).SetCellValue("序号");//给第二行创建第一列并存放第一列值
        row1.CreateCell(1).SetCellValue("旅客姓名");//第二列
        row1.CreateCell(2).SetCellValue("旅客类型");
        row1.CreateCell(3).SetCellValue("证件类型");
        row1.CreateCell(4).SetCellValue("证件号码");
        row1.CreateCell(5).SetCellValue("联系人姓名");
        row1.CreateCell(6).SetCellValue("联系人电话");
       
        //=4.3-创建表头的样式
        ICellStyle cellStyle_header = workbook.CreateCellStyle();//声明样式
        cellStyle_header.Alignment = HorizontalAlignment.Center;//水平居中
        cellStyle_header.VerticalAlignment = VerticalAlignment.Center;//垂直居中
       
        //设置背景颜色 Fill 填充颜色
        cellStyle_header.FillPattern = FillPattern.SolidForeground;//实心的颜色，一个
        cellStyle_header.FillForegroundColor = NPOI.HSSF.Util.HSSFColor.Aqua.Index;//Aqua 浅绿色
       
        //设置边框为实线
        cellStyle_header.BorderLeft = BorderStyle.Thin;
        cellStyle_header.BorderTop =  BorderStyle.Thin;
        cellStyle_header.BorderRight = BorderStyle.Thin;
        cellStyle_header.BorderBottom = BorderStyle.Thin;

        IFont font_header = workbook.CreateFont();//声明字体
        font_header.Boldweight = (Int16)FontBoldWeight.Bold;//加粗
        font_header.FontHeightInPoints = 10;//字体大小

        cellStyle_header.SetFont(font_header);//加入单元格

        //=4.4 -给每个单元格添加样式
        for (int i = 0; i < row1.Cells.Count; i++)
        {
            row1.GetCell(i).CellStyle = cellStyle_header;
        }
        #endregion

#region 导出Excel数据（for循环）同上

        //==5-遍历查询到的数据，设置Excel表格数据
        //=5.1-创建数据内部部分 单元格样式
        ICellStyle cellstyle_value = workbook.CreateCellStyle();//声明样式
        cellstyle_value.Alignment = HorizontalAlignment.Center;//水平居中
        cellstyle_value.VerticalAlignment = VerticalAlignment.Center;//垂直居中
        //设置边框线为实线
        cellstyle_value.BorderLeft = BorderStyle.Thin;
        cellstyle_value.BorderTop = BorderStyle.Thin;
        cellstyle_value.BorderRight = BorderStyle.Thin;
        cellstyle_value.BorderBottom = BorderStyle.Thin;
        //=5.2-遍历数据，创建数据部分行列
        for (int i = 0; i < list.Count; i++)
        {
            //5.2.1-创建行
            NPOI.SS.UserModel.IRow row = sheet.CreateRow(i + 2);

感悟：登高及目之天地之大，置以苍茫之寸身之微！！！
学而思则学，因思而益精，思而学则思，因学而有据！！！