layui 选择列表，打勾，点击确定返回数据

最新推荐文章于 2024-06-04 09:48:28 发布

lxysoid

最新推荐文章于 2024-06-04 09:48:28 发布

阅读量1.6w

点赞数 1

分类专栏： layui 文章标签： layui

本文链接：https://blog.csdn.net/lxysoid/article/details/79447525

版权

layui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

记录

<!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>文件数据</title>
    <link href="~/Content/Base/layui/css/layui.css" rel="stylesheet" type="text/css" />
    <script src="~/Content/Base/layui/layui.js" type="text/javascript"></script>
    <script src="../../../../Content/Views/js/jquery-1.8.3.min.js" type="text/javascript"></script>
</head>
<body>
<style type="text/css">
        body
        {
            background-color: #F0F0F0;
        }
        #content
        {
            margin-top: 2px;
        }
        #btns
        {
            float:left;
        }
        #btns .layui-btn
        {
            margin-top: 5px;
        }
        #Addbtn
        {
            margin-left: 20px;
        }
        .layui-btn
        {
            background-color: #3385ff;
            width: 120px;
        }
        #datatable
        {
            background-color: White;
            margin-top: 5px;
            clear:both;
        }
        .topbox
        {
            height: 50px;
            background-color: #ffffff;
        }
        .searchbox
        {
            float: right;
            margin-right: 20px;
        }
        .searchinput, .searchbtn
        {
            float: left;
            margin-top: 5px;
        }
        .searchinput
        {
            width: 300px;
            margin-left: 20px;
        }
        .searchbtn button
        {
            width: 80px;
        }
    </style>
     <div id="content">
     <div class="topbox">
        <div class="searchinput">
            <input type="text" name="name" class="layui-input" id="SearchText" />
        </div>
        <div class="searchbtn">
            <button type="button" class="layui-btn" onclick="BtnSearchDataListInfo()">
                搜索</button></div>
        </div>
        <div id="datatable">
            <table id="demo" lay-filter="test" style="height:100%">
            </table>
        </div>
    </div>

    <script type="text/html" id="barDemo">
            <a class="layui-btn-mini" lay-event="Select" style="color:#3385ff">选择</a><span style="color:#3385ff">/</span>
    </script>
    <script type="text/javascript">
        layui.use('form', function () {
            var form = layui.form;
        });
        var table;
        var datas = null;
        function BindData() {
            $.ajax({
                cache: false,
                async: false,
                url: '/ModelList/BindModelListView',
                type: 'get',
                dataType: 'json',
                success: function (data) {
                    DataTable(data);
                }, error: function (data) {
                    alert(JSON.stringify(data));
                }
            })
        }
        function DataTable(data) {
            layui.use('table', function () {
                table = layui.table;
                window.demoTable = table.render({
                    id: 'tempData',
                    elem: '#demo',
                    data: data,
                    cols: [[
                            { checkbox: true, title: '全选', width: 33 }
                            , { field: 'modelname', title: '名称', width: 260, align: 'left' }
                            , { field: 'name', title: '产品', width: 200, align: 'left', templet: '#ProductTpl' }
                            , { field: 'version', title: '版本', width: 200, align: 'left' }
                             , { field: 'mixname', title: '对象', width: 150, align: 'left' }
                            , { field: 'methodsName', title: '方法', width: 150, align: 'right' }
                            , { field: 'attributename', title: '属性', width: 180, align: 'left', templet: '#FeaturesTpl' }
                    //, { field: 'name', title: '文件', width: 260, align: 'left', templet: '#DataListTpl' }
                    //                            , { field: 'name', title: '文件', width: 260, align: 'left',templet:'#DataListTpl' }
                            , { field: 'ModelListType', title: '类型', width: 150, align: 'left' }
                           // , { field: '', title: '操作', width: 300, align: 'center', toolbar: '#barDemo', fixed: 'right' }
                                  ]],
                    height: 500,
                    even: true,
                    page: true

                });
                //监听工具条
                table.on('tool(test)', function (obj) {
                    var data = obj.data;
                    if (obj.event === 'Select') {
                        alert("select");
                    }
                });
            })

        }
        BindData();

        var callbackdata = function () {
            var checkStatus = table.checkStatus('tempData')
            , data = checkStatus.data;
            return data;
        }
    </script>
</body>
</html>

此页面为弹出框页面，选择某一列后，点击确定返回数据

layui.use('layer', function () {
                var layer = layui.layer;
                layer.open({
                    cache: false,
                    type: 2,
                    title: '对比',
                    skin: 'layui-layer-tb_125',
                    area: ['600px', '250px'],
                    content: '../ModelList/ModelMapNodeAttributeContrastForm',
                    moveOut: true,
                    zIndex: layer.zIndex,
                    btn: ['确定', '关闭'],
                    yes: function (index) {
                        //当点击‘确定’按钮的时候，获取弹出层返回的值
                        var resdata = window["layui-layer-iframe" + index].callbackdata();
                        //最后关闭弹出层
                        layer.close(index);
                        layui.use('layer', function () {
                            var layer = layui.layer;
                            layer.open({
                                type: 2,
                                title: '查看',
                                skin: 'layui-layer-tb_125',
                                area: ['600px', '250px'],
                                content: '../ModelList/ModelMapNodeAttributeDataForm?ContrastModelId=' + resdata["0"].modelid + '&ContrastModelName=' + resdata["0"].modelname + '&ContrastProductId=' + resdata["0"].productconfigid + '&aaaaaa=1',
                                moveOut: true,
                                zIndex: layer.zIndex,
                                cancel: function (index, layero) {
                                    layer.close(index);
                                    return true;
                                }, end: function () {

                                }
                            });
                        });


                    },
                    cancel: function (index) {
                        //右上角关闭回调
                        layer.close(index);
                    }
                });
            });

lxysoid

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
layui 选择列表，打勾，点击确定返回数据

记录&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt; ..
复制链接

扫一扫