【KnockoutJS】KnockoutJS 绑定列表数据。实现表头合并，列生成，图片上传等功能

2023-11-22 15:32
文章标签 数据 实现 功能 表头 图片 生成 绑定 列表 上传 合并 knockoutjs

本文主要是介绍【KnockoutJS】KnockoutJS 绑定列表数据。实现表头合并，列生成，图片上传等功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果展示

img1

功能描述

  • 列表数据绑定

    使用 KnockoutJS 的 foreach 语法绑定后台返回的 JSON 数据，循环输出。

  • 表头合并

    前 5 列为主项，后n列未细项。所以前 5 列进行行合并。这里因为需求是固定的 5 列，所以代码也就直接指定了 5 。如果需求合并列不确定，也可以优化为动态合并。

  • 列生成

    每一个主项的后 n 列(工艺列表)的个数不确定，为了前台展示方便，后台调整将以 LIST 的形式返回工艺列表信息。

  • 图片上传与修改

    第 2、3 列分别上传示意图和实体图，无图片时显示"上传图片"的提示，鼠标点击该区域弹出文件选择框，选择文件后自动上传并保存，保存图片后"上传图片"提示消失，鼠标悬浮时会出现"修改图片"的提示。（上传功能非本文重点，所以代码中只列出图片数据传递到后台的部分，未列出保存到服务器与DB的部分）

数据格式（部分）

{
"Status": true,"data": [
{
"PARTPROCESSSCHEDULELIST": [
{
"PROCESSITEM": 0,
"PROCESSNAME": "M",
"ORDERBY": 0,
"PLANCOMPLETEDATESTR": "2019/03/16 20:20",
"ACTUALCOMPLETEDATESTR": "2019/03/17 02:10"
},
{
"PROCESSITEM": 0,
"PROCESSNAME": "CNC1",
"ORDERBY": 0,
"PLANCOMPLETEDATESTR": "2019/03/18 00:00",
"ACTUALCOMPLETEDATESTR": "2019/03/19 07:04"
},
],
"JGJDID": "00172D5A1C9648D78901FD4E10E5F50E",
"PROCESSITEM": 1,
"PARTCODE": "M01",
"PARTNUMBER": 1,
"SCHEMATICDIAGRAMIMG": "/2019/5/3AB3E5429A674F7DB6E07BAFA59DE31A.jpg",
"ENTITYIMG": null,
"CURRENTPROCESS": "G",
"ISVALID": null,
"CREATER": null,
"CREATEDATE": "/Date(-62135596800000)/",
"UPDATER": null,
"UPDATEDATE": "/Date(-62135596800000)/"
},{
"PARTPROCESSSCHEDULELIST": [
{
"PROCESSITEM": 0,
"PROCESSNAME": "M",
"ORDERBY": 0,
"PLANCOMPLETEDATESTR": "2019/03/11 07:00",
"ACTUALCOMPLETEDATESTR": "2019/03/09 08:00"
},
{
"PROCESSITEM": 0,
"PROCESSNAME": "CNC1",
"ORDERBY": 0,
"PLANCOMPLETEDATESTR": "2019/03/15 09:00",
"ACTUALCOMPLETEDATESTR": "2019/03/15 10:00"
},
],
"JGJDID": "00172D5A1C9648D78901FD4E10E5F50E",
"PROCESSITEM": 2,
"PARTCODE": "M02",
"PARTNUMBER": 1,
"SCHEMATICDIAGRAMIMG": "/2019/5/Pusher-cap.jpg",
"ENTITYIMG": "/2019/5/29554F09A23F4E9BBCA4A08E27A830FB.jpg",
"CURRENTPROCESS": "GNC2",
"ISVALID": null,
"CREATER": null,
"CREATEDATE": "/Date(-62135596800000)/",
"UPDATER": null,
"UPDATEDATE": "/Date(-62135596800000)/"
},
],
"maxcol": 9
}

其中：

  • Status：整体请求状态。
  • data：所有数据集合。为一个对象数组。
  • JGJDID：当前对象的 id。
  • PARTCODE：当前对象的编号。效果图中第一列
  • SCHEMATICDIAGRAMIMG：当前对象的示意图。效果图中第二列
  • ENTITYIMG：当前对象的实体图。效果图中第三列
  • PARTNUMBER：效果图中第四列
  • CURRENTPROCESS：效果图中第五列
  • PARTPROCESSSCHEDULELIST：当前对象所对应的工艺列表集合。（即效果图重工第七列级以后）
  • PROCESSNAME：制程名称。效果图中后 n 列的第一行。
  • PLANCOMPLETEDATESTR：预计时间。效果图中后 n 列的第二行。
  • ACTUALCOMPLETEDATESTR：实际时间。效果图中后 n 列的第三行。
  • maxcol：所有对象中PARTPROCESSSCHEDULELIST最长的列。

前台代码

  • CSS 部分（图片上传区域的部分）
/*图片上传部分的样式*/
/*涉及到文件上传框的隐藏，span提示的显示，图片的显示*/
/*其它如table的样式这里不做提供*/
.file {position: absolute;display: block;width: 100% !important;height: 100% !important;left: 0px;top: 0px;opacity: 0;filter: alpha(opacity=0);cursor: pointer;}.imgtd {position: relative;}.imgtd:hover {opacity: 1;}img {/*width: 120px;height: 120px;*/max-width: 100%;max-height: 100%;}span {position: absolute;left: 27px;top: 38px;cursor: pointer;}
  • html + knockout 代码
<body><div class="main"><div class="table_data" id="schedule"><table><thead><tr><th style="width: 70px;">件号</th><th style="width: 110px;">示意图</th><th style="width: 110px;">实体图</th><th style="width: 50px;">数量</th><th style="width: 90px;">当前制程</th><th style="width: 100px;">项目</th><th id="gylb">工艺列表</th></tr></thead><tbody data-bind="foreach:schedulelist"><tr><td rowspan="3" data-bind="html:PARTCODE"></td><td class="imgtd" rowspan="3" style="height: 85px;"><img data-bind="attr:{src:+ SCHEMATICDIAGRAMIMG }"/><span data-bind="visible:(SCHEMATICDIAGRAMIMG == null)">上传图片</span><input class="file" type="file" data-bind="attr:{id:'img0'+PROCESSITEM, name:'img0'+PROCESSITEM, title:(SCHEMATICDIAGRAMIMG == null)?'点击上传':'点击修改' }, event:{ change:$root.upload.bind($data, '0')} " /></td><td class="imgtd" rowspan="3" style="height: 85px;"><img data-bind="attr:{src:ENTITYIMG }"/><span data-bind="visible:(ENTITYIMG == null)">上传图片</span><input class="file" type="file" data-bind="attr:{id:'img1'+PROCESSITEM, name:'img1'+PROCESSITEM , title:(ENTITYIMG == null)?'点击上传':'点击修改' }, event:{change:$root.upload.bind($data, '1')} " /></td><td rowspan="3" data-bind="html:PARTNUMBER"></td><td rowspan="3" data-bind="html:CURRENTPROCESS"></td><td>制程</td><!-- ko foreach:PARTPROCESSSCHEDULELIST --><td data-bind="html:PROCESSNAME"></td><!-- /ko --></tr><tr><td>预计完成时间</td><!-- ko foreach:PARTPROCESSSCHEDULELIST --><td data-bind="html:PLANCOMPLETEDATESTR"></td><!-- /ko --></tr><tr><td>实际完成时间</td><!-- ko foreach:PARTPROCESSSCHEDULELIST --><td data-bind="html:ACTUALCOMPLETEDATESTR"></td><!-- /ko --></tr></tbody></table></div></div>
</body>
  • JS 部分代码(需要引入ajaxfileupload.js 插件上传)
<script>var viewModel = function () {var self = this;self.schedulelist = ko.observableArray([]);self.load = function () {/*后台请求的 url 和参数*/var url = "";var params = { };$.getJSON(url, params, function (data) {var colCount = data.maxcol;/*由于列的数量不固定，这里表头的宽度根据返回的最大列数进行调整*/$("#schedule").attr('style', 'width: ' + (colCount * 120 + 530) + 'px;');$("#gylb").attr('style', 'width: ' + (colCount * 120) + 'px;');$("#gylb").attr('colspan', colCount);/*多个对象的最大列不同时，动态绑定的表格会不显示边框，所以根据最大列数对其它对象补充空对象。该操作仅为了表格显示美观，不影响实际效果*/for (var i = 0; i < data.data.length; i++) {while (colCount - data.data[i].PARTPROCESSSCHEDULELIST.length > 0) {data.data[i].PARTPROCESSSCHEDULELIST.push({ PROCESSNAME: "", PLANCOMPLETEDATESTR: "", ACTUALCOMPLETEDATESTR: "" });}}/*绑定处理过后的数据到当前 ViewModel*/self.schedulelist(data.data);});};}var vm = new viewModel();ko.applyBindings(vm);/*加载数据*/vm.load();/* 上传图片。 imgtype 0：示意图； 1：实体图*/vm.upload = function (imgtype, dt, event) {/*PROCESSITEM 为每一个对象的id，不会重复，再加上 imgtype 区分列，可以保证 filename 的唯一性*/var filename = $("#img" + imgtype + dt.PROCESSITEM).val();//console.log(filename);/*上传文件的后缀限定*/var suffix = filename.substring(filename.lastIndexOf('.'));if (['.png', '.img', '.jpg'].indexOf(suffix) == -1) {alert('图片格式不正确');return false;}/*调用 ajaxfileupload 插件的 ajaxFileUpload 方法。记得先进入插件*/$.ajaxFileUpload({url: '/UploadImg',//上传图片的 url 地址，根据实际情况修改secureuri: false,type: "post",fileElementId: 'img' + imgtype + dt.PROCESSITEM,//这里的id与html代码中input type=file 的id对应。建议和 name 和 id 一样dataType: 'json',data: { processitem: dt.PROCESSITEM, jgjdid: '', imgtype: imgtype, formno: '' },success: function (data) {if (data && data.Status) {/*上传成功后重新加载数据*///$("#img" + imgtype + dt.PROCESSITEM).attr('src', data.path);//这种写法无法保证即时动态更新，有时候需要延迟加载，推荐直接加载 viewmodelvm.load();//重新加载 viewmodel} else {}/*无论上传成功与否，记得清空input type=file的val值。保证change事件的触发。如果不清空，可能导致change事件无法触发*/$("#img" + imgtype + dt.PROCESSITEM).val('');},error: function (data) {$("#img" + imgtype + dt.PROCESSITEM).val('');alert("上传失败");},})}
</script>

后台代码

  • 返回数据部分代码（C#）
/*这里调用查询数据接口，返回查询的结果集*/
IEnumerable<PartProcessMsEx> scheduleList = ...;
int maxcol = scheduleList.Count() == 0 ? 1 : scheduleList.Max(t => t.PARTPROCESSSCHEDULELIST.Count());
return Json(new { Status = true, data = scheduleList, maxcol = maxcol }, JsonRequestBehavior.AllowGet);
  • 结果集对象定义
/*继承的PartProcessMs为基本model。也就是一些基本字段如id、图片地址等*/
public class PartProcessMsEx : PartProcessMs
{/*定义 list 存储指定对象所对应的工艺列表集合，也就是示例中后 n 列的集合*/private List<PartProcessSchedule> _partProcessScheduleList = new List<PartProcessSchedule>();public List<PartProcessSchedule> PARTPROCESSSCHEDULELIST{set { value = _partProcessScheduleList ?? new List<PartProcessSchedule>(); }get { return _partProcessScheduleList; }}
}
  • 图片接收部分代码（C#）
[HttpPost]
public ActionResult UploadImage(string jgjdid, string processitem, string imgtype, string formno){/*接收图片*/var file = Request.Files["img" + imgtype + processitem];/*接收到后自行保存至FTP或服务器，并保存路径 path 到 DB 中。此处代码省略*/.../*返回图片路径与图片类型*/return Json(new { Status = result, path = path, imgtype = imgtype });}

这篇关于【KnockoutJS】KnockoutJS 绑定列表数据。实现表头合并，列生成，图片上传等功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/411131。

相关文章

Spring Boot 实现 IP 限流的原理、实践与利弊解析

Spring Boot 实现 IP 限流的原理、实践与利弊解析

《SpringBoot实现IP限流的原理、实践与利弊解析》在SpringBoot中实现IP限流是一种简单而有效的方式来保障系统的稳定性和可用性,本文给大家介绍SpringBoot实现IP限... 目录一、引言二、IP 限流原理2.1 令牌桶算法2.2 漏桶算法三、使用场景3.1 防止恶意攻击3.2 控制资源
阅读更多...
Python如何去除图片干扰代码示例

Python如何去除图片干扰代码示例

《Python如何去除图片干扰代码示例》图片降噪是一个广泛应用于图像处理的技术,可以提高图像质量和相关应用的效果,：本文主要介绍Python如何去除图片干扰的相关资料,文中通过代码介绍的非常详细,... 目录一、噪声去除1. 高斯噪声（像素值正态分布扰动）2. 椒盐噪声（随机黑白像素点）3. 复杂噪声（如伪
阅读更多...
springboot下载接口限速功能实现

springboot下载接口限速功能实现

《springboot下载接口限速功能实现》通过Redis统计并发数动态调整每个用户带宽,核心逻辑为每秒读取并发送限定数据量,防止单用户占用过多资源,确保整体下载均衡且高效,本文给大家介绍spring... 目录 一、整体目标 二、涉及的主要类/方法✅ 三、核心流程图解（简化） 四、关键代码详解1️⃣ 设置
阅读更多...
Python中图片与PDF识别文本(OCR)的全面指南

Python中图片与PDF识别文本(OCR)的全面指南

《Python中图片与PDF识别文本(OCR)的全面指南》在数据爆炸时代,80%的企业数据以非结构化形式存在,其中PDF和图像是最主要的载体,本文将深入探索Python中OCR技术如何将这些数字纸张转... 目录一、OCR技术核心原理二、python图像识别四大工具库1. Pytesseract - 经典O
阅读更多...
Nginx 配置跨域的实现及常见问题解决

Nginx 配置跨域的实现及常见问题解决

《Nginx配置跨域的实现及常见问题解决》本文主要介绍了Nginx配置跨域的实现及常见问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来... 目录1. 跨域1.1 同源策略1.2 跨域资源共享（CORS）2. Nginx 配置跨域的场景2.1
阅读更多...
Python中提取文件名扩展名的多种方法实现

Python中提取文件名扩展名的多种方法实现

《Python中提取文件名扩展名的多种方法实现》在Python编程中,经常会遇到需要从文件名中提取扩展名的场景,Python提供了多种方法来实现这一功能,不同方法适用于不同的场景和需求,包括os.pa... 目录技术背景实现步骤方法一：使用os.path.splitext方法二：使用pathlib模块方法三
阅读更多...
CSS实现元素撑满剩余空间的五种方法

CSS实现元素撑满剩余空间的五种方法

《CSS实现元素撑满剩余空间的五种方法》在日常开发中，我们经常需要让某个元素占据容器的剩余空间，本文将介绍5种不同的方法来实现这个需求，并分析各种方法的优缺点，感兴趣的朋友一起看看吧... css实现元素撑满剩余空间的5种方法 在日常开发中，我们经常需要让某个元素占据容器的剩余空间。这是一个常见的布局需求
阅读更多...
HTML5 getUserMedia API网页录音实现指南示例小结

HTML5 getUserMedia API网页录音实现指南示例小结

《HTML5getUserMediaAPI网页录音实现指南示例小结》本教程将指导你如何利用这一API，结合WebAudioAPI，实现网页录音功能,从获取音频流到处理和保存录音，整个过程将逐步... 目录1. html5 getUserMedia API简介1.1 API概念与历史1.2 功能与优势1.3
阅读更多...
Java实现删除文件中的指定内容

Java实现删除文件中的指定内容

《Java实现删除文件中的指定内容》在日常开发中,经常需要对文本文件进行批量处理,其中,删除文件中指定内容是最常见的需求之一,下面我们就来看看如何使用java实现删除文件中的指定内容吧... 目录1. 项目背景详细介绍2. 项目需求详细介绍2.1 功能需求2.2 非功能需求3. 相关技术详细介绍3.1 Ja
阅读更多...
使用Python和OpenCV库实现实时颜色识别系统

使用Python和OpenCV库实现实时颜色识别系统

《使用Python和OpenCV库实现实时颜色识别系统》：本文主要介绍使用Python和OpenCV库实现的实时颜色识别系统,这个系统能够通过摄像头捕捉视频流,并在视频中指定区域内识别主要颜色（红... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间详解
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2