NET快速信息化系统开发框架 V3.2 -> Web 用户管理模块编辑界面-组织机构选择支持级联选择

简介:

下拉框级联选择功能非常的实用,框架用户管理编辑界面对组织机构的选择在3.2版本中新增了级联选择的支持,让组织机构的选择更加的方便与高效,也不容易出错。

  我们框架的组织机构结合实际分成了5种类型,分别为:公司、分公司、部门、子部门、工作组。不同的企业可以根据实际需要进行取舍。用户编辑界面的组织机构选择控件使用了EasyUI的combobox控件,级联的选择主要使用了此控件的onChange事件。

  级联选择效果如下图所示:

    下面给出增加用户JS部分的代码参考。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
AddUser:  function  () {  //添加用户
         var  addDialog = top.$.hDialog({
             href: formUrl,
             title:  '添加用户' ,
             width: 610,
             height: 640,
             iconCls:  'icon16_user_add' ,
             onLoad:  function  () {
                 UserAdminMethod.initData();
                 BindOrganize();
                 top.$( '#Enabled' ).attr( "checked" true );
                 top.$( '#Description' ).val( "" );
                 top.$( '#UserName' ).focus();
             },
             submit:  function  () {
                 if  (top.$( '#uiform' ).validate().form()) {                   
                     var  postData = pageMethod.serializeJson(top.$( '#uiform' ));
                     postData.CompanyName = top.$( '#CompanyId' ).combobox( 'getText' );
                     postData.SubCompanyName = top.$( '#SubCompanyId' ).combobox( 'getText' );
                     postData.DepartmentName = top.$( '#DepartmentId' ).combobox( 'getText' );
                     postData.SubDepartmentName = top.$( '#SubDepartmentId' ).combobox( 'getText' );
                     postData.WorkgroupName = top.$( '#WorkgroupId' ).combobox( 'getText' );
                     $.ajaxjson( "/FrameworkModules/UserAdmin/SubmitForm" , postData,  function  (d) {
                         if  (d.Success) {
                             msg.ok(d.Message);
                             addDialog.dialog( 'close' );
                             mygrid.reload();
                         else  {
                             MessageOrRedirect(d);
                         }
                     });
                 else  {
                     msg.warning( '请输入用户名称。' );
                     top.$( '#UserName' ).focus();
                 }
             }
         });
         return  false ;
     }

  级联绑定代码参考: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//绑定组织机构信息-实现级联选择
function  BindOrganize() {
     top.$( '#SubCompanyId,#DepartmentId,#SubDepartmentId,#WorkgroupId' ).combobox({
         valueField:  'Id' , textField:  'FullName' , panelHeight: 100, editable:  true
     });
     top.$( '#CompanyId' ).combobox({
         valueField:  'ID' , textField:  'FULLNAME' , panelHeight: 100, editable:  true ,
         url:  '/FrameworkModules/OrganizeAdmin/GetOrganizeByCategory?organizeCategory=Company' ,
         onChange:  function  (newValue, oldValue) {
             top.$( '#SubCompanyId' ).combobox({
                 url:  '/FrameworkModules/OrganizeAdmin/GetCategoryChildrensById?organizeCategory=SubCompany&organzieId='  + newValue,
                 onChange:  function (newValue, oldValue) {
                     top.$( '#DepartmentId' ).combobox({
                         url:  '/FrameworkModules/OrganizeAdmin/GetCategoryChildrensById?organizeCategory=Department&organzieId='  + newValue
                     });
                     
                     top.$( '#DepartmentId' ).combobox({
                         url:  '/FrameworkModules/OrganizeAdmin/GetCategoryChildrensById?organizeCategory=Department&organzieId='  + newValue
                     });
 
                     top.$( '#SubDepartmentId' ).combobox({
                         url:  '/FrameworkModules/OrganizeAdmin/GetCategoryChildrensById?organizeCategory=SubDepartment&organzieId='  + newValue
                     });
 
                     top.$( '#WorkgroupId' ).combobox({
                         url:  '/FrameworkModules/OrganizeAdmin/GetCategoryChildrensById?organizeCategory=WorkGroup&organzieId='  + newValue
                     });
                 }
             });
         }
     });
}

本文转自yonghu86博客园博客,原文链接:http://www.cnblogs.com/huyong/p/7651658.html,如需转载请自行联系原作者
相关文章
|
5天前
|
人工智能 自然语言处理 JavaScript
测试工程师要失业?Magnitude:开源AI Agent驱动的端到端测试框架,让Web测试更智能,自动完善测试用例!
Magnitude是一个基于视觉AI代理的开源端到端测试框架,通过自然语言构建测试用例,结合推理代理和视觉代理实现智能化的Web应用测试,支持本地运行和CI/CD集成。
89 15
测试工程师要失业?Magnitude:开源AI Agent驱动的端到端测试框架,让Web测试更智能,自动完善测试用例!
|
1月前
|
关系型数据库 MySQL 数据库
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
TIS 是一款基于Web-UI的开源大数据集成工具,通过与人大金仓Kingbase的深度整合,提供高效、灵活的实时数据集成方案。它支持增量数据监听和实时写入,兼容MySQL、PostgreSQL和Oracle模式,无需编写复杂脚本,操作简单直观,特别适合非专业开发人员使用。TIS率先实现了Kingbase CDC连接器的整合,成为业界首个开箱即用的Kingbase CDC数据同步解决方案,助力企业数字化转型。
208 5
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
|
1月前
|
机器学习/深度学习 开发框架 API
Python 高级编程与实战:深入理解 Web 开发与 API 设计
在前几篇文章中,我们探讨了 Python 的基础语法、面向对象编程、函数式编程、元编程、性能优化、调试技巧以及数据科学和机器学习。本文将深入探讨 Python 在 Web 开发和 API 设计中的应用,并通过实战项目帮助你掌握这些技术。
|
5月前
|
存储 前端开发 JavaScript
如何在项目中高效地进行 Web 组件化开发
高效地进行 Web 组件化开发需要从多个方面入手,通过明确目标、合理规划、规范开发、加强测试等一系列措施,实现组件的高效管理和利用,从而提高项目的整体开发效率和质量,为用户提供更好的体验。
147 63
|
5月前
|
开发框架 搜索推荐 数据可视化
Django框架适合开发哪种类型的Web应用程序?
Django 框架凭借其强大的功能、稳定性和可扩展性,几乎可以适应各种类型的 Web 应用程序开发需求。无论是简单的网站还是复杂的企业级系统,Django 都能提供可靠的支持,帮助开发者快速构建高质量的应用。同时,其活跃的社区和丰富的资源也为开发者在项目实施过程中提供了有力的保障。
208 62
|
4月前
|
前端开发 安全 JavaScript
2025年,Web3开发学习路线全指南
本文提供了一条针对Dapp应用开发的学习路线,涵盖了Web3领域的重要技术栈,如区块链基础、以太坊技术、Solidity编程、智能合约开发及安全、web3.js和ethers.js库的使用、Truffle框架等。文章首先分析了国内区块链企业的技术需求,随后详细介绍了每个技术点的学习资源和方法,旨在帮助初学者系统地掌握Dapp开发所需的知识和技能。
2025年,Web3开发学习路线全指南
|
5月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
107 2
|
5月前
|
中间件 Go API
Go语言中几种流行的Web框架,如Beego、Gin和Echo,分析了它们的特点、性能及适用场景,并讨论了如何根据项目需求、性能要求、团队经验和社区支持等因素选择最合适的框架
本文概述了Go语言中几种流行的Web框架,如Beego、Gin和Echo,分析了它们的特点、性能及适用场景,并讨论了如何根据项目需求、性能要求、团队经验和社区支持等因素选择最合适的框架。
444 1
|
6月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
374 3
|
5月前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
396 45