若依项目人员选择器实现

最新推荐文章于 2024-05-23 09:58:10 发布

weixin_30741653

最新推荐文章于 2024-05-23 09:58:10 发布

阅读量1.6k

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/conswin/p/9952564.html

版权

下面主要记录一下在若依项目中，实现人员选择器功能。

使用了bootstrap Multiselect组件，其官网为：http://www.jiaoben123.com/uploadfiles/demo/d19cb85fac5b4c74bb4e387852f7d23b/#documentation

下载该组件的地址为：https://codeload.github.com/crlcu/multiselect/zip/master

1、下载好之后放在相应的js、css文件夹下，在include.html中分别引入该两个文件：

<link th:href="@{/css/multiselect-master/style.css}" rel="stylesheet"/>
<script th:src="@{/js/plugins/multiselect-master/multiselect.min.js}"></script>

2、在system/user/下新建tree.html，具体如下

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>
<style>
body{height:auto;font-family: "Microsoft YaHei";}
button{font-family: "SimSun","Helvetica Neue",Helvetica,Arial;}
</style>
<body class="hold-transition box box-main">
	
	<input id="selectedUserIds"   name="selectedUserIds"    type="hidden" th:value="${selectedUserIds}"/>
	<input id="selectedUserNames" name="selectedUserNames"  type="hidden" th:value="${selectedUserNames}"/>
	<input id="multiSelectFlag" name="multiSelectFlag"  type="hidden" th:value="${multiSelectFlag}"/>
	
	<div class="row">
		<div class="col-xs-10">
			<div class="wrapper">
				<div class="treeShowHideButton" οnclick="$.tree.toggleSearch();">
					<label id="btnShow" title="显示搜索" style="display:none;">︾</label>
					<label id="btnHide" title="隐藏搜索">︽</label>
				</div>
			</div>
			<div class="treeSearchInput" id="search">
				<label>姓名：</label><input type="text" class="empty" id="userName" name="userName" maxlength="50"/>
				<button class="btn" id="btn" οnclick="loadUserList()"> 搜索 </b

最低0.47元/天解锁文章

weixin_30741653

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
若依项目人员选择器实现

下面主要记录一下在若依项目中，实现人员选择器功能。使用了bootstrapMultiselect组件，其官网为：http://www.jiaoben123.com/uploadfiles/demo/d19cb85fac5b4c74bb4e387852f7d23b/#documentation下载该组件的地址为：https://codeload.github.com/crlcu/multi...
复制链接

扫一扫