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

最新推荐文章于 2024-07-24 23:16:01 发布
最新推荐文章于 2024-07-24 23:16:01 发布
阅读量1.6w 收藏 8
点赞数 1
分类专栏： layui 文章标签： layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxysoid/article/details/79447525
版权

记录

<!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
    评论
专栏目录
C#获取gridview选择check打勾行数据
weixin_42219150的博客
07-02 1122
gridView2.FocusedRowHandle = -1;//取消行编辑模式 gridView2.Columns["CHECKED"].OptionsColumn.AllowEdit = false; gridView2.Columns["CHECKED"].OptionsColumn.ReadOnly = true; DataTable dt = (DataTable)gridView2.GridControl.Da...
layui 选择列表,打勾,点击确定返回数据的例子
10-16
在本示例中，我们探讨了如何在layui框架下实现一个功能齐全的选择列表，该列表允许用户打勾选中项，并在点击确定按钮时返回选定的数据。layui是一个流行的前端UI框架，提供了丰富的组件和功能，使得开发人员可以快速...
layUI中使用layer.open，在content打开数据表格，获取值并返回
热门推荐
withoutBugs的博客
12-14 1万+
在layUI编写的页面中，遇到这么一种情况，从一个页面中使用layer.open打开一个新窗口，新窗口中是一个数据表格，现在需要选中数据表格中的一列并获取它的值，以便下面这个选择按钮可以使用这个值进行后一步的操作。 如简单的选中之后显示选中数据的id。 首先在当前原始页面上，定义一个工具条 &lt;button class="layui-btn" data-type="simulate...
layui table 数据表格组件 JS获取表格已选中数据
php菜鸟技术天地
06-21 163
【代码】layui table 数据表格组件 JS获取表格已选中数据。
html列表点击选取的行,layui 弹框点击确定获取弹框列表中选中的table行数据
weixin_42121754的博客
06-18 878
//打开弹框layer.open({type: 2, title: ‘器具-设置发送人列表‘, content: ‘url‘ //弹框页面的地址, maxmin: true, area: [‘90%‘, ‘80%‘], btn: [‘确定‘, ‘取消‘], yes: function (index, layero) {var iframeWindow = window[‘layui-layer...
WebBrower控制LayUI 实现表格数据全选
gear1023的专栏
08-02 538
某网站用到了LayUI数据表格，想将此网站集成到Webbrowser里面，需要控制列表里的数据全选。理论上很简单，但队LayUI及其内嵌的Jquery不是太熟悉，只好请教度娘，查询了好一轮，找到几个介绍的挺好的，但不是很适合，改造下，还是基本可用，下面拿layUI官网来演示...............
layui 禁用时间选择框_layui table复选框禁止某几条勾选的实例，复选框打勾
weixin_39646628的博客
12-18 155
layui table复选框禁止某几条勾选的实例，复选框打勾Layui table复选框禁止勾选var list = [0,1,3];//获得禁用的tr的行index//遍历设置复选框禁用for(var i=0;i$(".layui-table tr[data-index="+list[i]+"] input[type='checkbox']").prop('disabled',true);$("...
layui数据表格单击行勾选（多选或者单选行）选项的功能
Welcome to my blog
10-31 9321
实现效果： 单击行，自动选中或取消勾选 –对于复选框按钮点击行的选中功能： //单击行勾选checkbox事件 $('.DetailDiv').on(&quot;click&quot;,&quot;.layui-table-body table.layui-table tbody tr&quot;, function () { /*当单击表格行时,把单选按钮设为选中状态*/ var tableDiv; var index ...
c# 复选框打勾返回数据问题
爱是永恒2020的博客
03-23 494
C# 复选框返回数据格式
layui复选框默认选中
weixin_48778400的博客
08-17 2696
layui复选框默认选中 table.render({ elem: '#projectMaterialList', cols: [[ //标题栏 {checkbox: true}, {type: 'numbers', title: '序号'}, {field: 'ID', width: 80, title: 'ID', hide: true} ]], done: function (res, page, count) { //这是换成自己的业务逻辑 var oldData = parent.
layui table勾选框的修改_layui的table单击行勾选checkbox功能方法
weixin_39564368的博客
12-20 872
如下所示：//单击行勾选checkbox事件$(document).on("click",".layui-table-body table.layui-table tbody tr", function () {var index = $(this).attr('data-index');var tableBox = $(this).parents('.layui-table-box');//存在...
HTML+JQuery 图片列表选中图片并打勾
04-11
在这个场景中，我们关注的是一个基于HTML和JQuery实现的图片列表，用户可以选中图片并进行“打勾”操作，类似于投票功能。这个功能常见于各种在线投票或评选活动中，允许用户通过视觉反馈来选择他们支持的选项。 ...
C#自写支持打勾的listview数据列表功能
11-11
用C#自已编写的支持打勾功能的listview数据列表，最适用于权限设置，因为C#中没有现成的完成 这种功能 的控件，索性自己想写一个，虽然不能和成品的控件相比 ，但我自己感觉已经满意了，必竟用起来感觉不错哦。
打勾 源代码
03-08
描述中提到的“批量列表打勾”，意味着我们要处理的不只是单个列表项的选择，而是能够一次性选择多个项目。这种批量操作通常需要通过某种用户输入触发，如点击一个全选按钮或者通过特定的快捷键。这里提到的“使用...
Layui修改表格分页为英文
qq_46517733的博客
07-24 382
主要记录初次使用Layui没有好好看官方文档踩坑，修改了源码才发现可以自定义使用的Layui版本2.9.14。
怎么在使用select2时，覆盖layui的下拉框样式
qq_36973384的博客
07-24 278
* 改变边框样式 *//* 蓝色边框 *//* 改变边框圆角 *//* 改变背景色 *//* 白色背景 *//* 改变字体样式 *//* 可以在这里添加更多的样式，比如padding, margin, color等 *//* 内边距 *//* 外边距 *//* 注意：改变下拉列表（即选项列表）的样式通常是不可能的，因为它是由浏览器控制的 */
Layui Selcet选择框动态选择问题
最新发布
m0_66648798的博客
07-24 515
时隔多日我也是重新回归写作，高考已经完毕，我将继续我的文章创作，今天我将分享的是我在开发我自己的一个新项目所遇到的问题，这里预告一下我的新项目: VitaApi管理系统 这个系统可以看作是萌新源api管理系统的延续，算是续作吧，也是我为了完成高考前想要写一套不错的api管理系统的愿望，大家后续可以关注一下进展，如果项目完工我也会在各大平台发布通知的。
layui改造优化ITtools技术笔记01—layui.js重要修正
吴加明的技术坊
07-24 316
一开始以为是单选按钮name属性值和单选按钮组的表格id的属性值不一致引起的问题，name中的连接符是$，id中的连接符是_。他们都是由后台代码自动生成的。input[name= xxx]，其中xxx含有特殊字符，如$等，导致layui渲染时，表达式出错，无法及时渲染。经过一番骚操作，用jq改写name值，提交数据前再恢复原值，一时也能接受，但有未可知后果。ittools教学平台自动生成的单选按钮渲染后无法切换选项。在name属性值外面加上单引号''可以解决问题。
layui 单选按钮变成打勾
10-26
因此，如果想要将单选按钮变成打勾，可以在单选按钮的点击事件中添加选中后的样式，例如添加一个class为layui-form-radioed的样式，来表示单选按钮被选中了。具体实现可以参考以下代码： $('.DetailDiv').on("click...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值