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

最新推荐文章于 2023-07-13 09:16:08 发布

HolaSecurity

最新推荐文章于 2023-07-13 09:16:08 发布

阅读量610

点赞数

分类专栏：『前端』文章标签： knockoutjs C# 图片上传数据绑定

本文链接：https://blog.csdn.net/shaotaiban1097/article/details/90546003

版权

『前端』专栏收录该内容

23 篇文章 0 订阅

订阅专栏

效果展示

功能描述

列表数据绑定

使用 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);//这种写法无法保证即时动态更新，有时候需要延迟加载，推荐直接加载 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 });
 }

HolaSecurity

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【KnockoutJS】KnockoutJS 绑定列表数据。实现表头合并，列生成，图片上传等功能

效果展示功能描述列表数据绑定使用 KnockoutJS 的 foreach 语法绑定后台返回的 JSON 数据，循环输出。表头合并前 5 列为主项，后n列未细项。所以前 5 列进行行合并。这里因为需求是固定的 5 列，所以代码也就直接指定了 5 。如果需求合并列不确定，也可以优化为动态合并。列生成每一个主项的后 n 列(工艺列表)的个数不确定，为了前台展示方便，后台...
复制链接

扫一扫