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

xiaoxiao2023-10-13 172

效果展示

功能描述

列表数据绑定

使用 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>  <td data-bind="html:PROCESSNAME"></td>  </tr> <tr> <td>预计完成时间</td>  <td data-bind="html:PLANCOMPLETEDATESTR"></td>  </tr> <tr> <td>实际完成时间</td>  <td data-bind="html:ACTUALCOMPLETEDATESTR"></td>  </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);//这种写法无法保证即时动态更新，有时候需要延迟加载，推荐直接加载 viewmodel vm.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 }); }

最新回复(0)