關(guān)于layer.js使用心得-向彈出框傳值問題

更新時間：2022年11月08日 10:23:09 作者：returningprodigal

這篇文章主要介紹了關(guān)于layer.js使用心得-向彈出框傳值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

layer.js使用心得-向彈出框傳值

問題背景

實現(xiàn)彈出對話框加載頁面，所以我選擇了獨立組件layer.js。

基于layer.js組件彈出了一個新的iframe的窗口（假設(shè)name為LayerFrame，方便后面稱呼），但需要從之前的頁面?zhèn)魅雲(yún)?shù)

注：'#sayHello'元素是在主窗口下的 HomeFram（HomeFrame是主窗口下的子 iframe）里

代碼如下：

$('#sayHello').click(function () {
? ? ? ? top.layer.open({
? ? ? ? ? ? id: "layer_say_hello",
? ? ? ? ? ? type: 2,
? ? ? ? ? ? title: '打招呼',
? ? ? ? ? ? shadeClose: true,
? ? ? ? ? ? shade: 0.8,
? ? ? ? ? ? area: ['500px', '400px'],
? ? ? ? ? ? content: '/Findfriend/Part_SayHello', //iframe的url
? ? ? ? ? ? success: function (layero, index) {
? ? ? ? ? ? ? ? //傳入?yún)?shù)，并賦值給iframe的元素
? ? ? ? ? ? }
? ? ? ? });
? ? })

問題描述

在success回調(diào)函數(shù)中使用jquery選取不到彈出的 ifram 的元素

問題分析

經(jīng)過下午的頭破血流，終于被我給分析出來了，功夫不負(fù)有心人啊。廢話少說，重點來了。

原因是：

success回調(diào)函數(shù)的上下文并不是主窗口的上下文，而是 HomeFrame 的上下文。所以在success回調(diào)函數(shù)中是可以直接找到 HomeFrame 中的元素。

如果要找到 LayerFrame 的元素，就必須先找到 LayerFrame 的Dom對象，然后方可找到 LayerFrame 的 document ，最后再去找 LayerFrame 的元素

正確代碼如下：

$('#sayHello').click(function () {
        top.layer.open({
            id: "layer_say_hello",
            type: 2,
            title: '打招呼',
            shadeClose: true,
            shade: 0.8,
            area: ['500px', '400px'],
            content: '/Findfriend/Part_SayHello', //iframe的url
            success: function (layero, index) {
                var her_uli_id = $("#headico").attr("data-uli-id"); //headico 是 HomeFrame的元素
                var her_nickname = $("#nickname").text();   //nickname 是 HomeFrame的元素
                // layero.find("iframe")        找到iframe的jquery對象
                // layero.find("iframe")[0]     將jqeruy對象轉(zhuǎn)化為Dom對象
                // contentWindow                獲取當(dāng)前 iframe 的 內(nèi)容 window對象（Dom對象）
                //.send-hello 是 LayerFrame 的元素
                var jquerySendHelloButton = $(".send-hello", layero.find("iframe")[0].contentWindow.document);
                jquerySendHelloButton.attr("data-her-uli-id", her_uli_id);
                jquerySendHelloButton.attr("data-her-nick-name", her_nickname);
            }
        });
    })

layui傳值的一些經(jīng)驗，也沒怎么整理：表格渲染數(shù)據(jù)，彈出框

1.layui向表格渲染數(shù)據(jù)的格式轉(zhuǎn)換

buffer.append("{\"code\":0,\"msg\":\"\",\"count\":" + countTotal + ",\"data\":[" + buffer2 + "]}");
? ? ? ? StringBuffer buffer = new StringBuffer();
? ? ? ? StringBuffer buffer2 = new StringBuffer();
? ? ? ? try {
? ? ? ? ? ? if (takenumberlist.size() != 0 && takenumberlist != null) {
? ? ? ? ? ? ? ? buffer2 = JsonUtils.listTojson(buffer2, takenumberlist);
? ? ? ? ? ? }
? ? ? ? ? ? buffer.append("{\"code\":0,\"msg\":\"\",\"count\":" + countTotal + ",\"data\":[" + buffer2 + "]}");
? ? ? ? } catch (IllegalArgumentException e) {
? ? ? ? ? ? e.printStackTrace();
? ? ? ? } catch (IllegalAccessException e) {
? ? ? ? ? ? e.printStackTrace();
? ? ? ? }
? ? ? ? model.addAttribute("buffer", buffer.toString());
? ? ? ? System.out.println("layui傳值執(zhí)行成功！");
? ? ? ??
? ? ? ? return buffer.toString();

需要引入一個工具欄JsonUtils.java

界面接收：<table class="layui-hide" id="demo" lay-filter="test">

js:

? table.render({
? ? elem: '#demo'
? ? ,width : 430
? ? ,height: 535
? ? ,url: "http://localhost:8080/hospital/takenumber.do?ks_code=${dept_code}" //數(shù)據(jù)接口
? ? ,page: true //開啟分頁
? ? ,autoSort: true//自動排序
? ? , initSort: {field:'id', type:'asc'}
? ? /* ,totalRow: true ?*///開啟合計行
? ? ,cols: [[ //表頭
? ? ? {type: 'checkbox', fixed: 'left'}
? ? ? ,{field: 'id', title: '編號', width:80, sort: true, totalRow: true}?
? ? ? ,{field: 'person_name', title: '姓名', width:85}
? ? ? ,{field: 'queue_code', title: '取號號碼', width: 115, sort: true, totalRow: true}
? ? ? ,{field: 'specify_doctor_code', title: '醫(yī)生工號', width: 96, sort: true, totalRow: true} ?
? ? ? /* ,{field: 'doctor_name', title: '醫(yī)生', width:80, sort: true} ?*/
? ? ? /* ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'} ?*/?
? ? ]]
? });

2. layui彈出框，并且在表格里選中

彈出框：

<script type="text/html" id="move-dialog">
<form class="layui-form" action="" lay-filter="move-form">
? ? <div class="layui-form-item">
? ? ? ? <label class="layui-form-label" style="width:110px;text-align:center">姓名</label>
? ? ? ? <div class="layui-input-block">
? ? ? ? ? ? <input type="hidden" name="id" required lay-verify="required" placeholder="姓名" class="layui-hidden" disabled>
? ? ? ? ? ? <input type="text" name="person_name" ?lay-verify="" placeholder="姓名" class="layui-input" disabled>
? ? ? ? </div>
? ? </div>
? ??
? ? <div class="layui-form-item">
? ? ? ? <label class="layui-form-label" style="width:110px;text-align:center">取號號碼</label>
? ? ? ? <div class="layui-input-block">
? ? ? ? ? ? <input type="text" name="queue_code" ?lay-verify="" placeholder="取號號碼" class="layui-input" disabled>
? ? ? ? </div>
? ? </div>
? ? <div class="layui-form-item">
? ? ? ? <label class="layui-form-label" style="width:110px;text-align:center">當(dāng)前排序號</label>
? ? ? ? <div class="layui-input-block">
? ? ? ? ? ? <input type="number" name="order_by_num" ?lay-verify="move" placeholder="排序號" class="layui-number" >
? ? ? ? </div>
? ? </div>
? ? <div class="layui-form-item">
? ? ? ? <div class="layui-input-block">
? ? ? ? ? ? <button class="layui-btn" lay-submit lay-filter="but-move-submit">保存</button>
? ? ? ? ? ? <!-- <button type="reset" class="layui-btn layui-btn-primary">重置</button> -->
? ? ? ? </div>
? ? </div>
</form>
</script>

觸發(fā)彈出框：

$("#but-appoint").click(function(){
? ? ? var array = table.checkStatus('demo').data;
? ? ? if(array.length==0){
? ? ? ? ? layer.msg('請選擇要操作的記錄');
? ? ? }else if(array.length != 1){
? ? ? ? ? layer.msg('每次只能選擇一行');
? ? ? }else{
? ? ? ? ? console.log(array);
? ? ? ? ? ?layer.open({//定義一個對話框
? ? ? ? ? ? ? type : 1,
? ? ? ? ? ? ? title : '醫(yī)生指定',
? ? ? ? ? ? ? content : $("#appoint-dialog").html(),//加載表格元素給content
? ? ? ? ? ? ? area : ['600px','450px']
? ? ? ? ? })
? ? ? ? ??
? ? ? ? ? ? ? ? form.val('appoint-form',{//填充表單
? ? ? ? ? ? ? ? "id" : array[0].id,
? ? ? ? ? ? ? "person_name" : array[0].person_name,
? ? ? ? ? ? ? "queue_code" : array[0].queue_code,
? ? ? ? ? ? ? "doctor_name01" : array[0].doctor_name,?
? ? ? ? ? ? ? "specify_doctor_code" : array[0].specify_doctor_code
? ? ? ? ? ? ??
? ? ? ? ? })
? ? ? ? ? form.on('submit(but-appoint-submit)',function(data){//提交表單到后臺
? ? ? ? ? ? ??
? ? ? ? ? ? ? console.log(data.field.id);
? ? ? ? ? ? ? console.log(data.field.doctor_name);
? ? ? ? ? ? ? console.log(data.field.doctor_code);
? ? ? ? ? ? ? console.log(data.field.specify_doctor_code);
? ? ? ? ? ? ??
? ? ? ? ? ? ? $.post('http://localhost:8080/hospital/appoint.do',data.field,function(flag){
? ? ? ? ? ? ? ? ? if(flag){
? ? ? ? ? ? ? ? ? ? ? layer.msg('操作成功',{icon: 6});
? ? ? ? ? ? ? ? ? ? ? console.log(data.field.doctor_code);
? ? ? ? ? ? ? ? ? ? ? layer.closeAll();//關(guān)閉彈出框
? ? ? ? ? ? ? ? ? ? ? table.reload('demo',{});//重新加載
? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? layer.msg('操作失敗',{icon: 5});
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? })
? ? ? ? ??
? ? ? ? ? ? ? return false;
? ? ? ? ? })? ? ? ? ??
? ? ? }
? })

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: