layui上傳文件和數(shù)據(jù)表格的方法-創(chuàng)新互聯(lián)

layui是一款我比較喜歡的框架，它的界面風格和顏色搭配都是讓人比較舒服的，所以我非常喜歡使用layui。

創(chuàng)新互聯(lián)公司專注于凌海企業(yè)網(wǎng)站建設,成都響應式網(wǎng)站建設公司,購物商城網(wǎng)站建設。凌海網(wǎng)站建設公司,為凌海等地區(qū)提供建站服務。全流程定制網(wǎng)站，專業(yè)設計，全程項目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務

接下來就是在工作中使用layui遇到了一些比較細節(jié)的問題：

第一：layui上傳文件的問題，

第二：layui 表格的問題。

首先第一個問題，就是layui上傳文件的問題，首先我們來看layui是如何上傳文件的：

function UpdateFile() {
        layui.use('upload', function () {
            var upload = layui.upload;
            //執(zhí)行實例
            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');
                }
            });
        });
    }

當然你需要在你的頁面上定義一個按鈕，然后觸發(fā)點擊事件，elem: '#upload' 就是用來與你的上傳按鈕做綁定了，接下來就是文件類型還有用post來傳輸。

然后我們需要在后臺用一個參數(shù)去接收文件。

[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 去接收文件，參數(shù)名最好是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 個連續(xù)頁碼
                    , 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: '創(chuàng)建時間', sort: true, width: 200 },
                    { field: 'isEnabled', title: '啟用', templet: '#checkboxTpl', width: 100 },
                    { field: 'status', title: '狀態(tài)', 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會發(fā)送get請求到控制器。從而完成與后臺的交互。那么如果我們想要點擊了checkbox按鈕之后，我們選中這一條數(shù)據(jù)的時候不能刪除這條數(shù)據(jù)怎么辦呢？

我們就需要遍歷一下這個頁面的所有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上傳文件與數(shù)據(jù)表格的一些問題的詳細內容，更多請關注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司其它相關文章！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

標題名稱：layui上傳文件和數(shù)據(jù)表格的方法-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://muchs.cn/article0/dhidoo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內鏈、動態(tài)網(wǎng)站、外貿建站、企業(yè)建站、做網(wǎng)站、企業(yè)網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容