ligerui版本:1.1.0
在線測試例子:http://vazumi.net.s1.kingidc.net/example/comboboxtree.htm
截圖:
代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<link href="../lib/ligerUI/skins/aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
<script src="../lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="../lib/ligerUI/js/plugins/ligerTree.js" type="text/javascript"></script>
<script src="../lib/ligerUI/js/plugins/ligerComboBox.js" type="text/javascript"></script>
<script type="text/javascript">
$(function ()
{
//-------------------------------------------------------------------------------------------
$("#txt1").ligerComboBox({
width: 200,
selectBoxWidth: 200,
selectBoxHeight: 200,
textField:'text', valueField: 'id',treeLeafOnly:false,
tree: { url: "/service/DataHandler.ashx?View=treeunit", checkbox: false,
textFieldName:"text",
idFieldName:"id",
parentIDFieldName:"pid"
}
});
//-------------------------------------------------------------------------------------------
$("#txt2").ligerComboBox({
width: 200,
selectBoxWidth: 200,
selectBoxHeight: 200,
textField:'text', valueField: 'id',treeLeafOnly:false,
tree: { url: "/service/DataHandler.ashx?View=treeunit", checkbox: true,
textFieldName:"text",
idFieldName:"id",
parentIDFieldName:"pid"
}
});
//-------------------------------------------------------------------------------------------
$("#txt3").ligerComboBox({
width: 200,
selectBoxWidth: 200,
selectBoxHeight: 200,
textField:'text', valueField: 'id',treeLeafOnly:false,
tree: { url: "/service/DataHandler.ashx?View=treeunit", checkbox: false,
textFieldName:"text",
idFieldName:"id",
parentIDFieldName:"pid",
onSuccess:function(){
$(".l-expandable-close","#div3").click();
$("#txt3_val").val("");
$("#txt3").val("");
}
}
});
//-------------------------------------------------------------------------------------------
$("#txt4").ligerComboBox({
width: 200,
selectBoxWidth: 200,
selectBoxHeight: 200,
textField:'text', valueField: 'id',treeLeafOnly:false,
tree: { url: "/service/DataHandler.ashx?View=treeunit", checkbox: true,
textFieldName:"text",
idFieldName:"id",
parentIDFieldName:"pid",
onSuccess:function(){
$(".l-expandable-close","#div4").click();
}
}
});
//-------------------------------------------------------------------------------------------
$("#txt5").ligerComboBox({
width: 200,
selectBoxWidth: 200,
selectBoxHeight: 200,
textField:'text', valueField: 'id',treeLeafOnly:false,
tree: { url: "/service/DataHandler.ashx?View=treeunit", checkbox: true,
textFieldName:"text",
idFieldName:"id",
parentIDFieldName:"pid",
onSuccess:function(){
$(".l-expandable-close","#div5").each(function () //這個選擇寫法判斷的比較爛
{
if ($(this).next().next().next().text()=="總經理室")
{
$(this).click();
return;
}
});
}
}
});
//-------------------------------------------------------------------------------------------
});
</script>
</head>
<body style="padding: 20px">
<h3 style="padding:5px">ligerui 1.1.0 下拉樹的幾個例子</h3>
<div style="float:left" id="div1">不帶復選框(默認json全收縮) <input type="text" id="txt1"/><input type="button" class="l-button" onclick="alert($('#txt1_val').val());" value="獲取值"/></div>
<div style="float:left" id="div2">帶復選框(默認json全收縮) <input type="text" id="txt2"/><input type="button" class="l-button" onclick="alert($('#txt2_val').val());" value="獲取值"/></div>
<div style="float:left" id="div3">不帶復選框(加載后全展開) <input type="text" id="txt3"/><input type="button" class="l-button" onclick="alert($('#txt3_val').val());" value="獲取值"/></div>
<div style="float:left" id="div4">帶復選框(加載后全展開) <input type="text" id="txt4"/><input type="button" class="l-button" onclick="alert($('#txt4_val').val());" value="獲取值"/></div>
<div style="float:left" id="div5">帶復選框(加載后展開第一級(總經理室))<input type="text" id="txt5"/><input type="button" class="l-button" onclick="alert($('#txt5_val').val());" value="獲取值"/></div>
</body>
</html>
說明:
json里面有玄機，有一個字段是 isexpand,值為false,透過這個東西,可以控制某個節點展開還是關閉
如果數據源不這么做，也有辦法，例子里面3，4，5都是加載完數據再對tree展開或者關閉
完畢。