ligerui下拉框加载tree的几个例子

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展开或者关闭

完毕。

原文地址:https://www.cnblogs.com/vazumi/p/2313074.html