TextBox下拉TREE树选择器
第一步：Scripts/BudBox.js Scripts.rar里面包含了JQURY和 BudBox.JS
第二步：添加引用和CSS javascript的引用
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/BudBox.js" type="text/javascript"></script>
<script type="text/javascript">
function showBox() {
$("#showBOX").BuddyBox("#Div_show", { autoHide: true }, "showBOX", "0");
$("#showBOX").pbShow();
}
function showBox2() {
$("#txtAssetType").BuddyBox("#Dive_show2", { autoHide: true }, "txtAssetType", "0");
$("#txtAssetType").pbShow();
}
function test(obj) {
var Div_show = document.getElementById("Div_show");
var obj_all = Div_show.getElementsByTagName("INPUT");
for (i = 0; i < obj_all.length; i++) {
if (obj_all[i].type == "checkbox")
if (obj_all[i].checked == true) {
// alert(obj_all[i].nextSibling.innerText);target
var deptid = deptid + "," + obj_all[i].nextSibling.target
document.cookie = "deptid=" + deptid;
// alert(obj_all[i].nextSibling.target)
}
}
}
function test1() {
var obj_all = document.getElementsByTagName("INPUT");
for (i = 0; i < obj_all.length; i++) {
if (obj_all[i].type == "checkbox") {
obj_all[i].nextSibling.href = "closehidden.html";
// alert(obj_all[i].nextSibling.target)
}
}
}
function deptType(obj) {
var Div_show = document.getElementById("Dive_show2");
var obj_all = Div_show.getElementsByTagName("INPUT");
for (i = 0; i < obj_all.length; i++) {
if (obj_all[i].type == "checkbox")
if (obj_all[i].checked == true) {
// alert(obj_all[i].nextSibling.innerText);target
var deptid = deptid + "," + obj_all[i].nextSibling.target
document.cookie = "deptTypeId=" + deptid;
// alert(obj_all[i].nextSibling.target)
}
}
}
function deptType2() {
var obj_all = document.getElementsByTagName("INPUT");
for (i = 0; i < obj_all.length; i++) {
if (obj_all[i].type == "checkbox") {
obj_all[i].nextSibling.href = "closehidden.html";
// alert(obj_all[i].nextSibling.target)
}
}
}
function checkParent(obj) {
while (obj != null) {
var tagName = obj.tagName.toLowerCase();
if (tagName == "div" && obj.id == "TreeView1") {
return;
}
if (tagName == "table") {
var checkBox = obj.getElementsByTagName("INPUT");
if (checkBox.length > 0) {
checkBox[0].checked = true;
document.getElementsByTagName("TextBox2").value = checkBox[0].nextSibling.innerText + "," + document.getElementsByTagName("TextBox2").value;
document.cookie = "TextBox2=" + escape(document.getElementsByTagName('TextBox2').value);
return;
}
obj = obj.parentElement.previousSibling;
}
else
obj = obj.parentElement;
}
}
function client_OnTreeNodeChecked() {
var obj = window.event.srcElement;
var treeNodeFound = false;
var checkedState;
if (obj.tagName == "INPUT" && obj.type == "checkbox") {
var treeNode = obj;
checkedState = treeNode.checked;
if (checkedState) {
checkParent(obj);
}
do {
obj = obj.parentElement;
}
while (obj.tagName != "TABLE")
var parentTreeLevel = obj.rows[0].cells.length;
var parentTreeNode = obj.rows[0].cells[0];
var tables = obj.parentElement.getElementsByTagName("TABLE");
var numTables = tables.length
if (numTables >= 1) {
for (i = 0; i < numTables; i++) {
if (tables[i] == obj) {
treeNodeFound = true;
i++;
if (i == numTables) {
return;
}
}
if (treeNodeFound == true) {
var childTreeLevel = tables[i].rows[0].cells.length;
if (childTreeLevel > parentTreeLevel) {
var cell = tables[i].rows[0].cells[childTreeLevel - 1];
var inputs = cell.getElementsByTagName("INPUT");
inputs[0].checked = checkedState;
}
else {
return;
}
}
}
}
}
}
window.onload = function () {
return test1()
}
</script>
<style type="text/css">
.test
{
background-color: #FFFFFF;
overflow: auto;
padding: 10px 8px 6px;
border: 1px solid #cccccc;
margin-bottom: 10px;
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#FFFFFF,endColorStr=#B1D5FB); /*IE6*/
background: -moz-linear-gradient(top,#5F90BF,#5F90BF); /*非IE6的其它*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5F90BF), to(#5F90BF)); /*非IE6的其它*/
}
.style1
{
color: #FFFFFF;
}
</style>
第三步：程序里添加TEXTBOX
<asp:TextBox ID="showBOX" runat="server" onclick="showBox()" Width="114px" Text="---请选择---"></asp:TextBox> <div id="Div_show" style="display: none; width: 102px; height: 80px" class="test"> <asp:TreeView ID="TreeView1" runat="server" onclick="javascript:client_OnTreeNodeChecked();" NodeIndent="10" ShowCheckBoxes="All" ShowLines="True"> </asp:TreeView> </div>
第四步：后台绑定TREE的绑定代码如：
protected void Page_Load(object sender, EventArgs e) { if (TreeView1.Nodes.Count == 0) { BindTreeView(TreeView1); } if (TreeView2.Nodes.Count == 0) { BindTreeViewByDeptTypeId(TreeView2); } } //tree1
private void BindTreeView(TreeView treeview) { //创建第一级树 使用店 SqlDataReader dr = Maticsoft.DBUtility.DbHelperSQL.ExecuteReader("SELECT * FROM mDepartment where len(DeptId)=2 "); if (dr.HasRows) { while (dr.Read()) { TreeNode rootNode = new TreeNode(); rootNode.Value = dr["DeptId"].ToString(); rootNode.Text = dr["DeptName"].ToString(); rootNode.Target = dr["DeptId"].ToString(); rootNode.NavigateUrl = dr["DeptId"].ToString(); rootNode.SelectAction = TreeNodeSelectAction.Expand;//单击节点展开字节点 rootNode.Expanded = false; treeview.Nodes.Add(rootNode); } } } //tree2 private void BindTreeViewByDeptTypeId(TreeView treeview) { //创建第一级树 资产类型 SqlDataReader dr = Maticsoft.DBUtility.DbHelperSQL.ExecuteReader("SELECT * FROM mAssetType where SUBSTRING(AssetTypeId,1,4)=0103 and LEN(AssetTypeId)=6"); if (dr.HasRows) { while (dr.Read()) { TreeNode rootNode = new TreeNode(); rootNode.Value = dr["AssetTypeId"].ToString(); rootNode.Text = dr["AssetTypeName"].ToString(); rootNode.Target = dr["AssetTypeId"].ToString(); rootNode.NavigateUrl = dr["AssetTypeId"].ToString(); rootNode.SelectAction = TreeNodeSelectAction.Expand;//单击节点展开字节点 rootNode.Expanded = false; treeview.Nodes.Add(rootNode); } } } //tree1的子节点
private void CreateChildNode(TreeNode parentNode) { //创建第二级树 保管课别 string parentNodeValue = parentNode.Value; SqlDataReader dr = Maticsoft.DBUtility.DbHelperSQL.ExecuteReader("SELECT * FROM [AffairMS].[dbo].[mDepartment] where SUBSTRING(DeptId,1,2)='" + parentNodeValue + "' and LEN(DeptId)=6 "); if (dr.HasRows) { while (dr.Read()) { TreeNode rootNode = new TreeNode(); rootNode.Value = dr["DeptId"].ToString(); rootNode.Text = dr["DeptName"].ToString(); rootNode.Target = dr["DeptId"].ToString(); rootNode.NavigateUrl = dr["DeptId"].ToString(); rootNode.Expanded = false; parentNode.ChildNodes.Add(rootNode); } } }