编程案例——layui的table表格并获取选中的数据、layui监控select下拉框并将隐藏的div显示

table表格展示

效果

代码

前端代码

<html>
<body>
<table id="demo" lay-filter="demo"></table>
</body>
<script src="/static/js/jquery-1.8.3.min.js"></script>
<script>
 layui.use('table', function () {
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#demo'
            , height: 465
            , url: '/sewage/manage/data' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {type: 'radio', title: '', width: 50, align: 'center', fixed: 'left'}
                , {field: 'facid', title: 'id', width: 80, align: 'center', sort: true}
                , {field: 'facname', title: '名称', width: 100, align: 'center'}
                , {field: 'time', title: '数据时间', width: 150, align: 'center', sort: true}
                , {field: 'recplan', title: '收款计划', width: 150, align: 'center'}
                , {field: 'recrecords', title: '应收记录', width: 150, align: 'center'}
                , {field: 'colrecords', title: '收款记录', width: 150, align: 'center'}
                , {field: 'outamount', title: '未收金额', width: 150, align: 'center', sort: true}
                , {field: 'ctdt', title: '创建时间', width: 150, align: 'center', sort: true}
            ]]
        });
    });
</script>
</html>

后端代码：我们需要注意后端给前端返回数据的格式

@RequestMapping("data")
    @ResponseBody
    public Object data(@RequestParam(value = "facid", required = false) String facId,
                       @RequestParam(value = "page", required = false) String current,
                       @RequestParam(value = "limit", required = false) String size,
                       @RequestParam(value = "startTime",required = false) String startTime,
                       @RequestParam(value = "endTime",required = false) String endTime) {
        if (StringUtils.isBlank(facId)) {
            facId = "111";
        }
        QueryWrapper<Wxdetails> query = Wrappers.query();
        query.eq("facid", facId);
        if(StringUtils.isNotBlank(startTime)){
            query.ge("time",startTime);
        }
        if(StringUtils.isNotBlank(endTime)){
            query.le("time",endTime);
        }
        Page<Wxdetails> page = new Page<>();
        page.setCurrent(Integer.valueOf(current));
        page.setSize(Integer.valueOf(size));
        Page<Wxdetails> data = wxdetailsService.page(page, query);
        Map<String, Object> map = new HashMap<>();
        map.put("code", 0); //返回数据格式
        map.put("msg", "");//返回数据格式
        map.put("count", data.getTotal());//返回数据格式
        map.put("data", data.getRecords());//返回数据格式
        return map;
    }

获取radio标签所对应的数据条目

问题描述

解决办法

 var selectData = layui.table.checkStatus('demo').data;
        console.log(selectData); 

layui监控select下拉框并将隐藏的div显示

问题描述

选择"江苏大众"前

选择"江苏大众"后

代码

html

        <div class="layui-form-item">
            <label class="layui-form-label">选择公司</label>
            <div class="layui-input-block">
                <select name="interest" id="companyId" lay-filter="company">
                    <option value=""></option>
                    <option value="0">大众嘉定</option>
                    <option value="1">江苏大众</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item" style="display: none;" id="dwId">
            <label class="layui-form-label">选择单位</label>
            <div class="layui-input-block">
                <select name="interest">
                    <option value=""></option>
                    <option value="0">三八河</option>
                    <option value="1">邳州</option>
                    <option value="2">贾汪</option>
                    <option value="3">沛县</option>
                    <option value="4">青山泉</option>
                    <option value="5">东海</option>
                </select>
            </div>
        </div>

js

<script>
    layui.use('form', function () {
        var form = layui.form;
        //监听提交
        form.on('select(company)', function (data) {
            // console.log(data.elem); //得到select原始DOM对象
            // console.log(data.value); //得到被选中的值
            // console.log(data.othis); //得到美化后的DOM对象
            var value = data.value;
            if (value == "1") {
                $("#dwId").show();
            } else if (value == "0") {
                $("#dwId").hide();
            }
        });
        form.on('submit(formData)', function (data) {
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });