模仿window XP，使用layui和ztree开发人员、职位和部门选择对话框

于 2022-12-26 23:54:38 发布
阅读量357 收藏 1
点赞数
分类专栏： 前端JS 文章标签： javascript layui jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/docow/article/details/128450721
版权

选择对话框(Dailog)是我们项目开发过程中最常的一种JS前端UI界面，比如选择文件、图片、人员组织树等等，为了达到最佳的效果和项目统一，我们都会精心设计各种通用对话框，下面就是我在考勤管理系统开发中使用的一种对话框。

人员、部门、职位选择对话框，先上效果图：
在这里插入图片描述
这是我在开发考勤系统时使用的选择对话框代码。
HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>天时考勤系统</title>
  <meta name="description" content="天时考勤" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="shortcut icon" href="views/images/favicon.png" type="image/png" />
  <link rel="stylesheet" href="//www.daytime.cc/.../styles/daytime-all-min.css?v=20200712"	type="text/css" />
  <base href="http://www.daytime.cc/" root="/" html5="false">
</head>
<body ng-app="app" id="win10" ng-controller="AppCtrl" ng-class="{'childwindow':ischildwindow == true, 'page-signin':$state.includes(&#39;auth&#39;)}"><div class="h-full w-full layui-row noselect layui-form dlg-pagination-box" lay-filter="dlgForm">
	<div class="layui-col-xs12 h-full dailog-container">
		<div class="dailog-layout w-full h-full">
			<div class="dailog-layout-left h-full layui-inline">
				<div class="layui-row" style="height:40px;line-height:35px;margin-top:2px;text-align:right;">
					<div class="layui-col-xs12">选择范围：</div>
				</div>
				<div class="layui-dailog-data"><div class="layui-scroll-auto"><div class="scroll-item-list">
					<div class="dailog-category-item" ng-repeat="cat in dlgSideCates">
						<div class="item-icon"><i class="iconfont {{cat.iconfont}}"></i></div>
						<div class="item-title">{{cat.name}}</div>
					</div>
				</div></div></div>
			</div>
			<div class="dailog-layout-right h-full layui-inline">
				<div class="layui-dailog-head">
					<div class="layui-row" style="height:40px;">
						<div class="layui-col-search">
							<input type="text" name="path" id="dailog_depttree" style="border-radius: 2px 0px 0px 2px;" ng-model="openinfo.path" autocomplete="off" class="layui-input">
						</div>
						<div class="layui-col-buttons">
							<div class="layui-btn-group">
							  <button type="button" style="border-left-width: 0px;" class="layui-btn layui-btn-sm"><i class="iconfont icon-xiangzuo"></i></button>
							  <button type="button" class="layui-btn layui-btn-sm"><i class="iconfont icon-fanhui"></i></button>
							  <button type="button" class="layui-btn layui-btn-sm"><i class="iconfont icon-viewer-head"></i></button>
							  <button type="button" class="layui-btn layui-btn-sm"><i class="iconfont icon-viewer-grid"></i></button>
							</div>
							<div class="input-group" style="width:175px;float:right;">
								<input type="text" name="keyword" ng-model="openinfo.keyword" autocomplete="off" class="layui-input">
								<span class="layui-btn input-group-addon p-h-sm"><i class="iconfont icon-chaxun i-18"></i></span>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-dailog-body" id="dailog_selector-items">

<div class="list-container grid-list" ng-append="flexempty">
	<!-- department/position/user list -->
	<div ng-repeat="item in lists.list" ng-class="{'select':inArray($index,lists.select)}" class="list-item grid-item item-drag-select" title="{{item.cntitle}}">
		<div class="item-icon">
			<i ng-if="item.type=='dept'" class="iconfont icon-viewer-orgchart"></i>
			<i ng-if="item.type=='posi'" class="iconfont icon-rencaifuwu"></i>
			<div ng-if="item.type=='user'" class="thumb thumb-full"><img ng-src="{{item.photo}}"/></div>
		</div>
		<div class="title-type-name">
			<span class="title">{{item.name}}</span>
		</div>
	</div>
</div>

				</div>
				<div class="layui-dailog-foot">
					<div class="dailog-pagination pos-abt"></div>
					<div class="layui-row" style="height:40px;">
						<div class="layui-col-title">已选择：</div>
						<div class="layui-col-input">
							<input type="text" id="sellist" name="sellist" ng-model="openinfo.sellist" autocomplete="off" class="layui-input">
						</div>
						<div class="layui-col-button">
							<button ng-click="dlgSave()" class="layx-button-item layui-btn layui-btn-primary" title="确定">确定</button>
						</div>
					</div>
					<div class="layui-row" style="height:40px;">
						<div class="layui-col-title">选择类型：</div>
						<div class="layui-col-input selectUp">
							<div ng-class="{'layui-col-xs12':openinfo.opentype!='user', 'layui-col-xs6 layui-col-xs60':openinfo.opentype=='user'||openinfo.opentype=='posi'}">
								<select name="opentype" ng-change="selectOpenType()" ng-model="openinfo.opentype">
									<option value="">全部类型</option>
									<option value="dept">部门</option>
									<option value="posi">职位</option>
									<option value="user">人员</option>
								</select>
							</div>
							<div class="layui-col-xs6" ng-show="openinfo.opentype=='user'||openinfo.opentype=='posi'" style="width:calc(50% - 5px);margin-left:10px;">
								<select name="postseries" ng-model="openinfo.postseries">
									<option value="">全部职系</option>
									<option value="dept">领导层</option>
									<optgroup label="技术类">
										<option value="posi">技术层</option>
										<option value="posi0">技工</option>
									</optgroup>
									<optgroup label="操作类">
										<option value="posi2">机台工</option>
										<option value="posi3">保全工</option>
									</optgroup>
									<option value="user">普通员工</option>
								</select>
							</div>
						</div>
						<div class="layui-col-button">
							<button ng-click="dlgCancel()" class="layx-button-item layui-btn" title="取消">取消</button>
						</div>
					</div>
					<div class="layui-row m-t-xs">
						<div class="layui-col-xs2" style="margin-left:120px;">
							<input type="checkbox" name="position[desktop]" lay-skin="primary" value="1" title="显示全部子部门">
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>

这是JS代码

(function ($) {
    $.fn.extend({
		"dailog":function (options, scope) {
			// 目标样式， 这里是上面的className
			var $that = $(this);
			var win_h = 550,win_w = 830;
			var $dailog = $('.dailog-btn-open', $that);
			var $winscope;

			// 定义控制器
			app.controller(options.winid+'Ctrl', ['$scope', '$timeout', function($scope, $timeout) {
				var deptlist;
				$scope.openinfo = {
					'opentype': 'dept'
				};
				$scope.lists = {
					'list':[],
					'select':[]
				};
				$scope.inArray = function(value, list){
					if($.inArray(value, list) > -1){
						return true;
					}else{
						return false;
					}
				}
				$scope.dlgSideCates = [
					{'name':'最近选择', 'id':'recent', 'iconfont':'icon-time'},	
					{'name':'最新入职', 'id':'join', 'iconfont':'icon-renyuantongxunlu'},	
					{'name':'本部门', 'id':'dept', 'iconfont':'icon-viewer-orgchart'},
					{'name':'本公司', 'id':'company', 'iconfont':'icon-yuyan'},
					//{'title':'集团', 'id':'group', 'iconfont':'icon-jigou'},
					{'name':'部门负责人', 'id':'deptleader', 'iconfont':'icon-position'},
					{'name':'分管领导', 'id':'bizleader', 'iconfont':'icon-wode'},
					{'name':'公司领导', 'id':'coleader', 'iconfont':'icon-HRrenshirenshiguanli'},
					{'name':'集团领导', 'id':'groupleader', 'iconfont':'icon-rencaifuwu'}
				];

				$scope.selectOpenType = function(){
					if(!$scope.openinfo.opentype){
						$scope.openinfo.opentype = 'dept';
						$("select[name='opentype']").val('dept');
					}
					if($scope.openinfo.opentype!='user' && $scope.openinfo.opentype!='posi'){
						$scope.openinfo.postseries = '';
						$("select[name='postseries']").val('');
					}
					layui.use(['form'], function () {
						var form = layui.form;
						form.render(null, 'dlgForm');
					});
				};

				var get_users = function(node){
					if(typeof node === 'undefined'){
						loadDepartment(function(deptlist){
							$scope.lists.list = [];
							for(var i=0; i<deptlist.length; i++){
								if(!deptlist[i].pid){
									var data = {'name': deptlist[i].name,'type':'dept'};
									$scope.lists.list.push(data);
								}
							}
							for(var i=0; i<20; i++){
								var data = {'name': '职位'+i,'type':'posi'};
								$scope.lists.list.push(data);
							}
							for(var i=0; i<100; i++){
								var data = {'name': '员工'+i,'photo':'./medias/image/system/vatar_2.jpg','type':'user'};
								$scope.lists.list.push(data);
							}
						});
					}else{
						$scope.lists.list = [];
						if(typeof node.children !== 'undefined'){
							$.each(node.children, function(k, v){
								var data = {'name': v.name, 'type':'dept'};
								$scope.lists.list.push(data);
							});
						}
						for(var i=0; i<10; i++){
							var data = {'name': '职位'+i,'type':'posi'};
							$scope.lists.list.push(data);
						}
						for(var i=0; i<50; i++){
							var data = {'name': '员工'+i,'photo':'./medias/image/system/vatar_2.jpg','type':'user'};
							$scope.lists.list.push(data);
						}
						$scope.$apply();
					}
				}

				var select_item = function(callback){
					var $selector = $('#dailog_selector-items');
					$selector.selectable({
						//=================属性
						//appendTo            : "body",           //指定选择过程中将辅助元素追加到何处。默认值  "body"
						autoRefresh         : true,                               //决定是否在每次选择动作时，都重新计算每个选择元素的坐标和大小。如果你有很多个选择项的话，建议设置成false并通过方法手动刷新。默认值  true
						cancel              : "textarea,button,select,option,.set-icon-size-slider,.layui-table-header,.slide-body,.list-type-header,.main-title,.column-drag,.tools",    //防止在与选择器相匹配的元素上发生选择动作。默认值  "input,textarea,button,select,option"
						delay               : 100,                                  //以毫秒为单位，设置延迟多久才激活选择动作。此参数可防止误点击。默认值  0
						disabled            : false,                              //如果选择true则该selectable实例将不能使用。默认值  false
						distance            : 10,                                  //决定至少要在元素上面拖动多少像素后，才正式触发选择的动作。默认值  0
						filter              : ".item-drag-select",                            //设置哪些子元素才可以被选择。默认值  "*"
						tolerance           : "touch",                            //可选值："touch", "fit"，分别代表完全和部署覆盖元素即触发选择动作。默认值  "touch"
						//=================事件
						selected            :function(e, ui) {                //当选定某一个元素后触发此事件。
							$(ui.selected).removeClass('ui-selectee');
							$(ui.selected).removeClass('ui-selected');
						 },
						selecting           :function(e, ui) {                //当选择某一个元素中时触发此事件。
							$(ui.selecting).addClass('select');
						 },
						unselected          :function(event, ui) {               //当取消选定某一个元素后触发此事件。
							$(ui.selected).removeClass('ui-selectee');
							$(ui.selected).removeClass('ui-selected');
						},
						unselecting         :function(event, ui) {               //当取消选定某一个元素中触发此事件。
							$(ui.unselecting).removeClass('select');
						}
					});
					$selector.on('click', '.item-drag-select', function(){
						$('.item-drag-select.select', $selector).removeClass('select');
						$(this).addClass('select');
						return false;
					}).on('dblclick', '.item-drag-select', function(){
						//$('.item-drag-select.select', $selector).removeClass('select');
						//$(this).addClass('select');
						layx.destroy(options.winid);
						return false;
					}).on('click', function(){
						$('.item-drag-select.select', $selector).removeClass('select');
					});;
				};

				$scope.initWinDailog = function(){
					var $dlg = $('#layx-'+options.winid);
					$(".layui-scroll-auto").panel({iWheelStep:32});
					layui.use(['form', 'treeSelect', 'laypage'], function () {
						var form = layui.form;
						var treeSelect= layui.treeSelect;
						var pager = layui.laypage;
						form.render(null, 'dlgForm');
						loadDepartment(function(deptlist){
							var depts = angular.copy(deptlist);
							var cates = angular.copy($scope.dlgSideCates);
							for(var i=0; i<cates.length; i++){
								depts.push(cates[i]);
							}
							treeSelect.render({
								elem: '#dailog_depttree',
								data: depts,
								click: function(d){
									//console.log(d);
									get_users(d.current);
								},
								success:function(e){
									//console.log(e);
								}
							});
							get_users();
						});

						var pageid = 'page_' + guid();
						var timer;
						$('.dailog-pagination', $dlg).attr('id', pageid).on('mouseenter', function(){
							clearTimeout(timer);
							$(this).fadeTo(300, 1, 'swing');
						}).on('mouseleave', function(){
							var $that = $(this);
							timer = setTimeout(function(){
								$that.fadeTo(1000, 0.3, 'swing');
							},500);
						});

						// 检查最后删除的字符
						$('#sellist').keydown(function(e){
							// e.target.selectionStart === e.target.textLength 在开始位置
							console.log(e.target.selectionStart, e.target.selectionEnd);
							console.log(e.target.value[e.target.selectionStart - 1]);
						});

						var pageoption = {
							elem: pageid,
							count: 3000 //数据总数，从服务端得到
							,limit: 50
							,page: 1
							,limits:[50,100,150,200,300,500,1000]
							,layout: ['page', 'limit', 'count']
						};
						pager.render(pageoption);
					});

					select_item();

				};
			}]);

			var create_dailog = function(){
				var url = 'http://www.daytime.cc/.../views/dailog.html';
				$.get(url, function(html){
					var winoption = {
						id:options.winid,
						title:"选择",
						width:win_w,
						height:win_h,
						minWidth:win_w,
						minHeight:win_h,
						shadable: true,
						minMenu:false,
						maxMenu:false,
						position: 'center',
						icon:'<i class="iconfont icon-dakaiwenjian"></i>',
						content:'<div class="w-full h-full">'+html+'</div>'
					};
					var winform = layer.open(winoption);				
				});
			};

		}
	});
})(jQuery);
docow
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layui 人员选择弹框
twscsdn的博客
09-29 770
<div id="choose-box-wrapper"> <div class="layui-form" lay-filter="myDiv" style=" padding: 10px;"> <div class="layui-input-inline" style="display: none;"> <input type="hidden" id="patent" value="{$pat
layui 传递前端请求_SpringBoot+layui实现win10风格的一套系统
weixin_30613239的博客
01-01 478
win10风格的一套系统，前端采用layui作为前端框架，后端采用SpringBoot作为服务框架，采用自封装的xml对所有请求进行参数校验，以保证接口安全性。介绍基于SpringBoot框架和SaaS模式，立志为中小企业提供开源好用的多租户ERP软件，目前专注进销存+财务功能。主要模块有零售管理、采购管理、销售管理、仓库管理、财务管理、报表查询、系统管理等。支持预付款、收入支出、仓库调拨、组装拆...
skyeye-基于layui的一套win10系列的OA系统
doc_wei
11-15 4080
skyeye 项目介绍 智能办公OA系统[SpringBoot2-快速开发平台]，适用于医院，学校，中小型企业等机构的管理。Activiti5.22+动态表单实现零java代码即可做到复杂业务的流程实施，同时包含文件在线操作、日志、考勤、CRM、项目、拖拽式生成问卷、日程、笔记、计划、行政等多种复杂业务功能。同时，可进行授权二开。 代码是没问题的，请下载发行版，环境版本请参照下面云盘提供的版...............
dtree选择部门或者选择部门下人员复选框单选框插件带搜索
06-30
dtree选择部门或者选择部门下人员复选框单选框插件
小插件: 例 新增操作人 点击文本框需要展示所有的人员提供选择弹框 人员信息全部自动带出来...
weixin_30642561的博客
01-15 606
　　效果图： 描述： 点击人员input 弹出模态框提供选择 ， 选择确定后人员信息自动带入以下文本框 页面： <div class="form-group"> <label class="col-md-3 control-label">维修人系统编号：</lab...
基于Layui和ZTree的树形下拉选择器设计源码
最新发布
04-09
本项目是基于Layui和ZTree的树形下拉选择器设计源码，包含118个文件，其中75个GIF文件，24个JavaScript文件，6个CSS文件。该系统是一个基于layui和ztree的树形下拉选择器，提供了丰富的功能，包括异步加载、点击回调...
layui+ztree下拉树，支持单选和多选
09-11
总结起来，`layui+ztree下拉树`是前端开发中一种实用的组件组合，它结合了`layui`的优雅界面和`ztree`的丰富功能。通过合理的配置和编程，可以轻松实现支持单选和多选的下拉树，提升用户的操作体验。在实际项目中，...
layui ztree 下拉树代码.zip
12-18
使用layui和zTree创建下拉树的关键知识点包括： 1. layui集成：layui的模块化设计使得与其他插件如zTree的集成变得简单。首先，你需要在页面中引入layui的基础库和zTree的js及css文件。 2. zTree初始化：通过...
在前端layui项目中使用ztree
爱码士的博客
05-19 1144
说明 ztree是一款很好的树形控件，无需对数据进行严格的格式控制，比如需要建立层级关系，只要你数据存在parent_id即可 官网：http://www.treejs.cn/v3/main.php#_zTreeInfo 基础使用，例子都在官网看。这里讲述怎么集成。 项目集成 项目是layui，其本身有jquery模块，为了配合插件，需要重新引入。 <link th:href="@{/lib/ztree/css/metroStyle/metroStyle.css}" rel="stylesheet"&
layui ztree 下拉树代码-Javascript代码类资源
11-08
layui ztree 下拉树是一种基于JavaScript的前端组件，它结合了layui框架和zTree插件，用于实现下拉式树形结构的选择功能。在网页设计中，这种组件常用于数据层级关系复杂的情况，如组织结构选择、地区选择等。下面...
部门选择控件（jquery插件）
06-28
是一款jquery的部门选择控件，支持部门树展示，勾选选择部门
基于layui样式的聊天功能
09-04
基于layui风格实现im聊天功能，亲测无问题。 只需引入layim.js以及layui.css即可，本人写了一篇Springboot + shiro + layui + socketio实现的消息推送以及聊天功能
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
09-16
主要介绍了django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
dtree选择部门或者选择部门下人员复选框单选框插件 带搜索
06-30
dtree选择部门或者选择部门下人员复选框单选框插件 带搜索
仿WINDOWS系统后台管理界面
06-25
仿WINDOWS XP 后台管理系统。拿来就可以用，JS的
基于jQuery打造智能的人员选择输入框
weixin_34380948的博客
10-28 186
UPDATE:修正了在FireFox下显示的问题，重新copy CSS即可 写完这个名字忽然觉得有点标题党的嫌疑，但是又不知道什么样的名字比较合适，那就暂且这样吧。 今天要讲的东西比较简单，其中会用到另外的一个jQuery控件，是一个人员选择输入框。那到底是个什么东西呢？ 那好还是先来看最后的效果，有个直接的了解。     是不是和时下流行的SNS网站的选择人员控件很像？对比一下...
用户选择框设计思路
拒绝成猿的程序员
08-21 5253
最近新项目要用到选择人员，于是重新在新项目中设计了一版选人框。 效果图如下： 功能部分 一个选人框主要有以下几个展示部分： 人员组织树 已选节点信息 操作工具栏   这三大部分再细分下各自应有的基础功能： 人员展示部分： 用户信息展示 选中节点的标识 对于人员的快速定位功能 1）用户成员展示 将人员用树形直接列出，是最直接、最便捷的方式。因为树形下，很方便查看组织结...
人员选择树，搜索自动筛选功能
湛庐无方
09-22 5366
要实现的功能截图： 要求： 1、点击收件人输入框可以根据拼音自动筛选数据，并且标记已经选择的数据，没有结果的时候提示，相应的更新左边树节点状态 2、勾选树右侧树的节点左侧输入框出现一一对应的节点名称用到的插件 vue+chosen+ztree vue：组件化的MVVM库 chosen:基于jquery的单选列表和多选列表增强插件 ztree：基于jquery的树插件分析 chosen
Layui对话框弹出层效果
深海爱人@的博客
04-10 3182
一、引入CSS、JS文件 <!--引入官方在线的css和JS--> <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css?t=1586046995289" media="all"> <script src="//res.layui.com/layui/dist/layui...
使用SpringMVC和ZTree构建树形菜单权限配置教程
5. 前端展示：在前端页面引入ZTree的JavaScript库和CSS样式文件，通过AJAX请求获取后端返回的权限数据，使用ZTree的API初始化树形结构。ZTree的`setting`参数可以定制各种行为，如`data`用于设置数据源，`callback`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值