雙欄穿梭選擇框。 用直觀的方式在兩欄中移動(dòng)元素,完成選擇行為。 選擇一個(gè)或以上的選項(xiàng)后,點(diǎn)擊對(duì)應(yīng)的方向鍵,可以把選中的選項(xiàng)移動(dòng)到另一欄。
<body>
<div id="transferTable"></div>
</body>
<script type="text/javascript">
layui.config({
base:'js/layui_exts/'
}).use('transferTable', function(){
var transferTable = layui.transferTable,$=layui.$;
var cols = [
{checkbox: true, fixed: true}
,{field:'id', title: 'ID'}
,{field:'username', title: '用戶(hù)名'}
,{field:'sex', title: '性別'}
]
transferTable.render({
elem: '#transferTable'
,url: ['api.php?t=1','api.php?t=2']
,cols: [[cols],[cols]]
,page: [true,true]
,id:['transferTable_1_1','transferTable_2_2']
,height:[500,500]
,where:{id:'1,2,3'}
,id_name:'id'
})
$('#reload').on('click',function(){
transferTable.reload('transferTable_1_1',{
page:{curr:1},
where:{
title: $('#title').val(),
sex: $('#sex').val()
}
})
})
$('#submit').on('click',function(){
var id = transferTable.get('transferTable_2_2');
layer.msg(JSON.stringify(id));
})
})
</script>