layui的彈出框、form表單、表格使用常見問題解決方案

2020-12-12 Java程序猿dulucy

layui,是一款採用自身模塊規範編寫的前端 UI 框架,遵循原生 HTML/CSS/JS 的書寫與組織形式,門檻極低,拿來即用。其外在極簡,卻又不失飽滿的內在,體積輕盈,組件豐盈,從核心代碼到 API 的每一處細節都經過精心雕琢,非常適合界面的快速開發。

最近公司開始全面的更改前端的框架,由bootstrap更改為layui'框架,在嘗試使用layui編寫前臺邏輯時,遇到了很多的坑,在此做一些常用坑的解決辦法的總結。主要包含:

1、點擊按鈕,將父頁面數據傳遞到子頁面的問題

2、關閉子頁面刷新父頁面問題

3、動態地為form表單中的select添加option不顯示問題

4、form表單提交獲取表單數據問題

5、表格的初始化請求分頁參數、搜索重載表格以及表格內時間格式化問題

以上問題並不是有多難,只是在初步使用layui框架時,會有點摸不著頭腦而已。

彈出框

(1)彈出層父頁面給子頁面傳值

type 為 1的傳值:直接通過$(子頁面元素id).val(),本質上,子頁面與父頁面同屬一個window層

(2)關閉彈出層刷新父頁面表格

點擊事件

form表單中select動態添加option

form表單提交獲取數據

表格使用

表格基本配置

搜索重載表格

表格時間格式化

設置cols時,添加紅字部分代碼

{field: 'create_time', width: 180, title: '創建時間', align: "center",templet:'<div>{{ layui.util.toDateString(d.createDate, "yyyy-MM-dd HH:mm:ss") }}</div>',}

相關焦點

  • JFinal-layui v1.4.1 發布,實現響應式,解決表單重複提交
    讓開發更簡單高效,即使你不會前端 layui,也能輕鬆掌握使用。       JFinal-layui v1.4.1 主要實現響應式布局,解決表單重複提交問題,以及優化多選樹的展開功能。因為這個布局是利用layui現有的架構,結合jfinal的enjoy模版引擎,是封裝在了#@colStart(label,xs)函數裡面,所以開發者不需要自己操心了,正常開發使用即可。1、封裝的模版函數:
  • 解決layui前端動態設置radio、checkbox默認選項的解決方案
    在前端模板文件中,普通用到的是使用<if condition=""></if>來作判斷。但是奇怪的就是layui並不能識別。發現在input包括中無法解析到if判斷語句;當然在普通情況下是可以的,中不過程序使用了layui,因為layui通過js識別所有表單元素,重新編譯了。
  • layui同一頁面多個時間選擇框不能正常顯示及閃退解決方案
    layui框架,一個頁面配置時間框:可能問題1:點擊不彈出時間選擇框;可能問題2:多個時間選擇框點擊閃退;解決方案:問題1:務必確定 layui.js文件引入路徑正確,然後注意js引入代碼和script語句的順序問題,否則就無法使用時間選擇框;問題2:多個時間選擇框點擊閃退---網上很多說加入trigger: 'click' 屬性的,也許他們管用,但是我這邊是不行的,應該是我的是input,所以如果是input元素,那你需要看一下lay-key
  • html中form表單標籤的詳細介紹
    本篇將介紹的是html中form表單標籤的用法,有興趣的朋友可以學習一下!在html中,表單是經常用到的,用來與用戶交互並提交數據。今天要介紹的就是表單標籤form標籤,接下來我們就一起來看看它的用法吧!「form」作為英文單詞有「表格」的意思,那它在html中作為標籤又充當什麼樣的角色呢!我們一起來看看吧!
  • Niushop開源商城系統表單搭建
    表單搭建,是商城系統觸發按鈕的重要模塊之一,有工整詳細的表單,不僅能讓頁面更加美觀大氣,還可以讓後臺代碼更加規整與規範,方便及時查漏或者商家再次二開!表單label寬度layui-form-label 155pxlayui-form-label sm 100pxinput寬度input框 最短(100px): ns-len-small
  • Niushop開源商城表單單選按鈕、開關按鈕及表單展示等開發代碼
    上一期,阿牛ger與大家分享了創建表單的基本功能,調整表單寬度、表單輸入框、表單必輸標識、表單注釋及複選框功能的添加代碼,這一期,阿牛ger接著與大家分享Niushop開源商城表單開發那些事兒:單選按鈕效果圖:代碼如下:<!
  • layui動態顯示表格的列 自己動手 豐衣足食
    眾所周知啊,layui是可以手動篩選列的。但是這個篩選只限當前,你要是重新關閉當前頁面或者登錄進來,就又顯示默認的列。可能有的人會說:那就直接給出別人想要的默認的列就行了嘛。但是眾口難調啊。我就真的遇到這種奇葩情況:A說:XX工啊,我這個用戶工號用不到啊,你直接去了吧。你看表格這麼多列,我看得都煩。
  • 前端入門須知:輕鬆學會form表單製作!
    一般是將表單設計在一個Html 文檔中,當用戶填寫完信息後做提交(submit)操作,於是表單的內容就從客戶端的瀏覽器傳送到伺服器上,經過伺服器上的 ASP 或 PHP 等處理程序處理後,再將用戶所需信息傳送回客戶端的瀏覽器上,這樣網頁就具有了交互性。這裡我們只講怎樣使用Html 標誌來設計表單。所有的用戶輸入內容的地方都用表單來寫,如登錄註冊、搜索框。
  • 如何在Element實現表格的增加、修改和刪除
    Element框架時,可以使用el-table展示數據,還可以對表格記錄進行新增、修改和刪除。插入一個表格el-table,並添加表格欄位4、添加一個el-dialog彈窗,並插入一個el-form標籤元素
  • JavaScript之阻止form表單提交三種方式
    今天和大家分享一下,關於如何阻止form表單的提交。一、為什麼要阻止form表單的提交呢?以及使用場景我們在工作中,比如一個登錄頁面,當填完用戶登錄信息後,需要對用戶信息進行校驗,如果有問題,那麼就不應該將數據提交到後臺,而是在前臺阻止,接下來我們看一下,如何阻止form表單的幾種方式1、表單第一種阻止方式:form結合onclick事件來阻止form表單的提交<head><meta charset="UTF-8"
  • Python學習第224課——html表單
    ●html表單表單是一個包含表單元素的區域。表單標籤是<form></form>。form這個單詞本身就有表格的意思。<form>標籤裡面是是允許用戶輸入內容的標籤,用的最多的是input標籤,input標籤上面有一個type屬性,這個屬性規定了input標籤的類型。input標籤的主要類型如下:文本域(textarea)、下拉列表、單選框(radio-buttons)、複選框(checkboxes)等等。
  • HTML表單標籤基礎
    HTML表單一、傳統表單(一)1、表單是什麼?01.在網頁中主要負責數據採集功能的組件。02.通常與資料庫相連。03.由表單元素組成。2、表單組件介紹:01.文本(欄位)02.選擇03.單選按鈕(組)04.文本域05.複選框06.密碼(欄位)07.文件域08.提交按鈕09.重置按鈕3、form 標籤 (表單範圍)...
  • Chrome 83 對表單控制項和焦點元素的更新被吐槽
    ,瀏覽器會在它們周圍顯示一個「黑框」,以突出表單中的這些內容。對於這個問題,已經有人向 Chromium 團隊提交了 issue,該 issue 的描述為:「自更新表單控制項以來,Chrome 似乎忽略了使用邏輯屬性的 CSS 邊框規則,總是在 <textarea> 等組件處於焦點時顯示黑框
  • uniapp picker提交值為數字的解決方案
    form表單接收<switch> <input> <checkbox> <slider> <radio> <picker>提交的值,數據接收格式為{'name': 'value'},但是在接收picker的時候遇到了大坑
  • 2B產品設計套路二:表格頁設計
    操作欄一般是多個按鈕組成的,比如說常見的【新增】按鈕和各種批量操作按鈕。通過【新增】按鈕打開新增表單,實現向表格增加一條數據。批量操作一般是業務功能,根據需求我們也可以把【刪除】作為一種批量操作。一個簡單粗暴的解決方案是給所有欄位都加上篩選、排序,但這樣表頭看起來就會非常亂。有幾種改進方案:一是只保留重要的那些欄位的篩選排序功能,但這樣很考驗pm對業務的理解,如果一些用戶關心的欄位沒有篩選和排序功能可能會被吐槽。
  • Win7系統電腦USB接口無法使用解決方案
    電腦USB接口的功能有很多,不但能夠讀取硬碟資料,還可給手機充電和傳輸資料,有時候用戶們在連接電腦USB接口時,發現連不上,這該如何解決呢?這種情況大多屬於主機上插口被禁用了,只要回復USB程序就可正常使用,下面小編就和大家分享下Win7系統電腦USB接口無法使用的解決方案。
  • 由淺入深地聊聊html的表單
    今天和大家分享學習一下html的表單一、HTML標籤:表單標籤表單的概念:用於採集用戶輸入的數據的。用於和伺服器進行交互。1、form表單標籤他是用於定義表單的,本身並沒有什麼樣式,可以定義一個範圍,範圍代表採集用戶數據的範圍,通俗易懂的說就是 被他包裹的數據可以被提交給伺服器。
  • JFinal-layui-pro v2.0 專業版發布,優化系統界面
    JFinal-layui-pro專業版   pro專業版和master開原版本的區別主要是前端界面的不同,在原有的基礎上修改css,調整首頁布局
  • 查找兩個Excel表格的共同關鍵字,提取相關行合併成新表格 - Excel...
    解決方案:1. 選中第一個數據表的任意單元格 --> 選擇菜單欄的「數據」-->「從表格」2.在彈出的對話框中點擊「確定」表格已上傳至 Power Query。3. 選擇菜單欄的「主頁」-->「關閉並上載」-->「關閉並上載至...」4.
  • 服務端表格組件 GcExcel V4.0 發布,構建類 Excel 全棧解決方案...
    將其與純前端表格控制項 SpreadJS 結合使用,可滿足表格數據的在線編輯與展示、前後端數據同步、服務端批量導出與列印,以及高性能類 Excel 報表模板設計與服務端處理等功能,為您的應用程式打造一整套類 Excel 全棧解決方案。