Einige Probleme beim Hochladen von Laui-Dateien und Datentabellen-Layui-Tutorial-php.cn

Einige Probleme beim Hochladen von Laui-Dateien und Datentabellen

尚

Freigeben： 2019-12-12 16:45:10

nach vorne

4383 Leute haben es durchsucht

Einige Probleme beim Hochladen von Laui-Dateien und Datentabellen

layui是一款我比较喜欢的框架，它的界面风格和颜色搭配都是让人比较舒服的，所以我非常喜欢使用layui。

接下来就是在工作中使用layui遇到了一些比较细节的问题：

第一：layui上传文件的问题，

第二：layui 表格的问题。

首先第一个问题，就是layui上传文件的问题，首先我们来看layui是如何上传文件的：

function UpdateFile() {
        layui.use(&#39;upload&#39;, function () {
            var upload = layui.upload;
            //执行实例
            var uploadInst = upload.render({
                elem: &#39;#upload&#39; //绑定元素
                , url: &#39;/ExcelTemplate&#39;//上传接口
                , method: &#39;POST&#39;
                , type: "file"
                , accept: &#39;file&#39;
                , before: function (obj) {
                    layer.load(); //上传loading
                }
                , done: function (res) {
                    //上传完毕回调
                    if (res) {
                        layer.closeAll(&#39;loading&#39;);
                        var d = dialog({
                            title: &#39;提示&#39;,
                            content: &#39;上传模板成功&#39;,
                            width: 200,
                            ok: function () { self.location.reload(); },
                        });
                        d.show();
                    } else {
                        layer.closeAll(&#39;loading&#39;);
                        var d = dialog({
                            title: &#39;提示&#39;,
                            content: &#39;上传模板失败&#39;,
                            width: 200,
                            ok: function () { },
                        });
                        d.show();
                    }
                }
                , error: function () {
                    layer.closeAll(&#39;loading&#39;);
                }
            });
        });
    }

Nach dem Login kopieren

当然你需要在你的页面上定义一个按钮，然后触发点击事件，elem: '#upload' 就是用来与你的上传按钮做绑定了，接下来就是文件类型还有用post来传输。

然后我们需要在后台用一个参数去接收文件。

[HttpPost("")]
        public IActionResult UploadTemplate(IFormFile file)
        {
            long dateTime = DateTime.Now.ToFileTimeUtc();
            string[] template = file.FileName.Split(new char[] { &#39;\\&#39; }, StringSplitOptions.RemoveEmptyEntries);
            string fileName = Path.Combine(hostingEnvironment.WebRootPath, "Upload", "ExcelTemplate", dateTime + "_" + template[template.Length - 1]);
            if (System.IO.File.Exists(fileName))
            {
                System.IO.File.Delete(fileName);
            }

            try
            {
                using (FileStream fs = new FileStream(fileName, FileMode.Create))
                {
                    file.CopyTo(fs);
                    fs.Flush();
                    return Ok(true);
                }
            }
            catch (Exception)
            {
                return BadRequest("上传模板失败！");
            }
        }

Nach dem Login kopieren

这里是用IFormFile 去接收文件，参数名最好是file，然后对文件进行操作，那么上传的文件要怎么才能下载呢，如下：

<script type="text/html" id="down">
    <a href="~/Upload/ExcelTemplate/{{d.name}}" download="{{d.name}}" class="layui-table-link">下载</a>
</script>

Nach dem Login kopieren

在表格中显示和下载。

第二就是表格的问题了：

layui.use([&#39;table&#39;, &#39;laypage&#39;], function () {
            var laypage = layui.laypage;
            var table = layui.table,
                form = layui.form;
            table.render({
                elem: &#39;#PaymentDayList&#39;
                , url: &#39;/PaymentDay&#39;
                , method: "get"
                , height: "auto"
                , width: "auto"
                , cellMinWidth: 80
                , limit: 10
                , curr: 1
                , request: {
                    pageName: &#39;pageIndex&#39;
                }
                , page: {
                    layout: [&#39;limit&#39;, &#39;count&#39;, &#39;prev&#39;, &#39;page&#39;, &#39;next&#39;, &#39;skip&#39;] //自定义分页布局
                    , groups: 5 //只显示 1 个连续页码
                    , first: false //不显示首页
                    , last: false //不显示尾页

                }
                , limits: [10, 20, 50, 100, 500, 1000]
                , cols: [[

                    { type: "checkbox", fixed: "left" },
                    { type: &#39;numbers&#39;, title: &#39;序号&#39; },
                    { field: &#39;name&#39;, title: &#39;账期名称&#39;, sort: true, width: 200 },
                    { field: &#39;settleMentInterval&#39;, title: &#39;结算周期&#39;, sort: true, width: 100 },
                    { field: &#39;startTime&#39;, title: &#39;账期起始时间&#39;, sort: true, width: 150 },
                    { field: &#39;endTime&#39;, title: &#39;账期终止时间&#39;, sort: true, width: 150 },
                    { field: &#39;warnDay&#39;, title: &#39;到期提醒日&#39;, sort: true, width: 150 },
                    { field: &#39;userName&#39;, title: &#39;商保专员&#39;, sort: false, width: 100 },
                    { field: &#39;addTime&#39;, title: &#39;创建时间&#39;, sort: true, width: 200 },
                    { field: &#39;isEnabled&#39;, title: &#39;启用&#39;, templet: &#39;#checkboxTpl&#39;, width: 100 },
                    { field: &#39;status&#39;, title: &#39;状态&#39;, sort: false, width: 100 },
                    { field: &#39;scope&#39;, title: &#39;适用范围&#39;, sort: false, width: 100 },

                ]]
            });
            $(&#39;#Select&#39;).on(&#39;click&#39;, function () {
                table.reload("PaymentDayList", {
                    page: {
                        curr: 1
                    }
                    , where: {
                        name: $("#name").val(),
                        startTime: $("#startTime").val(),
                        endTime: $("#endTime").val(),
                        status: $("#type option:selected").val()
                    }
                });
            });
            form.on(&#39;checkbox(lockDemo)&#39;, function (obj) {

                var isEnable;
                obj.elem.checked == true ? isEnable = "启用" : isEnable = "未启用";
                $.ajax({
                    url: &#39;/PaymentDay/Enabled/&#39; + obj.value + "/" + isEnable,
                    type: &#39;get&#39;,
                    success: function (result) {
                        if (result.code == 200) {
                        }
                        else {
                            var d = dialog({
                                title: &#39;提示&#39;,
                                content: &#39;操作失败！&#39;,
                                ok: function () { },
                            });
                            d.show();
                        }
                    }

                });
            });
        });

Nach dem Login kopieren

这时候有人可能留意到了有一个启用的checkbox，其中点击checkbox会发送get请求到控制器。从而完成与后台的交互。那么如果我们想要点击了checkbox按钮之后，我们选中这一条数据的时候不能删除这条数据怎么办呢？

我们就需要遍历一下这个页面的所有checkbox了，如下：

var table = layui.table;
            var checkStatus = table.checkStatus(&#39;PaymentDayList&#39;), data = checkStatus.data;

            if (data.length == 1) {
                var check = document.getElementsByName("lock");
                for (i = 0; i < check.length; i++) {
                    if (check[i].value == data[0].id) {
                        if (check[i].checked) {
                            var d = dialog({
                                title: &#39;提示&#39;,
                                content: "启用了的账期不能修改",
                                okValue: &#39;确定&#39;,
                                ok: function () {
                                }

                            }).width(200);
                            d.show();
                            return;
                        }

                    }

                }

Nach dem Login kopieren

这样就可以确定哪个是选中的了。

更多layui知识请关注layui使用教程栏目。

Das obige ist der detaillierte Inhalt vonEinige Probleme beim Hochladen von Laui-Dateien und Datentabellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!