kendo-ui下拉树形选择(DropDownTreeView)

摘要：

　　最近项目中有一个特殊的需求，下拉选择部门，但是部门的层级关系要在下来框中体现出来，如下图

下面我就把实现的过程分享给大家，代码如下：

dropdowntreeview.js

/*
 *
 * DropDownTreeView
 * https://github.com/jsExtensions/kendoui-extended-api
 *
 */
var DropDownTreeView = kendo.ui.Widget.extend({
    _uid: null,
    _treeview: null,
    _dropdown: null,
    _v: null,

    init: function (element, options) {
        var that = this;

        kendo.ui.Widget.fn.init.call(that, element, options);

        that._uid = new Date().getTime();

        $(element).append(kendo.format("<input id='extDropDown{0}' class='k-ext-dropdown'/>", that._uid));
        $(element).append(kendo.format("<div id='extTreeView{0}' class='k-ext-treeview' style='z-index:1;'/>", that._uid));

        // Create the dropdown.
        that._dropdown = $(kendo.format("#extDropDown{0}", that._uid)).kendoDropDownList({
            dataSource: [{ text: "", value: "" }],
            dataTextField: "text",
            dataValueField: "value",
            open: function (e) {
                //to prevent the dropdown from opening or closing. A bug was found when clicking on the dropdown to
                //"close" it. The default dropdown was visible after the treeview had closed.
                e.preventDefault();
                // If the treeview is not visible, then make it visible.
                if (!$treeviewRootElem.hasClass("k-custom-visible")) {
                    // Position the treeview so that it is below the dropdown.
                    $treeviewRootElem.css({
                        "top": $dropdownRootElem.position().top + $dropdownRootElem.height(),
                        "left": $dropdownRootElem.position().left
                    });
                    // Display the treeview.
                    $treeviewRootElem.slideToggle('fast', function () {
                        that._dropdown.close();
                        $treeviewRootElem.addClass("k-custom-visible");
                    });
                }
            }
        }).data("kendoDropDownList");

        if (options.dropDownWidth) {
            that._dropdown._inputWrapper.width(options.dropDownWidth);
        }

        var $dropdownRootElem = $(that._dropdown.element).closest("span.k-dropdown");

        // Create the treeview.
        that._treeview = $(kendo.format("#extTreeView{0}", that._uid)).kendoTreeView(options.treeview).data("kendoTreeView");
        that._treeview.bind("select", function (e) {
            // When a node is selected, display the text for the node in the dropdown and hide the treeview.
            $dropdownRootElem.find("span.k-input").text($(e.node).children("div").text());
            $treeviewRootElem.slideToggle('fast', function () {
                $treeviewRootElem.removeClass("k-custom-visible");
                that.trigger("select", e);
            });
            var treeValue = this.dataItem(e.node);
            that._v = treeValue[options.valueField];
        });

        var $treeviewRootElem = $(that._treeview.element).closest("div.k-treeview");

        // Hide the treeview.
        $treeviewRootElem
            .css({
                "border"   : "1px solid #dbdbdb",
                "display"  : "none",
                "position" : "absolute",
                "background-color": that._dropdown.list.css("background-color")
            });

        $(document).click(function (e) {
            // Ignore clicks on the treetriew.
            if ($(e.target).closest("div.k-treeview").length === 0) {
                // If visible, then close the treeview.
                if ($treeviewRootElem.hasClass("k-custom-visible")) {
                    $treeviewRootElem.slideToggle('fast', function () {
                        $treeviewRootElem.removeClass("k-custom-visible");
                    });
                }
            }
        });
    },
    value: function(v){
        var that = this;
        if(v !== undefined){
            var n = that._treeview.dataSource.get(v);
            var selectNode = that._treeview.findByUid(n.uid);
            that._treeview.trigger('select',{node: selectNode});
            var $treeviewRootElem = $(that._treeview.element).closest("div.k-treeview");
            $treeviewRootElem.hide();
        }
        else{
            return that._v;
        }
    },

    dropDownList: function () {
        return this._dropdown;
    },

    treeview: function () {
        return this._treeview;
    },
    refresh: function () {
        return this._treeview.dataSource.read();
    },
    options: {
        name: "DropDownTreeView"
    }
});
kendo.ui.plugin(DropDownTreeView);

index.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <link rel="stylesheet" type="text/css" href="kendo/styles/kendo.common.min.css" />
    <link rel="stylesheet" type="text/css" href="style/dropdowntreeview.css" />
</head>
<body>
    <script type="text/javascript" charset="utf-8" src="http://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="kendo/js/kendo.chopper.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="kendo/js/kendo.chopper.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="kendo/js/cultures/kendo.messages.zh-CN.js"></script>
    <script type="text/javascript" charset="utf-8" src="kendo/js/cultures/kendo.culture.zh-CN.min.js"></script>

    <div id="DropDownTreeView"></div>

    <script src="js/dropdowntreeview.js"></script>
    <script>
    var datasource = [{
            "text": "\u90e8\u95e8",
            "expanded": true,
            "id": 0,
            "items": [
                {
                    "text": "\u8fd0\u8425\u90e8",
                    "expanded": true,
                    "pid": 0,
                    "comments": "20140821-1",
                    "items": [
                        {
                            "text": "\u4ea7\u54c1\u7ec4",
                            "expanded": true,
                            "pid": 1,
                            "comments": "20140821-7",
                            "items": [],
                            "id": 7
                        }
                    ],
                    "id": 1
                },
                {
                    "text": "\u8d22\u52a1\u90e8",
                    "expanded": true,
                    "pid": 0,
                    "comments": "20140821-2",
                    "items": [],
                    "id": 2
                },
                {
                    "text": "\u884c\u653f\u90e8",
                    "expanded": true,
                    "pid": 0,
                    "comments": "20140821-3",
                    "items": [],
                    "id": 3
                },
                {
                    "text": "\u7814\u53d1\u90e8",
                    "expanded": true,
                    "pid": 0,
                    "comments": "20140821-4",
                    "items": [
                        {
                            "text": "\u5f00\u53d1\u7ec4",
                            "expanded": true,
                            "pid": 4,
                            "comments": "20140821-8",
                            "items": [],
                            "id": 8
                        },
                        {
                            "text": "\u6d4b\u8bd5\u7ec4",
                            "expanded": true,
                            "pid": 4,
                            "comments": "20140821-9",
                            "items": [],
                            "id": 9
                        }
                    ],
                    "id": 4
                },
                {
                    "text": "\u8fd0\u7ef4\u90e8",
                    "expanded": true,
                    "pid": 0,
                    "comments": "20140821-5",
                    "items": [],
                    "id": 5
                },
                {
                    "text": "\u9500\u552e\u90e8",
                    "expanded": true,
                    "pid": 0,
                    "comments": "20140821-6",
                    "items": [
                        {
                            "text": "\u552e\u524d\u7ec4",
                            "expanded": true,
                            "pid": 6,
                            "comments": "20140821-10",
                            "items": [],
                            "id": 10
                        },
                        {
                            "text": "\u552e\u540e\u7ec4",
                            "expanded": true,
                            "pid": 6,
                            "comments": "20140821-11",
                            "items": [],
                            "id": 11
                        }
                    ],
                    "id": 6
                }
            ]
        }];
        var DropDownTreeView = $('#DropDownTreeView').kendoDropDownTreeView({
            dropDownWidth : '177px',
            valueField    : 'id',
            treeview      : {
                dataSource: datasource
            }
        }).data("kendoDropDownTreeView");

        console.log(DropDownTreeView.value());

        // 如果数据是异步获取的，可以这样设置dataSource
        // var treeDataSource = new kendo.data.HierarchicalDataSource({
        //     transport: {
        //         read:  {
        //             url: '',
        //             dataType: "json"
        //         }
        //     },
        //     schema: {
        //         data: 'data'
        //     },
        //     requestEnd:  function(e){
        //         DropDownTreeView.treeview().setDataSource(e.response.data)
        //     }
        // });
        // treeDataSource.read();
    </script>
</body>
</html>

配置参数：

属性

	类型	意义
dataSource	Array	设置数据
dataTextField	String	显示文本字段
dataValueField	String	value字段
dropDownWidth	String	设置下拉输入框宽度
treeview	Object	设置树形结构选项，如datasource

方法

​	意义
open	打开下拉框
close	关闭下拉框
value	获取选中元素的值
dropDownList	获取下拉选项
treeview	获取树形结构选项
refresh	刷新下拉框

附录：

　　源码下载