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