编程案例——layui的table表格并获取选中的数据、layui监控select下拉框并将隐藏的div显示
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;});});
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！