zoukankan      html  css  js  c++  java
  • easyUI的下拉框combobox与树tree联动

    参与联动的有 2 个combobox 和 1 个tree:

    <input id="combobox1" class="easyui-combobox" name="combobox1" style=" 120px;" />
    <input id="combobox2" class="easyui-combobox" name="combobox2" style=" 120px;" />
    <div id="tree1" class="easyui-tree"></div>


    联动流程:

    combobox1 控制 combobox2,combobox2 控制 tree1


    联动代码:

    <script type="text/javascript">
        //先写被控制者,再写控制者。因为控制者要调用被控制者。当然,这个似乎无关紧要
        $("#combobox2").combobox({
            url:"",
            method: "get",
            valueField: 'Id',
            textField: 'Name',
            onSelect: function (record) {//控制树 <----------------------
                var url = "/api/customview/Tree?Id=" + record.Id;
                $('#tree1').tree({
                    animate: true,
                    checkbox: true,
                    lines: true,
                    url:url,
                    method:"get",
                    onLoadSuccess: function (row, data) {
                        $(this).tree("collapseAll");//树节点全部闭合
                    },
                    toolbar: [{
                        text: 'Add Group',
                        iconCls: 'icon-folder-add',
                        handler: function () {
                            alert('Add Group');
                        }
                    }]
                });
            }
            , onLoadSuccess: function () { //加载完成后,设置选中第一项
                var val = $(this).combobox("getData");
                for (var item in val[0]) {
                    if (item == "Id") {
                        $(this).combobox("select", val[0][item]);
                    }
                }
            }
        });
        $("#combobox1").combobox({
            url: "/api/customview/Item1",
            method: "get",
            valueField: 'Id',
            textField: 'Name',
            onSelect: function (record) {//控制combobox2 <----------------------
                var url = "/api/customview/Item2?Id=" + record.Id;
                $("#combobox2").combobox('reload', url);
            }
            , onLoadSuccess: function () { //加载完成后,设置选中第一项
                var val = $(this).combobox("getData");
                for (var item in val[0]) {
                    if (item == "Id") {
                        $(this).combobox("select", val[0][item]);
                    }
                }
            }
        });
    </script> 



  • 相关阅读:
    第几天?
    农历02__资料
    农历01
    VC6_预编译头
    QWebEngine_C++_交互
    Qt570_CentOS64x64_02
    Qt570_CentOS64x64_01
    QWebEngineView_CssVariables
    Windows__书
    Win7SDK
  • 原文地址:https://www.cnblogs.com/leftfist/p/4257806.html
Copyright © 2011-2022 走看看