layui
table表格展示效果代码前端代码后端代码：我们需要注意后端给前端返回数据的格式 获取radio标签所对应的数据条目问题描述解决办法 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")@ResponseBodypublic 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;});});
