帮我用easyui人员选择谈框
时间: 2023-07-24 14:07:24 浏览: 100
当然可以帮您实现使用 EasyUI 的人员选择弹框。以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>人员选择弹框示例</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/easyui@1.10.8/themes/bootstrap/easyui.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/easyui@1.10.8/jquery.easyui.min.js"></script>
</head>
<body>
<h2>人员选择弹框示例</h2>
<input id="selectedUser" style="width: 200px;" readonly/>
<a href="#" class="easyui-linkbutton" onclick="openDialog()">选择人员</a>
<div id="userDialog" class="easyui-dialog" title="人员选择" style="width: 400px; height: 400px;"
closed="true" modal="true">
<!-- 这里放置人员选择的内容 -->
<!-- 例如: -->
<ul id="userList" class="easyui-tree" data-options="url:'data/userList.json', animate:true, checkbox:true"></ul>
<div style="text-align: center; margin-top: 20px;">
<a href="#" class="easyui-linkbutton" onclick="closeDialog()">确定</a>
<a href="#" class="easyui-linkbutton" onclick="cancelDialog()">取消</a>
</div>
</div>
<script type="text/javascript">
function openDialog() {
$('#userDialog').dialog('open');
}
function closeDialog() {
var selectedUsers = $('#userList').tree('getChecked');
var selectedUserNames = [];
for (var i = 0; i < selectedUsers.length; i++) {
selectedUserNames.push(selectedUsers[i].text);
}
$('#selectedUser').val(selectedUserNames.join(', '));
$('#userDialog').dialog('close');
}
function cancelDialog() {
$('#userDialog').dialog('close');
}
</script>
</body>
</html>
```
上述代码使用 EasyUI 的 dialog 和 tree 组件实现了一个简单的人员选择弹框。您可以根据您的具体需求进行修改和扩展。请注意,示例中的人员选择内容是通过加载 `data/userList.json` 文件来展示的,您可以根据实际情况修改数据源。
希望能对您有所帮助!如果有任何问题,请随时提问。
阅读全文