弹出选择:表格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>    

  <title>SelectGrid 弹出选择表格</title>    

  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

  <link href="../demo.css" rel="stylesheet" type="text/css" />

      <script src="../../scripts/boot.js" type="text/javascript"></script>        

</head>

  <body>    

  <h1>SelectGrid 弹出选择表格</h1>     

      <input id="btnEdit1" class="mini-buttonedit" onbuttοnclick="onButtonEdit" name="a" textName="b"/>           

<script type="text/javascript">        

   mini.parse();

        function onButtonEdit(e) {            

     var btnEdit = this;            

    mini.open({                

      url: bootPATH + "../demo/CommonLibs/SelectGridWindow.html",                

      title: "选择列表",                

      width: 650,                

      height: 380,                

      ondestroy: function (action) {                    

        //if (action == "close") return false;                    

         if (action == "ok") {                        

          var iframe = this.getIFrameEl();                        

          var data = iframe.contentWindow.GetData();                        

          data = mini.clone(data);    //必须                        

          if (data) {                            

            btnEdit.setValue(data.id);                            

            btnEdit.setText(data.name);                        

          }                    

        }

                }            

     });                                

  }       

</script>

    <div class="description">        

  <h3>Description</h3>            

 </div>

</body>

</html>

转载于:https://www.cnblogs.com/szqblog/p/3269470.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以使用 layui 的 table 模块和 layer 模块来实现弹出表格选择的功能。具体实现步骤如下: 1. 在页面中引入 layui 的 table 和 layer 模块 ``` <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/layui@2.5.6/dist/css/layui.css"> <script src="//cdn.jsdelivr.net/npm/layui@2.5.6/dist/layui.js"></script> ``` 2. 创建一个按钮,当点击该按钮时弹出表格选择窗口 ``` <button class="layui-btn" id="selectBtn">选择</button> ``` 3. 编写 JavaScript 代码,在点击按钮时弹出表格选择窗口,并在选择完成后将选择的数据返回给页面 ``` layui.use(['table', 'layer'], function(){ var table = layui.table; var layer = layui.layer; // 创建表格实例 var tableIns = table.render({ elem: '#tableId', url: '数据接口地址', cols: [[ { type: 'checkbox', fixed: 'left' }, { field: 'id', title: 'ID', width: 80 }, { field: 'name', title: '名称', width: 120 }, { field: 'age', title: '年龄', width: 80 }, { field: 'sex', title: '性别', width: 80 } ]], page: true, limit: 10, height: 'full-200' }); // 点击选择按钮时弹出表格选择窗口 $('#selectBtn').on('click', function(){ layer.open({ type: 1, title: '选择数据', area: ['800px', '500px'], content: $('#tableDiv'), btn: ['确定', '取消'], yes: function(index, layero){ // 获取已选中的数据 var checkData = table.checkStatus('tableId').data; // 将已选中的数据返回给页面 console.log(checkData); layer.close(index); }, btn2: function(index, layero){ // 取消选择时关闭窗口 layer.close(index); } }); }); }); ``` 在上述代码中,`#tableId` 是表格的 ID,`url` 是表格的数据接口地址。`#tableDiv` 是包含表格的 div 元素。 需要注意的是,表格需要设置 `lay-filter` 属性,用于获取已选中的数据。在弹出窗口时,需要将包含表格的 div 元素作为内容传递给 `layer.open` 方法。在点击确定按钮时,可以通过 `table.checkStatus` 方法获取已选中的数据,并将其返回给页面。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值