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月前
|
开发框架 前端开发 Go
【GoGin】(0)基于Go的WEB开发框架,GO Gin是什么?怎么启动?本文给你答案
Gin:Go语言编写的Web框架,以更好的性能实现类似Martini框架的APInet/http、Beego:开源的高性能Go语言Web框架、Iris:最快的Go语言Web框架,完备的MVC支持。
516 1
|
9月前
|
开发框架 JSON 中间件
Go语言Web开发框架实践:路由、中间件、参数校验
Gin框架以其极简风格、强大路由管理、灵活中间件机制及参数绑定校验系统著称。本文详解其核心功能:1) 路由管理,支持分组与路径参数;2) 中间件机制,实现全局与局部控制;3) 参数绑定,涵盖多种来源;4) 结构体绑定与字段校验,确保数据合法性;5) 自定义校验器扩展功能;6) 统一错误处理提升用户体验。Gin以清晰模块化、流程可控及自动化校验等优势,成为开发者的优选工具。
|
9月前
|
开发框架 安全 前端开发
Go Web开发框架实践:模板渲染与静态资源服务
Gin 是一个功能强大的 Go Web 框架,不仅适用于构建 API 服务,还支持 HTML 模板渲染和静态资源托管。它可以帮助开发者快速搭建中小型网站,并提供灵活的模板语法、自定义函数、静态文件映射等功能,同时兼容 Go 的 html/template 引擎,具备高效且安全的页面渲染能力。
|
9月前
|
开发框架 JSON 中间件
Go语言Web开发框架实践:使用 Gin 快速构建 Web 服务
Gin 是一个高效、轻量级的 Go 语言 Web 框架,支持中间件机制,非常适合开发 RESTful API。本文从安装到进阶技巧全面解析 Gin 的使用:快速入门示例(Hello Gin)、定义 RESTful 用户服务(增删改查接口实现),以及推荐实践如参数校验、中间件和路由分组等。通过对比标准库 `net/http`,Gin 提供更简洁灵活的开发体验。此外,还推荐了 GORM、Viper、Zap 等配合使用的工具库,助力高效开发。
|
5月前
|
算法 Java Go
【GoGin】(1)上手Go Gin 基于Go语言开发的Web框架,本文介绍了各种路由的配置信息;包含各场景下请求参数的基本传入接收
gin 框架中采用的路优酷是基于httprouter做的是一个高性能的 HTTP 请求路由器,适用于 Go 语言。它的设计目标是提供高效的路由匹配和低内存占用,特别适合需要高性能和简单路由的应用场景。
488 4
|
9月前
|
缓存 JavaScript 前端开发
鸿蒙5开发宝藏案例分享---Web开发优化案例分享
本文深入解读鸿蒙官方文档中的 `ArkWeb` 性能优化技巧,从预启动进程到预渲染,涵盖预下载、预连接、预取POST等八大优化策略。通过代码示例详解如何提升Web页面加载速度,助你打造流畅的HarmonyOS应用体验。内容实用,按需选用,让H5页面快到飞起!
|
9月前
|
JavaScript 前端开发 API
鸿蒙5开发宝藏案例分享---Web加载时延优化解析
本文深入解析了鸿蒙开发中Web加载完成时延的优化技巧,结合官方案例与实际代码,助你提升性能。核心内容包括:使用DevEco Profiler和DevTools定位瓶颈、四大优化方向(资源合并、接口预取、图片懒加载、任务拆解)及高频手段总结。同时提供性能优化黄金准则,如首屏资源控制在300KB内、关键接口响应≤200ms等,帮助开发者实现丝般流畅体验。
|
前端开发 JavaScript Shell
鸿蒙5开发宝藏案例分享---Web页面内点击响应时延分析
本文为鸿蒙开发者整理了Web性能优化的实战案例解析,结合官方文档深度扩展。内容涵盖点击响应时延核心指标(≤100ms)、性能分析工具链(如DevTools时间线、ArkUI Trace抓取)以及高频优化场景,包括递归函数优化、网络请求阻塞解决方案和setTimeout滥用问题等。同时提供进阶技巧,如首帧加速、透明动画陷阱规避及Web组件初始化加速,并通过优化前后Trace对比展示成果。最后总结了快速定位问题的方法与开发建议,助力开发者提升Web应用性能。
|
9月前
|
JSON 开发框架 自然语言处理
【HarmonyOS Next之旅】基于ArkTS开发(三) -> 兼容JS的类Web开发(三)
本文主要介绍了应用开发中的三大核心内容:生命周期管理、资源限定与访问以及多语言支持。在生命周期部分,详细说明了应用和页面的生命周期函数及其触发时机,帮助开发者更好地掌控应用状态变化。资源限定与访问章节,则聚焦于资源限定词的定义、命名规则及匹配逻辑,并阐述了如何通过 `$r` 引用 JS 模块内的资源。最后,多语言支持部分讲解了如何通过 JSON 文件定义多语言资源,使用 `$t` 和 `$tc` 方法实现简单格式化与单复数格式化,为全球化应用提供便利。
327 104
|
9月前
|
JavaScript 前端开发 API
【HarmonyOS Next之旅】基于ArkTS开发(三) -> 兼容JS的类Web开发(二)
本文介绍了HarmonyOS应用开发中的HML、CSS和JS语法。HML作为标记语言,支持数据绑定、事件处理、列表渲染等功能;CSS用于样式定义,涵盖尺寸单位、样式导入、选择器及伪类等特性;JS实现业务逻辑,包括ES6语法支持、对象属性、数据方法及事件处理。通过具体代码示例,详细解析了页面构建与交互的实现方式,为开发者提供全面的技术指导。
335 104