From 5b8ef27b7ad779987a7a0883518aead26ae61d7a Mon Sep 17 00:00:00 2001
From: yubaolee <yubaolee@163.com>
Date: Thu, 31 Aug 2017 16:59:19 +0800
Subject: [PATCH] ru

---
 OpenAuth.Mvc/Views/UserManager/Index.cshtml |  68 ++--
 OpenAuth.Mvc/css/treetable.css              |   8 +
 OpenAuth.Mvc/css/user.css                   |  24 --
 OpenAuth.Mvc/js/users.js                    | 387 ++++++++------------
 4 files changed, 199 insertions(+), 288 deletions(-)
 create mode 100644 OpenAuth.Mvc/css/treetable.css
 delete mode 100644 OpenAuth.Mvc/css/user.css

diff --git a/OpenAuth.Mvc/Views/UserManager/Index.cshtml b/OpenAuth.Mvc/Views/UserManager/Index.cshtml
index 69a8ca59..4e33ef4b 100644
--- a/OpenAuth.Mvc/Views/UserManager/Index.cshtml
+++ b/OpenAuth.Mvc/Views/UserManager/Index.cshtml
@@ -1,39 +1,49 @@
-<blockquote class="layui-elem-quote news_search">
+@section header
+{
+    <link rel="stylesheet" href="/css/treetable.css"/>
+}
+<blockquote class="layui-elem-quote news_search toolList">
     <div class="layui-inline">
         <div class="layui-input-inline">
-            <input type="text" value="" placeholder="请输入关键字" class="layui-input search_input">
+            <input class="layui-input" placeholder="请输入关键字" 
+                   name="key" id="key" autocomplete="off">
         </div>
-        <a class="layui-btn search_btn">查询</a>
-    </div>
-    <div class="layui-inline">
-        <a class="layui-btn layui-btn-normal usersAdd_btn">添加用户</a>
-    </div>
-    <div class="layui-inline">
-        <a class="layui-btn layui-btn-danger batchDel">批量删除</a>
+        <button class="layui-btn" data-type="search">搜索</button>
     </div>
+   
+    <button class="layui-btn " data-type="addData">添加用户</button>
+    <button class="layui-btn layui-btn-danger" data-type="del">批量删除</button>
 </blockquote>
 
-<table class="layui-table" lay-data="{height: 'full-90',url:'/json/usersList.json', page:true, id:'idTest'}" 
-       lay-filter="demo">
-    <thead>
-    <tr>
-        <th lay-data="{checkbox:true, fixed: true}"></th>
-        <th lay-data="{field:'id', width:80, sort: true, fixed: true}">ID</th>
-        <th lay-data="{field:'username', width:80}">用户名</th>
-        <th lay-data="{field:'sex', width:80, sort: true}">性别</th>
-        <th lay-data="{field:'city', width:80}">城市</th>
-        <th lay-data="{field:'sign', width:177}">签名</th>
-        <th lay-data="{field:'experience', width:80, sort: true}">积分</th>
-      
-        <th lay-data="{field:'classify', width:80}">职业</th>
-        <th lay-data="{field:'wealth', width:135, sort: true}">财富</th>
-        <th lay-data="{field:'score', width:80, sort: true}">评分</th>
-        <th lay-data="{fixed: 'right', width:160, align:'center', toolbar: '#barDemo'}"></th>
-    </tr>
-    </thead>
-</table>
+<div style="display: flex;">
+    <div style="display: inline-block; width: 180px; padding: 10px; border: 1px solid #ddd; overflow: auto;">
+        <ul id="demo1"></ul>
+    </div>
 
-<script type="text/html" id="barDemo">
+    <table class="layui-table"
+           lay-data="{height: 'full-90',url:'/json/usersList.json', page:true, id:'mainList'}"
+           lay-filter="list">
+        <thead>
+            <tr>
+                <th lay-data="{checkbox:true, fixed: true}"></th>
+                <th lay-data="{field:'id', width:80, sort: true, fixed: true}">ID</th>
+                <th lay-data="{field:'username', width:80}">用户名</th>
+                <th lay-data="{field:'sex', width:80, sort: true}">性别</th>
+                <th lay-data="{field:'city', width:80}">城市</th>
+                <th lay-data="{field:'sign', width:177}">签名</th>
+                <th lay-data="{field:'experience', width:80, sort: true}">积分</th>
+
+                <th lay-data="{field:'classify', width:80}">职业</th>
+                <th lay-data="{field:'wealth', width:135, sort: true}">财富</th>
+                <th lay-data="{field:'score', width:80, sort: true}">评分</th>
+                <th lay-data="{fixed: 'right', width:160, align:'center', toolbar: '#barList'}"></th>
+            </tr>
+        </thead>
+    </table>
+</div>
+
+
+<script type="text/html" id="barList">
     <a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="detail">查看</a>
     <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
     <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
diff --git a/OpenAuth.Mvc/css/treetable.css b/OpenAuth.Mvc/css/treetable.css
new file mode 100644
index 00000000..0a0b2650
--- /dev/null
+++ b/OpenAuth.Mvc/css/treetable.css
@@ -0,0 +1,8 @@
+.layui-elem-quote {
+    margin-bottom: 2px;
+    padding: 10px;
+}
+
+.layui-table-view {
+    margin: 0 !important;
+}
\ No newline at end of file
diff --git a/OpenAuth.Mvc/css/user.css b/OpenAuth.Mvc/css/user.css
deleted file mode 100644
index fb2e7a6d..00000000
--- a/OpenAuth.Mvc/css/user.css
+++ /dev/null
@@ -1,24 +0,0 @@
-form input.layui-input[disabled]{ background:#f2f2f2; color:#595963!important; }
-.user_left{ width:45%; float: left; margin:20px 0 0 5%; }
-.user_right{ width:25%; float: left; margin:20px 0 0 5%; text-align: center; }
-.user_right p{ margin:10px 0 25px; font-size: 12px; text-align: center; color: #FF5722;}
-.user_right img#userFace{ width:200px; height:200px; }
-.layui-table,.layui-table th{ text-align:center; }
-.userAddress.layui-form-item .layui-input-inline{ width:23%; }
-.userAddress.layui-form-item .layui-input-inline:last-child{ margin-right:0; }
-/*用户列表*/
-#page{ text-align:right; }
-
-/*修改密码*/
-.changePwd{ width:30%; margin:3% 0 0 5%; }
-
-
-/*适配*/
-@media screen and (max-width:1050px){
-	/*用户信息*/
-	.user_left,.user_right,.changePwd{ width:100%; float:none; margin-left: 0; }
-	.user_right{ margin-bottom: 20px; }
-}
-@media screen and (max-width:450px){
-	.userAddress.layui-form-item .layui-input-inline{ width:auto; }
-}
\ No newline at end of file
diff --git a/OpenAuth.Mvc/js/users.js b/OpenAuth.Mvc/js/users.js
index b2b4449d..dbc29c48 100644
--- a/OpenAuth.Mvc/js/users.js
+++ b/OpenAuth.Mvc/js/users.js
@@ -1,17 +1,122 @@
 layui.config({
-	base : "/js/"
-}).use(['form','layer','jquery','laypage', 'table'],function(){
-	var form = layui.form,
+    base: "/js/"
+}).use(['form','tree', 'layer', 'jquery', 'table'], function () {
+    var form = layui.form,
 		layer = parent.layer === undefined ? layui.layer : parent.layer,
-		laypage = layui.laypage,
 		$ = layui.jquery;
     var table = layui.table;
-    //监听表格复选框选择
-    table.on('checkbox(demo)', function (obj) {
-        console.log(obj)
+
+    layui.tree({
+        elem: '#demo1' //指定元素
+    , target: '_blank' //是否新选项卡打开（比如节点返回href才有效）
+    , click: function (item) { //点击节点回调
+        layer.msg('当前节名称：' + item.name + '<br>全部参数：' + JSON.stringify(item));
+        console.log(item);
+    }
+    , nodes: [ //节点
+      {
+          name: '常用文件夹'
+        , id: 1
+        , alias: 'changyong'
+        , children: [
+          {
+              name: '所有未读（设置跳转）'
+            , id: 11
+            , href: 'http://www.layui.com/'
+            , alias: 'weidu'
+          }, {
+              name: '置顶邮件'
+            , id: 12
+          }, {
+              name: '标签邮件'
+            , id: 13
+          }
+        ]
+      }, {
+          name: '我的邮箱'
+        , id: 2
+        , spread: true
+        , children: [
+          {
+              name: 'QQ邮箱'
+            , id: 21
+            , spread: true
+            , children: [
+              {
+                  name: '收件箱'
+                , id: 211
+                , children: [
+                  {
+                      name: '所有未读'
+                    , id: 2111
+                  }, {
+                      name: '置顶邮件'
+                    , id: 2112
+                  }, {
+                      name: '标签邮件'
+                    , id: 2113
+                  }
+                ]
+              }, {
+                  name: '已发出的邮件'
+                , id: 212
+              }, {
+                  name: '垃圾邮件'
+                , id: 213
+              }
+            ]
+          }, {
+              name: '阿里云邮'
+            , id: 22
+            , children: [
+              {
+                  name: '收件箱'
+                , id: 221
+              }, {
+                  name: '已发出的邮件'
+                , id: 222
+              }, {
+                  name: '垃圾邮件'
+                , id: 223
+              }
+            ]
+          }
+        ]
+      }
+      , {
+          name: '收藏夹'
+        , id: 3
+        , alias: 'changyong'
+        , children: [
+          {
+              name: '爱情动作片'
+            , id: 31
+            , alias: 'love'
+          }, {
+              name: '技术栈'
+            , id: 12
+            , children: [
+              {
+                  name: '前端'
+                , id: 121
+              }
+              , {
+                  name: '全端'
+                , id: 122
+              }
+            ]
+          }
+        ]
+      }
+    ]
     });
-    //监听工具条
-    table.on('tool(demo)', function (obj) {
+
+    //监听表格复选框选择
+    table.on('checkbox(list)', function (obj) {
+        console.log(obj);
+    });
+    //监听表格内部按钮
+    table.on('tool(list)', function (obj) {
         var data = obj.data;
         if (obj.event === 'detail') {
             layer.msg('ID：' + data.id + ' 的查看操作');
@@ -21,237 +126,49 @@ layui.config({
                 layer.close(index);
             });
         } else if (obj.event === 'edit') {
-            layer.alert('编辑行：<br>' + JSON.stringify(data))
+            layer.alert('编辑行：<br>' + JSON.stringify(data));
         }
     });
 
-    var  active = {
-                         getCheckData: function () { //获取选中数据
-                             var checkStatus = table.checkStatus('idTest')
-                                 , data = checkStatus.data;
-                             layer.alert(JSON.stringify(data));
-                         }
-                         , getCheckLength: function () { //获取选中数目
-                             var checkStatus = table.checkStatus('idTest')
-                                 , data = checkStatus.data;
-                             layer.msg('选中了：' + data.length + ' 个');
-                         }
-                         , isAll: function () { //验证是否全选
-                             var checkStatus = table.checkStatus('idTest');
-                             layer.msg(checkStatus.isAll ? '全选' : '未全选')
-                         }
-                     };
+    //监听页面主按钮操作
+    var active = {
+        del: function () { //批量删除
+            var checkStatus = table.checkStatus('mainList')
+                , data = checkStatus.data;
+            layer.alert(JSON.stringify(data));
+        }, addData:function() {  //添加
+            var index = layui.layer.open({
+                title: "添加",
+                type: 2,
+                content: "addUser.html",
+                success: function (layero, index) {
+                    setTimeout(function () {
+                        layui.layer.tips('点击此处返回列表',
+                            '.layui-layer-setwin .layui-layer-close', {
+                            tips: 3
+                        });
+                    }, 500);
+                }
+            });
+            //改变窗口大小时，重置弹窗的高度，防止超出可视区域（如F12调出debug的操作）
+            $(window).resize(function () {
+                layui.layer.full(index);
+            });
+            layui.layer.full(index);
+        }, search:function() {  //搜索
+            var key = $('#key');
 
-    $('.demoTable .layui-btn').on('click', function () {
+            table.reload('mainList', {
+                where: {
+                    key: key.val(),
+                    para1:"1"
+                }
+            });
+        }
+    };
+
+    $('.toolList .layui-btn').on('click', function () {
         var type = $(this).data('type');
         active[type] ? active[type].call(this) : '';
     });
-
-	////加载页面数据
-	//var usersData = '';
-	//$.get("/json/usersList.json", function(data){
-	//	usersData = data;
-	//	if(window.sessionStorage.getItem("addUser")){
-	//		var addUser = window.sessionStorage.getItem("addUser");
-	//		usersData = JSON.parse(addUser).concat(usersData);
-	//	}
-	//	//执行加载数据的方法
-	//	usersList();
-	//})
-
-	////查询
-	//$(".search_btn").click(function(){
-	//	var userArray = [];
-	//	if($(".search_input").val() != ''){
-	//		var index = layer.msg('查询中，请稍候',{icon: 16,time:false,shade:0.8});
-    //        setTimeout(function(){
-    //        	$.ajax({
-	//				url : "../../json/usersList.json",
-	//				type : "get",
-	//				dataType : "json",
-	//				success : function(data){
-	//					if(window.sessionStorage.getItem("addUser")){
-	//						var addUser = window.sessionStorage.getItem("addUser");
-	//						usersData = JSON.parse(addUser).concat(data);
-	//					}else{
-	//						usersData = data;
-	//					}
-	//					for(var i=0;i<usersData.length;i++){
-	//						var usersStr = usersData[i];
-	//						var selectStr = $(".search_input").val();
-	//	            		function changeStr(data){
-	//	            			var dataStr = '';
-	//	            			var showNum = data.split(eval("/"+selectStr+"/ig")).length - 1;
-	//	            			if(showNum > 1){
-	//								for (var j=0;j<showNum;j++) {
-	//	            					dataStr += data.split(eval("/"+selectStr+"/ig"))[j] + "<i style='color:#03c339;font-weight:bold;'>" + selectStr + "</i>";
-	//	            				}
-	//	            				dataStr += data.split(eval("/"+selectStr+"/ig"))[showNum];
-	//	            				return dataStr;
-	//	            			}else{
-	//	            				dataStr = data.split(eval("/"+selectStr+"/ig"))[0] + "<i style='color:#03c339;font-weight:bold;'>" + selectStr + "</i>" + data.split(eval("/"+selectStr+"/ig"))[1];
-	//	            				return dataStr;
-	//	            			}
-	//	            		}
-	//	            		//用户名
-	//	            		if(usersStr.userName.indexOf(selectStr) > -1){
-	//		            		usersStr["userName"] = changeStr(usersStr.userName);
-	//	            		}
-	//	            		//用户邮箱
-	//	            		if(usersStr.userEmail.indexOf(selectStr) > -1){
-	//		            		usersStr["userEmail"] = changeStr(usersStr.userEmail);
-	//	            		}
-	//	            		//性别
-	//	            		if(usersStr.userSex.indexOf(selectStr) > -1){
-	//		            		usersStr["userSex"] = changeStr(usersStr.userSex);
-	//	            		}
-	//	            		//会员等级
-	//	            		if(usersStr.userGrade.indexOf(selectStr) > -1){
-	//		            		usersStr["userGrade"] = changeStr(usersStr.userGrade);
-	//	            		}
-	//	            		if(usersStr.userName.indexOf(selectStr)>-1 || usersStr.userEmail.indexOf(selectStr)>-1 || usersStr.userSex.indexOf(selectStr)>-1 || usersStr.userGrade.indexOf(selectStr)>-1){
-	//	            			userArray.push(usersStr);
-	//	            		}
-	//	            	}
-	//	            	usersData = userArray;
-	//	            	usersList(usersData);
-	//				}
-	//			})
-            	
-    //            layer.close(index);
-    //        },2000);
-	//	}else{
-	//		layer.msg("请输入需要查询的内容");
-	//	}
-	//})
-
-	////添加会员
-	//$(".usersAdd_btn").click(function(){
-	//	var index = layui.layer.open({
-	//		title : "添加会员",
-	//		type : 2,
-	//		content : "addUser.html",
-	//		success : function(layero, index){
-	//			setTimeout(function(){
-	//				layui.layer.tips('点击此处返回会员列表', '.layui-layer-setwin .layui-layer-close', {
-	//					tips: 3
-	//				});
-	//			},500)
-	//		}
-	//	})
-	//	//改变窗口大小时，重置弹窗的高度，防止超出可视区域（如F12调出debug的操作）
-	//	$(window).resize(function(){
-	//		layui.layer.full(index);
-	//	})
-	//	layui.layer.full(index);
-	//})
-
-	////批量删除
-	//$(".batchDel").click(function(){
-	//	var $checkbox = $('.users_list tbody input[type="checkbox"][name="checked"]');
-	//	var $checked = $('.users_list tbody input[type="checkbox"][name="checked"]:checked');
-	//	if($checkbox.is(":checked")){
-	//		layer.confirm('确定删除选中的信息？',{icon:3, title:'提示信息'},function(index){
-	//			var index = layer.msg('删除中，请稍候',{icon: 16,time:false,shade:0.8});
-	//            setTimeout(function(){
-	//            	//删除数据
-	//            	for(var j=0;j<$checked.length;j++){
-	//            		for(var i=0;i<usersData.length;i++){
-	//						if(usersData[i].newsId == $checked.eq(j).parents("tr").find(".news_del").attr("data-id")){
-	//							usersData.splice(i,1);
-	//							usersList(usersData);
-	//						}
-	//					}
-	//            	}
-	//            	$('.users_list thead input[type="checkbox"]').prop("checked",false);
-	//            	form.render();
-	//                layer.close(index);
-	//				layer.msg("删除成功");
-	//            },2000);
-	//        })
-	//	}else{
-	//		layer.msg("请选择需要删除的文章");
-	//	}
-	//})
-
-    ////全选
-	//form.on('checkbox(allChoose)', function(data){
-	//	var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]:not([name="show"])');
-	//	child.each(function(index, item){
-	//		item.checked = data.elem.checked;
-	//	});
-	//	form.render('checkbox');
-	//});
-
-	////通过判断文章是否全部选中来确定全选按钮是否选中
-	//form.on("checkbox(choose)",function(data){
-	//	var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]:not([name="show"])');
-	//	var childChecked = $(data.elem).parents('table').find('tbody input[type="checkbox"]:not([name="show"]):checked')
-	//	if(childChecked.length == child.length){
-	//		$(data.elem).parents('table').find('thead input#allChoose').get(0).checked = true;
-	//	}else{
-	//		$(data.elem).parents('table').find('thead input#allChoose').get(0).checked = false;
-	//	}
-	//	form.render('checkbox');
-	//})
-
-	////操作
-	//$("body").on("click",".users_edit",function(){  //编辑
-	//	layer.alert('您点击了会员编辑按钮，由于是纯静态页面，所以暂时不存在编辑内容，后期会添加，敬请谅解。。。',{icon:6, title:'文章编辑'});
-	//})
-
-	//$("body").on("click",".users_del",function(){  //删除
-	//	var _this = $(this);
-	//	layer.confirm('确定删除此用户？',{icon:3, title:'提示信息'},function(index){
-	//		//_this.parents("tr").remove();
-	//		for(var i=0;i<usersData.length;i++){
-	//			if(usersData[i].usersId == _this.attr("data-id")){
-	//				usersData.splice(i,1);
-	//				usersList(usersData);
-	//			}
-	//		}
-	//		layer.close(index);
-	//	});
-	//})
-
-	//function usersList(){
-	//	//渲染数据
-	//	function renderDate(data,curr){
-	//		var dataHtml = '';
-	//		currData = usersData.concat().splice(curr*nums-nums, nums);
-	//		if(currData.length != 0){
-	//			for(var i=0;i<currData.length;i++){
-	//				dataHtml += '<tr>'
-	//		    	+  '<td><input type="checkbox" name="checked" lay-skin="primary" lay-filter="choose"></td>'
-	//		    	+  '<td>'+currData[i].userName+'</td>'
-	//		    	+  '<td>'+currData[i].userEmail+'</td>'
-	//		    	+  '<td>'+currData[i].userSex+'</td>'
-	//		    	+  '<td>'+currData[i].userGrade+'</td>'
-	//		    	+  '<td>'+currData[i].userStatus+'</td>'
-	//		    	+  '<td>'+currData[i].userEndTime+'</td>'
-	//		    	+  '<td>'
-	//				+    '<a class="layui-btn layui-btn-mini users_edit"><i class="iconfont icon-edit"></i> 编辑</a>'
-	//				+    '<a class="layui-btn layui-btn-danger layui-btn-mini users_del" data-id="'+data[i].usersId+'"><i class="layui-icon">&#xe640;</i> 删除</a>'
-	//		        +  '</td>'
-	//		    	+'</tr>';
-	//			}
-	//		}else{
-	//			dataHtml = '<tr><td colspan="8">暂无数据</td></tr>';
-	//		}
-	//	    return dataHtml;
-	//	}
-
-	//	//分页
-	//	var nums = 13; //每页出现的数据量
-	//	laypage.render({
-	//		cont : "page",
-	//		pages : Math.ceil(usersData.length/nums),
-	//		jump : function(obj){
-	//			$(".users_content").html(renderDate(usersData,obj.curr));
-	//			$('.users_list thead input[type="checkbox"]').prop("checked",false);
-	//	    	form.render();
-	//		}
-	//	})
-	//}
-        
 })
\ No newline at end of file