mirror of
https://gitee.com/dotnetchina/OpenAuth.Net.git
synced 2025-07-15 14:04:41 +08:00
ru
This commit is contained in:
yubaolee
parent
08c5f7823f
commit
5b8ef27b7a
@ -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>
|
||||
|
||||
8
OpenAuth.Mvc/css/treetable.css
Normal file
8
OpenAuth.Mvc/css/treetable.css
Normal file
@ -0,0 +1,8 @@
|
||||
.layui-elem-quote {
|
||||
margin-bottom: 2px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.layui-table-view {
|
||||
margin: 0 !important;
|
||||
}
|
||||
@ -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; }
|
||||
}
|
||||
@ -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"></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();
|
||||
// }
|
||||
// })
|
||||
//}
|
||||
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user