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({
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({
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({
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({
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({
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展开或者关闭
完毕。