关于layui重载后台无法获取到值

22 篇文章 0 订阅
5 篇文章 0 订阅

说起这个layui就是一个坑,在网上搜索很多这方面的资料然后还是没有解决!最后直接复制官网的没想到竟然后台可以取值了,后台我是用控制器获取值然后再传到前台的后台数据为josn是官方的格式
废话不多说,直接上代码
1.引用样式

口袋资料
<link href="~/Content/layui/css/layui.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="/static/admin/css/admin.css" />
<link href="~/Content/layui/css/layui.css" rel="stylesheet" />
<script src="~/Content/layui/layui.js"></script>
<script src="~/Content/js/jquery-2.1.1.js"></script>
<script src="/Content/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/admin/js/common.js" type="text/javascript" charset="utf-8"></script>
<div class="page-content-wrap">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-inline tool-btn">
                <button class="layui-btn layui-btn-small layui-btn-normal go-btn hidden-xs" data-url="AddUser"><i class="layui-icon">&#xe654;</i></button>
                <button class="layui-btn layui-btn-small layui-btn-warm listOrderBtn hidden-xs" data-url="/admin/category/listorderall.html"><i class="iconfont">&#xe656;</i></button>
            </div>
            <div class="demoTable">
                搜索ID:
                <div class="layui-inline">
                    <input class="layui-input" name="id" id="demoReload" autocomplete="off">
                </div>
                <button class="layui-btn" data-type="reload">搜索</button>
            </div>
        </div>
    </form>
    <div class="layui-form" id="table-list">
        <div class="layui-form">
            <table id="demo" lay-filter="test"></table>
        </div>

    </div>
</div>



<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    layui.use('table', function () {
        var table = layui.table;

        table.render({
            elem: '#demo'
            , url: '/UserInfo/QueryUser'
            , id: 'test'
            , height: 'full-200'
            , method: 'post'  //提交方式
            , limit: 5//一页能够显示的最大数目
            , toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
            , defaultToolbar: ['filter', 'exports', 'print'] //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可
            , title: '用户数据表'
            , cols: [[
                { type: 'checkbox', fixed: 'left' }

                , { field: 'userId', width: 100, title: 'userId', sort: true }

                , { field: 'userNo', width: 100, title: '用户名称', sort: true }

                , { field: 'userName', width: 100, title: '姓名', sort: true }

                , { field: 'Addresss', width: 100, title: '地址', sort: true }

                , { field: 'hobby', width: 100, title: '爱好', sort: true }


                , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 }
            ]]
            , page: true

        });
       //搜索   这是重要
        var $ = layui.$, active = {
            reload: function () {
                var demoReload = $('#demoReload');

                //执行重载
                table.reload('test', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                      
                            id: demoReload.val()
                        
                    }
                }, 'data');
            }
        };
       // 这个点击事件必须写进去  不然执行不到  这点是最坑的地方  然后其余仿照写  没有问题
        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了:' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                layer.prompt({
                    formType: 2
                    , value: data.userName
                }, function (value, index) {
                    obj.update({
                        userName: value
                    });
                    layer.close(index);
                });
            }
        });
    });
</script>
最后还有一个小问题 就是button哪里 如果不加属性type="button" 会导致进入二次后台 第一次有值 第二次没有
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值