layui父頁面向子頁面傳引數的幾種辦法

2021-09-16 12:18:20 字數 1694 閱讀 7830

layui擁有各式各樣的後端模板,對於乙個需要快速開發的後端系統無疑是雪中送炭,最近聽見有小夥伴在使用layui與angularjs作為前段框架的時候在頁面傳引數的時候遇到了問題,今天我們就來總結一下,主要分為兩種。

以乙個彈出框為例,如果要在彈出框中獲取使用者資訊,則需要將使用者id傳遞到彈出的頁面中,在js中的**如下:

self.

edituser

=function

(id)

global.

openwindow(})};

注意:該方法同樣適用於頁面做頁面跳轉。假如是做頁面跳轉,則js**如下:

window.location = basepath +

"/page/sysuserlist/createorupdateuser?id="

+ id +

"&operate=update"

,

第二種:將引數利用data屬性單獨封裝:還是上面的例子,要在子頁面中獲取使用者資訊,同樣需要將使用者id傳到子頁面中,js中**如下:

self.

edituser

=function

(id)

global.

openwindow

( width:

750,

height:

400,

ok:function

(data)})

};

接下來就是在controller層接收引數,將引數返回給對應的頁面,這兩種方式不管是以彈窗方式還是以頁面跳轉方式,接收的方式都是一樣的,示例**如下:(

"/createorupdateuser"

)public string createorupdateuser

(model model,string id,string operate)

return 的位址就是你的頁面位址,不需要寫頁面的字尾(如.ftl)

在子頁面接收引數也分為兩種

第一種:在頁面中使用隱藏的input框接收(此方法對父頁面的兩種傳參方式均適用),**如下:

"hidden" value=

"$" id=

"operate"

>

"hidden" value=

"$" id=

"id"

>

<

/#if

>

我這裡把id做了if判斷是因為新增和編輯表單用的同乙個,所以只有存在的時候才接收,否則在新增表單的時候沒有id就回報錯。

第二種:在js中直接獲取(此方法僅適用於在父級頁面使用data單獨封裝引數),**如下:

使用LAYUI父頁面向子頁面傳參

預想效果 選擇某行後,單擊編輯按鈕,獲取到選擇的行的資料 實現 buttons copyhtml5 excelhtml5 csvhtml5 pdfhtml5 print 按鈕事件 mytable on click editrow function data 0 if rowdata else myt...

子頁面向父頁面傳值

想用jquery實現這樣乙個功能 例如當father頁面的乙個文字框 txtemployee 輸入控制項獲得焦點的時候。彈出乙個子頁面child.aspx child頁面中放的是乙個repeater控制項繫結的employee表中的資料,雙擊repeater控制項某一行的時候,將這行資料的name值...

VUE,父頁面向子頁面傳值。

在父頁面中,我們使用了自定義的子頁面,這時候我們需要將父頁面的id傳輸給子頁面。可以自定義乙個繫結事件在子元件上,例如 父頁面 id basicmsg basicmsg為我的自定義子元件名稱,引號內為需要傳輸的值。這裡我傳輸的id為data內定義的id。子頁面 使用props來接收父元件傳輸的資料,...