Maison > interface Web > Tutoriel Layui > Quelques problèmes avec le téléchargement de fichiers et de tableaux de données par Layui

Quelques problèmes avec le téléchargement de fichiers et de tableaux de données par Layui

Libérer: 2019-12-12 16:45:10
avant
4421 Les gens l'ont consulté

Quelques problèmes avec le téléchargement de fichiers et de tableaux de données par Layui

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

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

第一:layui上传文件的问题,

第二:layui 表格的问题。

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

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

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

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

[HttpPost("")]
        public IActionResult UploadTemplate(IFormFile file)
        {
            long dateTime = DateTime.Now.ToFileTimeUtc();
            string[] template = file.FileName.Split(new char[] { '\\' }, 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("上传模板失败!");
            }
        }
Copier après la connexion

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

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

在表格中显示和下载。

第二就是表格的问题了:

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();
                        }
                    }

                });
            });
        });
Copier après la connexion

这时候有人可能留意到了有一个启用的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;
                        }

                    }

                }
Copier après la connexion

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:cnblogs.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal