Shulou(Shulou.com)06/03 Report--

This article is about uploading files and data tables in layui. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Layui is my favorite framework, its interface style and color matching are more comfortable, so I like to use layui very much.

The next step is to encounter some more detailed problems with using layui at work:

First: the problem of uploading files on layui

Second: the problem of layui table.

First of all, the first question is the problem of layui uploading files. First, let's take a look at how layui uploads files:

Function UpdateFile () {layui.use ('upload', function () {var upload = layui.upload) / / execute instance var uploadInst = upload.render ({elem:'# upload' / / binding element, url:'/ ExcelTemplate'// upload API, method: 'POST', type: "file", accept:' file' Before: function (obj) {layer.load () / / upload loading}, done: function (res) {/ / callback if (res) {layer.closeAll ('loading') after upload Var d = dialog ({title: 'prompt', content: 'template uploaded successfully', width: 200, ok: function () {self.location.reload ();},}) D.show ();} else {layer.closeAll ('loading') Var d = dialog ({title: 'prompt', content: 'upload template failed', width: 200, ok: function () {},}) D.show ();}}, error: function () {layer.closeAll ('loading');}});});}

Of course, you need to define a button on your page, and then trigger the click event, elem:'# upload' is used to bind to your upload button, followed by the file type and transfer using post.

Then we need to receive the file with a parameter in the background.

[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 ("upload template failed!") ;}}

Here, IFormFile is used to receive the file. The parameter name is preferably file, and then operate on the file. How can the uploaded file be downloaded, as follows:

download

Display and download in the table.

The second is the problem of forms:

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'] / / Custom paging layout, groups: 5 / / displays only one consecutive page number First: false / / does not show the home page, last: false / / does not show the last page}, limits: [10,20,50,100,500,1000], cols: [{type: "checkbox", fixed: "left"}, {type: 'numbers' Title: 'serial number'}, {field: 'name', title:' account name', sort: true, width: 200}, {field: 'settleMentInterval', title:' settlement period', sort: true, width: 100}, {field: 'startTime', title:' account start time', sort: true, width: 150} {field: 'endTime', title:' account termination date', sort: true, width: 150}, {field: 'warnDay', title:' expiration reminder date', sort: true, width: 150}, {field: 'userName', title:' Commissioner of Commercial Insurance, sort: false, width: 100}, {field: 'addTime' Title: 'creation time', sort: true, width: 200}, {field: 'isEnabled', title:' enable', templet:'# checkboxTpl', width: 100}, {field: 'status', title:' status', sort: false, width: 100}, {field: 'scope', title:' scope', sort: false, width: 100} ]]}) On ('# 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 = "enabled": isEnable = "not enabled" $.ajax ({url:'/ PaymentDay/Enabled/' + obj.value + "/" + isEnable, type: 'get' Success: function (result) {if (result.code = = 200) {} else {var d = dialog ({title: 'prompt') Content: 'operation failed!' , ok: function () {},}); d.show ();})

At this point, someone may have noticed that there is an enabled checkbox, where clicking checkbox will send a get request to the controller. In order to complete the interaction with the background. So what if we want to click the checkbox button and we can't delete this data when we select it?

We need to iterate through all the checkbox on this page, as follows:

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) If +) {if (check[ I] .value = = data [0] .id) {var d = dialog ({title: 'prompt', content: "enabled account periods cannot be modified" OkValue:'OK', ok: function () {}}) .width D.show (); return;}

So you can determine which one is selected.

Thank you for reading! This is the end of this article on "what are the problems of uploading files and data tables in layui?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.