layui中上傳文件與數據表格的問題有哪些

這篇文章給大家分享的是有關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');                }            });        });    }

當然你需要在你的頁面上定義一個按鈕，然后觸發點擊事件，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("上傳模板失敗！");            }        }

這里是用IFormFile 去接收文件，參數名最好是file，然后對文件進行操作，那么上傳的文件要怎么才能下載呢，如下：

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

在表格中顯示和下載。

第二就是表格的問題了：

layui.use(['table', 'laypage'], function () {            var laypage = layui.laypage;            var table = layui.table,                form = layui.form;            table.render({                elem: '#PaymentDayList'                , url: '/PaymentDay'                , method: "get"                , height: "auto"                , width: "auto"                , cellMinWidth: 80                , limit: 10                , curr: 1                , request: {                    pageName: 'pageIndex'                }                , page: {                    layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定義分頁布局                    , groups: 5 //只顯示 1 個連續頁碼                    , first: false //不顯示首頁                    , last: false //不顯示尾頁                }                , limits: [10, 20, 50, 100, 500, 1000]                , cols: [[                    { type: "checkbox", fixed: "left" },                    { type: 'numbers', title: '序號' },                    { field: 'name', title: '賬期名稱', sort: true, width: 200 },                    { field: 'settleMentInterval', title: '結算周期', sort: true, width: 100 },                    { field: 'startTime', title: '賬期起始時間', sort: true, width: 150 },                    { field: 'endTime', title: '賬期終止時間', sort: true, width: 150 },                    { field: 'warnDay', title: '到期提醒日', sort: true, width: 150 },                    { field: 'userName', title: '商保專員', sort: false, width: 100 },                    { field: 'addTime', title: '創建時間', sort: true, width: 200 },                    { field: 'isEnabled', title: '啟用', templet: '#checkboxTpl', width: 100 },                    { field: 'status', title: '狀態', sort: false, width: 100 },                    { field: 'scope', title: '適用范圍', sort: false, width: 100 },                ]]            });            $('#Select').on('click', function () {                table.reload("PaymentDayList", {                    page: {                        curr: 1                    }                    , where: {                        name: $("#name").val(),                        startTime: $("#startTime").val(),                        endTime: $("#endTime").val(),                        status: $("#type option:selected").val()                    }                });            });            form.on('checkbox(lockDemo)', function (obj) {                var isEnable;                obj.elem.checked == true ? isEnable = "啟用" : isEnable = "未啟用";                $.ajax({                    url: '/PaymentDay/Enabled/' + obj.value + "/" + isEnable,                    type: 'get',                    success: function (result) {                        if (result.code == 200) {                        }                        else {                            var d = dialog({                                title: '提示',                                content: '操作失敗！',                                ok: function () { },                            });                            d.show();                        }                    }                });            });        });

這時候有人可能留意到了有一個啟用的checkbox，其中點擊checkbox會發送get請求到控制器。從而完成與后臺的交互。那么如果我們想要點擊了checkbox按鈕之后，我們選中這一條數據的時候不能刪除這條數據怎么辦呢？

我們就需要遍歷一下這個頁面的所有checkbox了，如下：

var table = layui.table;            var checkStatus = table.checkStatus('PaymentDayList'), 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: '提示',                                content: "啟用了的賬期不能修改",                                okValue: '確定',                                ok: function () {                                }                            }).width(200);                            d.show();                            return;                        }                    }                }

這樣就可以確定哪個是選中的了。

感謝各位的閱讀！關于“layui中上傳文件與數據表格的問題有哪些”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！