发布于 2017-07-17 17:15:58 | 30 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的精品教程,程序狗速度看过来!

EasyUI jQuery UI插件

jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签。


这篇文章主要为大家详细介绍了EasyUI学习之Combobox级联下拉列表的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

1. html代码


<fieldset>
  <legend>信息查询</legend>
  <div style="white-space: nowrap; padding: 5px;">
    <label>学校:</label>
    <input class="easyui-combobox" type="text" id="School" />
        
    <label>院系:</label>
    <input class="easyui-combobox" type="text" id="Faulty" />
        
    <label>专业:</label>
    <input class="easyui-combobox" type="text" id="Major" />
        
    <label>班级:</label>
    <input class="easyui-combobox" type="text" id="Class" />
              
  </div>
  <div style="white-space: nowrap; padding: 5px;">
    <label>区域:</label>
    <input class="easyui-combobox" type="text" id="Area" />
        
    <label>楼宇:</label>
    <input class="easyui-combobox" type="text" id="Building" />
        
    <label>楼层:</label>
    <input class="easyui-combobox" type="text" id="Floor" />
        
    <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数据

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持phperz。



相关阅读 :
EasyUI学习之Combobox级联下拉列表(2)
EasyUI学习之Combobox下拉列表(1)
jQuery Easyui学习之datagrid 动态添加、移除editor
EasyUI学习之DataGird分页显示数据
easyUI下拉列表点击事件使用方法
Easyui的combobox实现动态数据级联效果
jQuery+easyui中的combobox实现下拉框特效
jQuery EasyUI学习教程之datagrid点击列表头排序
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jquery Easyui自定义下拉框组件使用详解(21)
jQuery Easyui 下拉树组件combotree
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务