layui框架整理

2021-10-14 17:06:54 字數 1633 閱讀 1629

昨天在畫方框的時候發現搞不定方框,想到之前團隊裡面有人用了layui.就直接用了一下。因為時間緊張,沒有仔細看文件。解決遇到一堆的問題。。。

layui使用form表單實現post請求頁面跳轉

如果想用form表單進行post請求跳轉,只能用這個方式了。所需要的引數在input裡面加好,然後在上面做賦值就可以了。

window.location.href='url?param=' + paramvalue;
上面這種方式實現頁面跳轉附帶引數,容易造成資訊洩露;

layui使用form表單實現post請求,避免資訊洩露(設定form表單隱藏,也可以初始化時隱藏):

這裡是在資料**查詢資料時的按鈕操作,其他操作類似

"mytable"

class

="layui-table"

lay-filter

="mytabledetail"

>

table

>

資料**具體配置檢視layui文件

type

="text/html"

id="detailbar"

>

="layui-btn layui-btn-primary layui-btn-xs" lay-event=

"detail"

>詳情<

/a>

script

>

下面action部分可以是具體的請求路徑,亦可以使*.do請求

action

='$/requestmethodname'

method

='post'

name

='form1'

style

='display

:none

'>

type

=hidden

name

='param1'

id="param1"

value='

'>

type

=hidden

name

='param2'

id="param1"

value='

'>

form

>

js部分:

table.on(

'tool(mytable)'

,function

(obj)})

;

這個是form標籤的標準用法。目前的需求應該是需要直接post跳轉過去的。就是我上面這個鏈結裡post方式的用法

這個是用於設定單選的

關鍵的**就這一塊

form.on(

'checkbox(indicators)'

,function

(data)

);

form.

render

('checkbox'

);

監聽核取方塊提交表單的,不錯的case

layui的官方文件

Layui 學習整理

圖示字元 layui的字元採用的是unicode字元。所有圖示全部採用字型形式,這一點和bootstrap非常相似,但是用法上稍有區別。通過對乙個內聯元素 一般推薦用 i標籤 設定 class layui icon 來定義乙個圖示,然後對元素加上圖示對應的 unicode 字元,即可顯示出你想要的圖...

LayUi前端框架

首先宣告一下這是我第一次使用前端框架完成後台的配合工作,這在我工作中也是第一次遇見,因為公司有自己的前端開發工程師,不必要我們自己去實現前端的效果,雖然前端的東西並不是很難,但是重點就是繁瑣,小零碎太多,不想後台一樣,側重於邏輯,但是學習起來還是很方便的,就是中間踩到了不少的坑。題外話 只要努力,你...

Layui框架簡介

layui 諧音 類ui 是一款採用自身模組規範編寫的前端 ui 框架,遵循原生 html css js 的書寫與組織形式,門檻極低,拿來即用。其外在極簡,卻又不失飽滿的內在,體積輕盈,元件豐盈,從核心 到 api 的每一處細節都經過精心雕琢,非常適合介面的快速開發。layui 首個版本發布於 20...