From f14fa890210bee97ba5ffe307a38ab554acb9838 Mon Sep 17 00:00:00 2001
From: Administrator <450292408@qq.com>
Date: Thu, 21 Oct 2021 10:26:22 +0000
Subject: [PATCH] docs: update wg-basic/page-unit
---
wg-basic/page-unit.md | 255 +++++++++++++++++++++++++++++++++++++++---
1 file changed, 239 insertions(+), 16 deletions(-)
diff --git a/wg-basic/page-unit.md b/wg-basic/page-unit.md
index 2069ecc..4283370 100644
--- a/wg-basic/page-unit.md
+++ b/wg-basic/page-unit.md
@@ -2,7 +2,7 @@
title: 页面组件
description: 页面上使用的组件
published: true
-date: 2021-10-21T10:05:20.437Z
+date: 2021-10-21T10:26:21.262Z
tags: wg-basic
editor: markdown
dateCreated: 2021-09-08T06:41:19.351Z
@@ -204,21 +204,7 @@ table.on('tool(dataTable)', function(obj) {
# 8. 选择人员（表格）
```javascript
-top.dialog.dialogData.oldSelectedUserList = [{userId:''}];
-top.dialog.open({
- url: 'route/common/listselectuser?selectType=checkbox(radio)',
- title: '选择用户',
- width: '1000px',
- height: '500px',
- onClose: function() {
- var newSelectedUserList = top.dialog.dialogData.newSelectedUserList;
- if(newSelectedUserList.length != 0) {
- // newSelectedUserList[0].userId;
- // newSelectedUserList[0].userName;
- }
- top.dialog.dialogData.oldSelectedUserList = [];
- }
-});
+
```
# 9. 文件上传（图片示例）
依赖
@@ -471,4 +457,241 @@ form.on('select(typeFilter)', function(data) {
```javascript
var params = top.restAjax.params(window.location.href);
var xxx = params.xxx;
+```
+
+# 14.列表选择
+html：列表页面
+```html
+
+```
+```javascript
+layui.config({
+ base: 'assets/layuiadmin/'
+}).extend({
+ index: 'lib/index'
+}).use(['index', 'table', 'laydate', 'common'], function() {
+ var $ = layui.$;
+ var $win = $(window);
+ var table = layui.table;
+ var admin = layui.admin;
+ var common = layui.common;
+ var selectType = top.restAjax.params(window.location.href).selectType;
+ selectType = selectType ? selectType : 'radio'
+ var tableUrl = 'api/user/listpageusersimple';
+ var oldSelectedUserList = top.dialog.dialogData.oldSelectedUserList;
+ // 清空上次选择
+ top.dialog.dialogData.newSelectedUserList = [];
+ var newSelectedUserList = [];
+ var tableData = [];
+
+ // 初始化选择列表
+ function initNewSelectedUserList() {
+ for(var i = 0, item; item = oldSelectedUserList[i++];) {
+ newSelectedUserList.push(item);
+ }
+ }
+ initNewSelectedUserList();
+
+ // 初始化表格
+ function initTable() {
+ $.extend(table, {config: {checkName: 'checked'}});
+ table.render({
+ elem: '#dataTable',
+ id: 'dataTable',
+ url: top.restAjax.path(tableUrl, []),
+ width: admin.screen() > 1 ? '100%' : '',
+ height: $win.height() - 50,
+ limit: 20,
+ limits: [20, 40, 60, 80, 100, 200],
+ request: {
+ pageName: 'page',
+ limitName: 'rows'
+ },
+ cols: [
+ [
+ {type: selectType, fixed: 'left'},
+ {field:'rowNum', width:80, title: '序号', fixed: 'left', align:'center', templet: '{{d.LAY_INDEX}}'},
+ {field: 'userUsername', width: 150, title: '用户名', align:'center',
+ templet: function(row) {
+ var rowData = row[this.field];
+ if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
+ return '-';
+ }
+ return rowData;
+ }
+ },
+ {field: 'userName', width: 150, title: '昵称', align:'center',
+ templet: function(row) {
+ var rowData = row[this.field];
+ if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
+ return '-';
+ }
+ return rowData;
+ }
+ },
+ {field: 'userPhone', width: 220, title: '用户手机', align:'center',
+ templet: function(row) {
+ var rowData = row[this.field];
+ if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
+ return '-';
+ }
+ return rowData;
+ }
+ },
+ {field: 'userEmail', width: 220, title: '用户邮箱', align:'center',
+ templet: function(row) {
+ var rowData = row[this.field];
+ if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
+ return '-';
+ }
+ return rowData;
+ }
+ }
+ ]
+ ],
+ page: true,
+ parseData: function(data) {
+ for(var i = 0, item; item = data.rows[i++];) {
+ if(!newSelectedUserList) {
+ item.checked = false;
+ continue;
+ }
+ var isSelected = false;
+ for(var j = 0, jItem; jItem = newSelectedUserList[j++];) {
+ if(item.userId === jItem.userId) {
+ isSelected = true;
+ break;
+ }
+ }
+ if(isSelected) {
+ item.checked = true;
+ } else {
+ item.checked = false;
+ }
+ }
+ tableData = data.rows;
+
+ return {
+ 'code': 0,
+ 'msg': '',
+ 'count': data.total,
+ 'data': data.rows
+ };
+ }
+ });
+ }
+
+ // 重载表格
+ function reloadTable(currentPage) {
+ table.reload('dataTable', {
+ url: top.restAjax.path(tableUrl, []),
+ where: {
+ keywords: $('#keywords').val(),
+ },
+ page: {
+ curr: currentPage
+ },
+ height: $win.height() - 50,
+ });
+ }
+ initTable();
+
+ function isUserSelected(userId) {
+ for(var i = 0, item; item = newSelectedUserList[i++];) {
+ if(userId == item.userId) {
+ return true;
+ }
+ }
+ return false;
+ }
+
+ function addUserSelected(userItem) {
+ if(isUserSelected(userItem.userId)) {
+ return;
+ }
+ newSelectedUserList.push({
+ userId: userItem.userId,
+ userUsername: userItem.userUsername,
+ userName: userItem.userName,
+ userPhone: userItem.userPhone,
+ userEmail: userItem.userEmail
+ })
+ }
+
+ function removeUserSelected(userItem) {
+ for(var i = 0, item; item = newSelectedUserList[i++];) {
+ if(userItem.userId == item.userId) {
+ newSelectedUserList.splice(--i, 1);
+ i--;
+ return;
+ }
+ }
+ }
+
+ table.on('checkbox(dataTable)', function(obj) {
+ if(obj.type === 'all') {
+ if(obj.checked) {
+ // 添加全部
+ for(var i = 0, item; item = tableData[i++];) {
+ addUserSelected(item);
+ }
+ } else {
+ // 删除全部
+ for(var i = 0, item; item = tableData[i++];) {
+ removeUserSelected(item);
+ }
+ }
+ } else {
+ if(obj.checked) {
+ addUserSelected(obj.data);
+ } else {
+ removeUserSelected(obj.data);
+ }
+ }
+ });
+
+ table.on('radio(dataTable)', function(obj) {
+ newSelectedUserList.splice(0, newSelectedUserList.length);
+ addUserSelected(obj.data);
+ });
+ $(document).on('click', '#search', function() {
+ reloadTable(1);
+ });
+ $(document).on('click', '#confirm', function() {
+ top.dialog.dialogData.newSelectedUserList = newSelectedUserList;
+ top.dialog.closeBox();
+ });
+});
+```
+调用方式：其他页面
+```javascript
+// 这里的列表数据格式根据实际情况变化
+top.dialog.dialogData.oldSelectedUserList = [{userId:''}];
+top.dialog.open({
+ url: 'route/common/listselectuser?selectType=checkbox(radio)',
+ title: '选择用户',
+ width: '1000px',
+ height: '500px',
+ onClose: function() {
+ var newSelectedUserList = top.dialog.dialogData.newSelectedUserList;
+ if(newSelectedUserList.length != 0) {
+ // newSelectedUserList[0].userId;
+ // newSelectedUserList[0].userName;
+ }
+ top.dialog.dialogData.oldSelectedUserList = [];
+ }
+});
```
\ No newline at end of file