$('#cc').combobox({
formatter: function(row){
var opts = $(this).combobox('options');
return row[opts.textField];
}
});
上面是jQuery easyUI官網上找到的。
現在我們要做成如下這樣的：
![]()
則可以通過手動設置formatter樣式。
剖析頁面代碼發現，是把列表的text值放到了一個div下，則我們就組裝一個複選框與text同級就可以了
![]()
具體js代碼如下：
formatter: function(row){
var $d = $(this).combobox('getData');
var $o = $(this).combobox('options');
var $c = '<input type="checkbox"/>';
if($d[0].id==row[$o.valueField]){
$c = '<input type="checkbox" checked="checked"/>';
}
return $c+ row[$o.textField];
}
要想選擇panel面板複選框也跟着選擇則需要在combobox執行後加載如下代碼：
var $p = $("#zd_name").combobox('panel');/*選框對象——勾選複選框*/
$p.children("div").bind("click",function(){
var $i = $(this).find("input");
var $cis = $(this).attr("class");
if($cis.indexOf("combobox-item-selected")>0){
$i.removeAttr("checked");
}else{
$i.attr("checked","checked");
}
});
jQuery easyUI combobox
則可以通過手動設置formatter樣式。
剖析頁面代碼發現，是把列表的text值放到了一個div下，則我們就組裝一個複選框與text同級就可以了
具體js代碼如下：
formatter: function(row){
var $d = $(this).combobox('getData');
var $o = $(this).combobox('options');
var $c = '<input type="checkbox"/>';
if($d[0].id==row[$o.valueField]){
$c = '<input type="checkbox" checked="checked"/>';
}
return $c+ row[$o.textField];
}
要想選擇panel面板複選框也跟着選擇則需要在combobox執行後加載如下代碼：
var $p = $("#zd_name").combobox('panel');/*選框對象——勾選複選框*/
$p.children("div").bind("click",function(){
var $i = $(this).find("input");
var $cis = $(this).attr("class");
if($cis.indexOf("combobox-item-selected")>0){
$i.removeAttr("checked");
}else{
$i.attr("checked","checked");
}
});發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章