编程案例——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>

<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;});});

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

layui下拉框怎么获取自定义值_layui如何得到select下拉框选中的值？
layui如何得到select下拉框选中的值?下面本篇文章介绍一下layui取得select下拉框选中值的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. layui如何得到se ...
php 获取下拉框选中的文本,jQuery实现select下拉框获取当前选中的文本
本文主要介绍了jQuery实现select下拉框获取当前选中文本.值.索引以及添加/删除Select的Option项的相关知识,具有很好的参考价值.下面跟着小编一起来看下吧,希望能帮助到大家. 话不多 ...
JQuery从Excel表中获取数据添加到select下拉框多选的实现
JS代码如下 function importf(excel) {var perids = [];//for循环遍历Excel表中的数据,取出需要的列for(var i = 0 ; i < exc ...
python获取select选中的值_Python3.x：遍历select下拉框获取value值
Python3.x:遍历select下拉框获取value值 Select提供了三种选择方法: # 通过选项的顺序,第一个为 0 select_by_index(index) # 通过value属性 s ...
LayUi数据表格数据太多导致下拉框卡顿问题
LayUi数据表格数据太多导致下拉框卡顿问题 layui数据表格(详见官网) 根据官网示例做出数据表格示例根据官网表格展示在layui官网数据表格示例中 https://www.layui.c ...
layui 下拉框空选项不显示_layui下select下拉框不显示或没有效果
Layui会对select.checkbox.radio等原始元素隐藏,从而进行美化修饰处理.但这需要依赖于form组件,所以你必须加载 form,并且执行一个实例.值得注意的是:导航的Hover效果 ...
Vue+EleMentUI实现el-table-colum表格select下拉框可编辑
说明: 在进行采购入库的过程中,有必要对表格中的一行进行快速编辑保存,节省时间,提高工作效率!,而不是每次编辑都要弹窗才可编辑源码:https://gitee.com/charlinchenlin/ ...
layui怎么给下拉框赋值_layui给select下拉框赋值
转: layui给select下拉框赋值 //重新渲染表单函数 function renderForm() { layui.use('form', function() { var form = la ...
layui给select下拉框赋值
layui给select下拉框赋值 //重新渲染表单函数function renderForm() {layui.use('form', function() {var form = layui.fo ...

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

layui

table表格展示

效果

代码

前端代码

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

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

问题描述

解决办法

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

问题描述

代码

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

最新文章

热门文章