實現EasyUI Combogrid組件的多選和反選效果
1.html 代碼
<input id="roadClass" name="road" />
<div id="Toolbutton" style="padding: 5px;">
<label class="mr-10" id="allChoose">全選</label>
<label id="unChoose">反選</label>
</div>
2.js代碼
// 渠道來源
$('#roadClass').combogrid({
multiple: true, //設置允許多選
panelWidth:150,
panelHeight:300,
idField:'id',
textField:'text',
data:road, //調用json數據
toolbar:'#Toolbutton',
showHeader:false, //隱藏標頭
checkOnSelect:true,
columns:[[
{
field: 'id',
title: 'Toolbutton',
align:'center',
checkbox:true
},{
field: 'text',
title: '選擇',
width:120
}
]]
});
$('#roadClass').next('span').eq(0).children('input').attr('placeholder','所有');
var flag=false; //設置全選的開關
$('#allChoose').click(function(){
$(this).toggleClass('fontRed fb pointer'); //切換類，這塊設置的是全選點擊的樣式
if(flag==true){
$('#roadClass').combogrid('grid').datagrid('checkAll');
flag=false;
}else{
$('#roadClass').combogrid('grid').datagrid('uncheckAll');
flag=true;
}
});
$('#unChoose').click(function(){
var nodes=$('#roadClass').combogrid('grid').datagrid('getChecked'); //注意 combogrid中利用datagrid中方法的選取方式
var arr=[];
for(var i=0;i<nodes.length;i++){
var index=$('#roadClass').combogrid('grid').datagrid('getRowIndex',nodes[i]);
arr.push(index);
}
$('#roadClass').combogrid('grid').datagrid('checkAll');
for(var j=0;j<arr.length;j++){
$('#roadClass').combogrid('grid').datagrid('uncheckRow',arr[j]);
}
});
css代碼:
.pointer{cursor: pointer;}
.fb{font-weight: bold;}
.fontRed{ color: red;}
json數據:
var road=[
{"id":"1","text":"1"},
{"id":"2","text":"2"},
注意點：
1.一般情況下我們設置datagrid很少隱藏列標頭， 設置 showHeader:false,可以隱藏標頭
2.在任何未選中的情況下設置默認顯示‘’所有‘’ $('#roadClass').next('span').eq(0).children('input').attr('placeholder','所有');
3.combogrid情況下，利用datagrid中的方法: $('#roadClass').combogrid('grid').datagrid('方法');