登录
当前位置： 首页 > 编程笔记 >

EasyUI学习之Combobox级联下拉列表(2)

齐财
2023-03-14
本文向大家介绍EasyUI学习之Combobox级联下拉列表(2)，包括了EasyUI学习之Combobox级联下拉列表(2)的使用技巧和注意事项，需要的朋友参考一下

本文实例为大家分享了EasyUI Combobox级联下拉列表的具体代码，供大家参考，具体内容如下

1. html代码

<fieldset>
  <legend>信息查询</legend>
  <div style="white-space: nowrap; padding: 5px;">
    <label>学校：</label>
    <input class="easyui-combobox" type="text" id="School" />
    &nbsp;&nbsp;&nbsp;&nbsp;
    <label>院系：</label>
    <input class="easyui-combobox" type="text" id="Faulty" />
    &nbsp;&nbsp;&nbsp;&nbsp;
    <label>专业：</label>
    <input class="easyui-combobox" type="text" id="Major" />
    &nbsp;&nbsp;&nbsp;&nbsp;
    <label>班级：</label>
    <input class="easyui-combobox" type="text" id="Class" />
    &nbsp;&nbsp;&nbsp;&nbsp;      
  </div>
  <div style="white-space: nowrap; padding: 5px;">
    <label>区域：</label>
    <input class="easyui-combobox" type="text" id="Area" />
    &nbsp;&nbsp;&nbsp;&nbsp;
    <label>楼宇：</label>
    <input class="easyui-combobox" type="text" id="Building" />
    &nbsp;&nbsp;&nbsp;&nbsp;
    <label>楼层：</label>
    <input class="easyui-combobox" type="text" id="Floor" />
    &nbsp;&nbsp;&nbsp;&nbsp;
    <label>房间：</label>
    <input class="easyui-combobox" type="text" id="Room" />   
  </div>
</fieldset>

2.显示

3.js代码

//获取组织机构数据
function GetDeptTreeData() {
  var queryDataDept = { layer: 3, isUsing: false }; //表示获取层数到院系，不启用的节点不显示
  $.ajax({
    type: 'post',
    url: '/Common/GetDetptTree',//指向后台的Action来获取当前用户的信息的Json格式的数据
    dataType: 'json',
    data: queryDataDept,
    success: function (treedata) {
      InitDepartment(treedata, 'School', 'Faulty', 'Major', 'Class');
    }
  });

}
//获取建筑机构数据
function GetBuildingTreeData() {
  $.ajax({
    type: 'post',
    url: '/Common/GetTreeData',//指向后台的Action来获取当前用户的信息的Json格式的数据
    dataType: 'json',
    data: { type: 1, layer: 4 },
    success: function (treedata) {
      InitDepartment(treedata, 'Area', 'Building', 'Floor', 'Room');
    }
  });
}
//初始化组织机构下拉列表框
function InitDepartment(treeData, schoolId, facultyId, majorId, classId) {
  //////////////////////////////////////级联下拉列表框//////////////////////////

  var localData = [{ "Id": 0, "Name": "全部" }];
  //学校下拉列表
  var School = $('#' + schoolId).combobox({
    valueField: 'Id', //值字段
    textField: 'Name', //显示的字段
    panelHeight: 'auto',
    required: true,
    editable: false,//不可编辑，只能选择
    onChange: function (school) {
      if (school != 0) {
        var data = [];
        $.each(treeData, function (schoolIndex, schoolData) {
          if (schoolData.id == school) {
            data.push({ 'Id': 0, 'Name': '全部' });
            $.each(schoolData.children, function (faultyIndex, faultyData) {
              data.push({ 'Id': faultyData.id, 'Name': faultyData.text });
            });
          }
        });
        Faulty.combobox("clear").combobox('loadData', data).combobox('select', 0);
      } else {
        Faulty.combobox("clear").combobox('loadData', localData).combobox('select', 0);
      }

      Major.combobox("clear").combobox('loadData', localData).combobox('select', 0);
      Class.combobox("clear").combobox('loadData', localData).combobox('select', 0);

    }
  });

  //院系下拉列表
  var Faulty = $('#' + facultyId).combobox({
    valueField: 'Id', //值字段
    textField: 'Name', //显示的字段
    panelHeight: 'auto',
    required: true,
    editable: false,//不可编辑，只能选择
    onChange: function (faculty) {

      if (faculty != 0) {

        var data = [];
        $.each(treeData, function (schoolIndex, schoolData) {
          $.each(schoolData.children, function (faultyIndex, faultyData) {
            if (faultyData.id == faculty) {
              data.push({ 'Id': 0, 'Name': '全部' });
              $.each(faultyData.children, function (majorIndex, majorData) {
                data.push({ 'Id': majorData.id, 'Name': majorData.text });
              });
            }
          });
        });

        Major.combobox("clear").combobox('loadData', data).combobox('select', 0);
      } else {
        Major.combobox("clear").combobox('loadData', localData).combobox('select', 0);
      }
      Class.combobox("clear").combobox('loadData', localData).combobox('select', 0);
    }
  });

  //专业下拉列表
  var Major = $('#' + majorId).combobox({
    valueField: 'Id', //值字段
    textField: 'Name', //显示的字段
    panelHeight: 'auto',
    required: false,
    editable: false,//不可编辑，只能选择
    onChange: function (major) {

      if (major != 0) {

        var data = [];
        $.each(treeData, function (schoolIndex, schoolData) {
          $.each(schoolData.children, function (faultyIndex, faultyData) {
            $.each(faultyData.children, function (majorIndex, majorData) {
              if (majorData.id == major) {
                data.push({ 'Id': 0, 'Name': '全部' });
                $.each(majorData.children, function (classIndex, classData) {
                  data.push({ 'Id': classData.id, 'Name': classData.text });
                });
              }
            });
          });
        });

        Class.combobox("clear").combobox('loadData', data).combobox('select', 0);
      } else {
        Class.combobox("clear").combobox('loadData', localData).combobox('select', 0);
      }
    }
  });

  //班级下拉列表
  var Class = $('#' + classId).combobox({
    valueField: 'Id', //值字段
    textField: 'Name', //显示的字段
    panelHeight: 'auto',
    required: false,
    editable: false,//不可编辑，只能选择
  });

  var schoolData = [];//创建学校数组
  schoolData.push({ 'Id': 0, 'Name': '全部' });
  $.each(treeData, function (index, data) {
    schoolData.push({ 'Id': data.id, 'Name': data.text });
  });

  School.combobox("clear").combobox('loadData', schoolData).combobox('select', 0);
  Faulty.combobox("clear").combobox('loadData', localData).combobox('select', 0);
  Major.combobox("clear").combobox('loadData', localData).combobox('select', 0);
  Class.combobox("clear").combobox('loadData', localData).combobox('select', 0);
}

//初始化建筑下拉列表框 ---- 已经弃用，使用InitDepartment来处理，不使用树形数据，根据父节点id获取数据
//function InitBuilding(treeData, areaId, buildingId, floorId, roomId) {
//  //////////////////////////////////////级联下拉列表框//////////////////////////

//  var localData = [{ "Id": 0, "Name": "全部" }];
//  //园区下拉列表
//  var Area = $("#" + areaId).combobox({
//    valueField: 'Id', //值字段
//    textField: 'Name', //显示的字段
//    url: '/Building/GetBuildingInfoListJson?parentid=0&type=1',
//    panelHeight: 'auto',
//    required: false,
//    editable: false,//不可编辑，只能选择
//    loadFilter: function (data) {
//      data.unshift({ "Id": 0, "Name": "全部", select: true });//在数组第一项添加数据
//      return data;
//    },
//    onChange: function (area) {
//      if (area != 0) {
//        $.get('/Building/GetBuildingInfoListJson', { type: 2, parentid: area }, function (data) {
//          data.unshift({ "Id": 0, "Name": "全部" });//在数组第一项添加数据
//          Building.combobox("clear").combobox('loadData', data).combobox('select', 0);
//          Floor.combobox("clear").combobox('loadData', localData).combobox('select', 0);
//          Room.combobox("clear").combobox('loadData', localData).combobox('select', 0);
//        }, 'json');
//      } else {
//        Building.combobox("clear").combobox('loadData', localData).combobox('select', 0);
//        Floor.combobox("clear").combobox('loadData', localData).combobox('select', 0);
//        Room.combobox("clear").combobox('loadData', localData).combobox('select', 0);
//      }
//    }
//  });

//  //楼宇下拉列表
//  var Building = $('#' + buildingId).combobox({
//    valueField: 'Id', //值字段
//    textField: 'Name', //显示的字段
//    panelHeight: 'auto',
//    required: false,
//    editable: false,//不可编辑，只能选择
//    onChange: function (building) {

//      if (building != 0) {
//        $.get('/Building/GetBuildingInfoListJson', { type: 3, parentid: building }, function (data) {
//          data.unshift({ "Id": 0, "Name": "全部" });//在数组第一项添加数据
//          Floor.combobox("clear").combobox('loadData', data).combobox('select', 0);
//          Room.combobox("clear").combobox('loadData', localData).combobox('select', 0);
//        }, 'json');
//      } else {
//        Floor.combobox("clear").combobox('loadData', localData).combobox('select', 0);
//        Room.combobox("clear").combobox('loadData', localData).combobox('select', 0);
//      }
//    }
//  });

//  //楼层下拉列表
//  var Floor = $('#' + floorId).combobox({
//    valueField: 'Id', //值字段
//    textField: 'Name', //显示的字段
//    panelHeight: 'auto',
//    required: false,
//    editable: false,//不可编辑，只能选择
//    onChange: function (floor) {

//      if (floor != 0) {
//        $.get('/Building/GetBuildingInfoListJson', { type: 4, parentid: floor }, function (data) {
//          data.unshift({ "Id": 0, "Name": "全部" });//在数组第一项添加数据
//          Room.combobox("clear").combobox('loadData', data).combobox('select', 0);
//        }, 'json');
//      } else {
//        Room.combobox("clear").combobox('loadData', localData).combobox('select', 0);
//      }
//    }
//  });

//  //房间下拉列表
//  var Room = $('#' + roomId).combobox({
//    valueField: 'Id', //值字段
//    textField: 'Name', //显示的字段
//    panelHeight: 'auto',
//    required: false,
//    editable: false,//不可编辑，只能选择
//  });

//  Building.combobox("clear").combobox('loadData', localData).combobox('select', 0);
//  Floor.combobox("clear").combobox('loadData', localData).combobox('select', 0);
//  Room.combobox("clear").combobox('loadData', localData).combobox('select', 0);
//}

//初始化其他下拉列表
//function BindDictItem(comboid, catlog) {
//  $('#' + comboid).combobox({
//    valueField: 'Value',
//    textField: 'Name',
//    url: '/Dictionary/GetComboBoxValue?name=' + catlog,
//    panelHeight: 'auto',
//    required: false,
//    editable: false,//不可编辑，只能选择
//    loadFilter: function (data) {
//      data.unshift({ "Value": '0', "Name": "全部" });//在数组第一项添加数据
//      return data;
//    },
//  });
//}

4.Json数据

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。

 类似资料：
  • EasyUI学习之Combobox下拉列表(1)

    本文向大家介绍EasyUI学习之Combobox下拉列表(1)，包括了EasyUI学习之Combobox下拉列表(1)的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了EasyUI Combobox下拉列表的具体代码，供大家参考，具体内容如下 1. html代码 2.显示 3.js代码 4.Json数据 5.设置默认选项和取值 6.年份小例子 以上就是本文的全部内容，希望对大家的学习有

  • jQuery EasyUI 表单 – 格式化下拉框（ComboBox）

    pre { white-space: pre-wrap; } 本教程向您展示如何创建一个简单的下拉框（Combobox），让它在下拉框中显示图片项。您可以在下拉框（combobox）上使用 formatter 函数来告诉它如何格式化每一个条目。 创建图像下拉框（Combobox）     <input id="cc"             url="data/combobox_data.jso

  • Bootstrap每天必学之级联下拉菜单

    本文向大家介绍Bootstrap每天必学之级联下拉菜单，包括了Bootstrap每天必学之级联下拉菜单的使用技巧和注意事项，需要的朋友参考一下 本文将介绍自定义的bootstrap级联下拉菜单，主要应用场合有省市级关联菜单等等，那么就先拿这个例子来讲，当然其他场景的关联菜单也同样适用。说实话，封装好一个通用的组件还是需要花费很多精力的和时间的，所谓通用，自然要考虑周全，叹！这次整理的Bootstr

  • 奇怪的Ajax ComboBox下拉列表

    问题内容： 我有一些面板内的组合框： 在我将项目更新到.NET 4之前还可以，在将项目（和AJAX）更新到.net4之后，这看起来真的很奇怪……我无法解释正确，我将显示： 我该如何解决？:)完整的CSS / ASPX页面在这里-> https://github.com/nCdy/Issues/tree/master/Ajax%20ComboBox（字符串＃287） 问题答案： 我有一个类似的问题，

  • jQuery+easyui中的combobox实现下拉框特效

    本文向大家介绍jQuery+easyui中的combobox实现下拉框特效，包括了jQuery+easyui中的combobox实现下拉框特效的使用技巧和注意事项，需要的朋友参考一下 1.第一种写法：Input框中显示： 2. 第二种用法，在list列表中显示： 3. 第二种的另一种写法： 以上3种方法均可实现jQuery.easyui的下拉框特效，大家自由选择，希望小伙伴们能够喜欢

  • 如何使用JQuery填充级联下拉列表

    问题内容： 我有以下问题： 我开始用HTML和JS创建表单，并且有两个下拉菜单（国家和城市）。现在，我想使用JQuery使这两个动态，以便仅显示所选国家/地区的城市。 我从一些基本的JS入手，但效果不错，但在IE中却有些麻烦。现在，我正在尝试将JS转换为JQuery，以获得更好的兼容性。 我原来的JS看起来像这样： 我知道这很简单，但是我看不到树木的木头。 问题答案： 它应该像

相关阅读

如何使用JQuery填充级联下拉列表jQuery实现多级联动下拉列表查询框级联下拉jquery ajax php如何使用mysql和php进行级联下拉列表JavaScript实现常用二级省市级联下拉列表的方法

相关文章

机器学习：关联与回归联想-机器学习岗面经机器学习：梯度下降货拉拉java实习机器学习：集成学习

相关问答

HTML下拉列表-整理？绑定KendoUi下拉列表创建下拉列表jsfExcel vba-worksheet_change下拉列表依赖下拉列表excel

相关工具

iOS 下拉列表comboBox围棋学习多级树形目录列表Magic Grid Combobox

相关文档

React 学习之道Qt 学习之路机器学习之路Python 爬虫学习系列教程GoGuide 打造易懂的 Go 学习之旅
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.