快捷導(dǎo)航

layUI使用layer.open,在content打開數(shù)據(jù)表格,獲取值并返回的方法

更新時(shí)間：2019年09月26日 08:44:04 作者：我要去南京

今天小編就為大家分享一篇layUI使用layer.open,在content打開數(shù)據(jù)表格,獲取值并返回的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

在layUI編寫的頁面中，遇到這么一種情況，從一個(gè)頁面中使用layer.open打開一個(gè)新窗口，新窗口中是一個(gè)數(shù)據(jù)表格，現(xiàn)在需要選中數(shù)據(jù)表格中的一列并獲取它的值，以便下面這個(gè)選擇按鈕可以使用這個(gè)值進(jìn)行后一步的操作。

如簡單的選中之后顯示選中數(shù)據(jù)的id。

首先在當(dāng)前原始頁面上，定義一個(gè)工具條

<button class="layui-btn" data-type="simulatePack">模擬</button>

在實(shí)現(xiàn)這個(gè)工具條的點(diǎn)擊操作--打開一個(gè)新的窗口

simulatePack: function(){ //模擬操作
    var checkStatus = table.checkStatus('box')
     ,data = checkStatus.data;
    layer.open({
     type:2
     ,area: ['800px', '600px']
     ,title:'請選擇'
     ,content: 'container.html'
     ,maxmin: true
     ,btn: ['確認(rèn)選擇', '關(guān)閉'] 
     ,yes: function(index, layero){
      var row = window["layui-layer-iframe" + index].callbackdata();
      layer.alert("get:"+row);
      // var row = $(layero).find("layui-layer-iframe")[0].contentWindow.callbackdata();
      //可以使用ajax請求對數(shù)據(jù)進(jìn)行進(jìn)一步處理
      layer.close(index);
     },btn2: function(index, layero){
      layer.close(index);
     }
    })
   },

這里的row是從新打開的窗口中返回的值。

在新窗口中，我定義了一個(gè)conId作為返回值，具體如下

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>layui</title>
 <meta name="renderer" content="webkit">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" rel="external nofollow" media="all">
</head>
<body>
<table class="layui-hide" id="container" lay-filter="container"></table>
<script src="/layuiadmin/layui/layui.js" charset="utf-8"></script>
<script>
 var conId;
 layui.use('table', function(){
  var table = layui.table;
 
  table.render({
   elem: '#container'
   ,url:'/container/listAll'
   ,page:true
   ,cols: [[
    {type:'radio'}
    ,{field:'id', title: 'ID'}
    ,{field:'length', title: '長度'}
    ,{field:'width', title: '寬度'}
    ,{field:'height', title: '高度'}
    ,{field:'weightLimit', title: '承重限制'}
    ,{field:'volumn', title: '體積'}
    ,{field:'height', title: '高度'}
   ]]
  });
 
  //監(jiān)聽行單擊事件（單擊事件為：rowDouble）
  table.on('row(container)',function(obj){
   var data = obj.data;
   conId = data.id;
   //標(biāo)注選中樣式
   obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
  });
 });
 var callbackdata = function () {
  return conId;
 }
</script>
 
</body>
</html>

這樣就實(shí)現(xiàn)了從content中的頁面中返回值的功能。

以上這篇layUI使用layer.open,在content打開數(shù)據(jù)表格,獲取值并返回的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: