layui table 中增加select
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="js/layui/src/css/layui.css" media="all">
<!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
<style>
.layui-table-view .layui-table[lay-size="sm"] .layui-select-title .layui-input {
height: 28px;
margin-top: -8px;
}
.layui-table-view .layui-table[lay-size="sm"] .layui-form-select dl dt,.layui-table-view .layui-form-select dl dd {
line-height: 28px;
}
.layui-table-view .layui-table[lay-size="sm"] .layui-form-select dl {
top: 28px;
}
.layui-table-view .layui-table .layui-select-title .layui-input {
height: 32px;
margin-top: -3px;
}
.layui-table-view .layui-table .layui-form-select dl dt,.layui-table-view .layui-form-select dl dd {
line-height: 32px;
}
.layui-table-view .layui-table .layui-form-select dl {
top: 32px;
}
.layui-table-view .layui-table[lay-size="lg"] .layui-select-title .layui-input {
height: 38px;
margin-top: 0;
}
.layui-table-view .layui-table[lay-size="lg"] .layui-form-select dl dt,.layui-table-view .layui-form-select dl dd {
line-height: 38px;
}
.layui-table-view .layui-table[lay-size="lg"] .layui-form-select dl {
top: 38px;
}
</style>
</head>
<body>
<button class="layui-btn" id="getCheckedData">获得表格选中行</button>
<table id="grid" lay-filter="grid"></table>
<script src="js/layui/src/layui.js" charset="utf-8"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
<script>
layui.use(['table', 'layer', 'element', 'jquery', 'form'], function (table, layer, element, $, form) {
var table = layui.table;
var form = layui.form;
var $ = layui.$;
var layer = layui.layer;
var element = layui.element;
var jsonData = [{
id: 1,
city: 20000,
}, {
id: 2,
city: 20001
}];
// 监听修改update到表格中
form.on('select(testSelect)', function (data) {
var elem = $(data.elem);
var trElem = elem.parents('tr');
var tableData = table.cache['grid'];
// 更新到表格的缓存数据中,才能在获得选中行等等其他的方法中得到更新之后的值
tableData[trElem.data('index')][elem.attr('name')] = data.value;
// 其他的操作看需求 TODO
});
$('#getCheckedData').click(function () {
// 验证一下下拉选择之后有没有作用到表格缓存数据
var checkStatus = table.checkStatus('grid'); //test即为基础参数id对应的值
console.log(checkStatus.data); //获取选中行的数据
console.log(checkStatus.data.length); //获取选中行数量,可作为是否有选中行的条件
console.log(checkStatus.isAll); //表格是否全选
});
var tableIns = table.render({
elem: '#grid',
width: 800,
height: 600,
data: jsonData,
done: function (res, curr, count) {
var tableElem = this.elem.next('.layui-table-view');
count || tableElem.find('.layui-table-header').css('overflow', 'auto');
layui.each(tableElem.find('select'), function (index, item) {
var elem = $(item);
elem.val(elem.data('value')).parents('div.layui-table-cell').css('overflow', 'visible');
});
form.render();
},
// size: 'lg',
cols: [[ //表头
{type: 'checkbox', fixed: true},
{field: 'id', title: 'ID', fixed: true, edit: true},
{
field: 'city',
title: '<a href="//baidu.com">城市</a>',
align: 'center',
width: 200,
templet: function (d) {
// 模板的实现方式也是多种多样,这里简单返回固定的
return '<select name="city" lay-filter="testSelect" lay-verify="required" data-value="' + d.city + '" >\n' +
' <option value=""></option>\n' +
' <option value="18000">北京</option>\n' +
' <option value="20000">上海</option>\n' +
' <option value="20001">广州</option>\n' +
' <option value="20002">深圳</option>\n' +
' <option value="20003">杭州</option>\n' +
' </select>';
}
}
]]
});
});
</script>
</body>
</html>