之前发布过文章 xm-select下拉多选框，自定义按钮样式 http://www.ygbks.com/4017.html ，自定义按钮样式，下面继续加上自定义表格。
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="//libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!-- layui css -->
<!-- <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" />-->
<!-- layui js -->
<!-- <script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>-->
<!-- 下载地址 https://gitee.com/maplemei/xm-select/attach_files/591517/download/xm-select-v1.2.2.zip -->
<script src="https://maplemei.gitee.io/xm-select/xm-select.js" type="text/javascript" charset="utf-8"></script>
<style>
xm-select > .xm-icon{
display: none;
}
xm-select > .xm-label{
display: none;
}
.btn1{
background-color: #E74A33;
text-align: center;
color: #fff;
border-radius: 5px;
}
</style>
</head>
<body>
<div style="margin: 50px;width: 400px;">
<div>下拉框多选</div>
<div id="demo1" style="width: 70px;float: right;"></div>
<div>
<table border="1px solid #ccc" cellspacing="0" cellpadding="0" id="table1">
<tr id="table_title">
<td data-s="1" data-v="" data-disabled="1">姓名</td>
<td data-s="1" data-v="">年龄</td>
<td data-s="1" data-v="">性别</td>
<td data-s="1" data-v="" style="display: none;">出生日期</td>
</tr>
<tr>
<td>张三</td>
<td>13</td>
<td>男</td>
<td style="display: none;">1999-12-12</td>
</tr>
<tr>
<td>李四</td>
<td>16</td>
<td>女</td>
<td style="display: none;">1990-1-12</td>
</tr>
<tr>
<td>王五</td>
<td>11</td>
<td>男</td>
<td style="display: none;">1997-1-11</td>
</tr>
</table>
</div>
</div>
<script>
var options = {
el: '#demo1',
name: 'xmselectName',//表单的name属性
//layVerify: 'required',//必填项
//layVerType: 'tips',//提示类型 同layui
tips: '',
toolbar: {//工具条,全选,清空,反选,自定义
show: false,
list: [
'ALL',
'CLEAR',
'REVERSE',
{
name: '自定义',
icon: 'el-icon-star-off',
method(data){
alert('我是自定义的');
}
}
]
},
style: {
//width: '50px',
border: 'none'
},
theme: {
color: '#E74A33',
},
data: [],
//initValue: ['shuiguo','shucai'],//默认初始化,也可以数据中selected属性
//language: 'zn',//语言包
//filterable: true,//搜索功能
//autoRow: true,//选项过多,自动换行
// repeat: true,//是否支持重复选择
//max: 2,//最多选择2个
// template({ item, sels, name, value }){
// //template:自定义下拉框的模板
// //item.name +
// return '<span style="position: absolute; right: 10px; color: #8799a3">'+value+'</span>'
// },
on: function(data){
$('#table1').find('tr').find('td').hide();//先全部隐藏
console.log('已选择=', data.arr);
let arr = data.arr;
for(var j=0;j<arr.length;j++){
let v = arr[j].value;
$('#table1').find('tr').find('td:eq('+v+')').show();
}
},
done: function(){
console.log('创建完成');
$('#demo1 xm-select').append('<div class="btn1">筛选列</div>');
}
};
var demo1 = xmSelect.render(options)
setTimeout(function(){
//假设data是ajax 异步获取的
var data11 =[
//selected属性可以初始化下拉框
{name: '姓名', value: '1', selected:true},
{name: '年龄', value: '2', disabled: true},
{name: '性别', value: '3'},
{name: '职位', value: '4'},
{name: '出生日期', value: '5'},
];
//table表头给个序号
$('#table_title td').each(function(index){
$(this).attr('data-v', index);
});
let data=[];
$('#table_title td').each(function(){
let select_state = false;
let disabled_state = false;
if($(this).is(':visible')){
select_state = true;
}
if($(this).attr('data-disabled') == '1'){
disabled_state = true;
}
if($(this).attr('data-s') == '1'){
data.push({
name: $(this).html(),
value: $(this).attr('data-v'),
selected: select_state,
disabled: disabled_state
});
}
});
//模拟通过ajax 获取json数据,异步更新多选下拉框的值
demo1.update({data: data})
},100);
</script>
</body>
</html>效果图：
