jQuery树形下拉框插件multipleTree升级

| | | | 下一个

TreeSelect有如下主要特点(has the following main features)

兼容ie8以及各大主流浏览器

低侵入式使用

使用简单方便

继承了ztree高效渲染

使用方法

引入jquery,ztree,TreeSelect等js和css文件

<meta charset="UTF-8">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<html>

<head>

    <title>$Title$</title>

    <link type="text/css" rel="stylesheet" href="css/demo.css">

    <link type="text/css" rel="stylesheet" href="css/metroStyle/metroStyle.css">

    <script src="js/jquery-1.11.2.min.js"></script>

    <script type="text/javascript" src="js/jquery.ztree.all.js"></script>

    <script type="text/javascript" src="treeSelect.2.0.js"></script>

    <script>

    </script>

    <script type="text/javascript">

        /*节点列表（这里演示的是非异步方式的实现）*/

        var zNodes = [

            {id: 1, pId: 0, name: "火之国",   open: true},

            {id: 11, pId: 1, name: "木叶忍者", open: true },

            {id: 111, pId: 11, name: "鸣人" },

            {id: 112, pId: 11, name: "佐助"},

            {id: 12, pId: 1, name: "木叶暗部" },

            {id: 121, pId: 12, name: "鼬"},

            {id: 122, pId: 12, name: "卡卡西"},

            {id: 2, pId: 0, name: "沙之国", open: true},

            {id: 21, pId: 2, name: "千代婆婆"},

            {id: 26, pId: 2, name: "我爱罗"} ,

            {id: 22, pId: 2, name: "沙之国忍者", open: true},

            {id: 221, pId: 22, name: "手鞠"},

            {id: 222, pId: 22, name: "勘九郎"},

            {id: 3, pId: 0, name: "水之国"},

            {id: 4, pId: 0, name: "土之国"}

        ]; 

        /*注册下拉树方法也很简单*/

        $(document).ready(function () {

            $("textarea").treeSelect({

             

            zNodes: zNodes

        });

        });

        //-->

    </script>

</head>

<body style= "width: 1080px ;margin: 0 auto" ><br>

<!--在此元素上进行渲染下拉树-->

<textarea   style="width: 300px" checks="1,11,2,23"  type="text" readonly></textarea>

</body>

</html>

2.异步加载配置实例async example

var options = {

    async: {

        enable: true,

        url: "http://*****"

    }

}

3.配置文件详解

setting file detailed explanation

 var options = {

 

     async: {

         enable: true,

         url: "异步加载url地址"

     },

     chkStyle: "radio",

     /*radio：单选模式(Radio mode)，checkbox：多选模式(checkbox mode)，默认为多选*/

     radioType: "all",

     /*all：整个树只能有一个选中，level：在每一级节点范围内当做一个分组*/

     height: 433,

     /*容器高度默认200px*/

     callback: {

         onCheck: function() {} /*选中事件的回调*/

     },

     direction: "auto" /* up向上,down向下,auto自动适应  默认auto*/

 }

4.api列表

获取选中文本get selected text value

var obj=$("#yourContentId").treeSelect(options);

obj.text();

获取选中值

var obj=$("#yourContentId").treeSelect(options);

obj.val();

js给组件赋值

var obj=$("#yourContentId").treeSelect(options);

obj.val([1,2,3,4,5,6,7]);

默认选中值

方式1：

通过给dom元素设置属性checks来进行设置，格式为:checks="1,2,3,4,5"

例如：

<textarea style="width: 300px;overflow:hidden;"  **checks** ="1,11,2,23" type="text" readonly>

</textarea>

$("#yourContentId").treeSelect({checks:[1,2,3],.....});

搜索发现

下载榜观看榜