静态table置入

This commit is contained in:
yubao 2017-08-30 23:44:43 +08:00
parent a83f8ce6d0
commit 08c5f7823f
6 changed files with 667 additions and 118 deletions

View File

@ -209,6 +209,7 @@
<Content Include="images\userface4.jpg" />
<Content Include="images\userface5.jpg" />
<Content Include="images\wechat.jpg" />
<Content Include="js\users.js" />
<Content Include="js\bodyTab.js" />
<Content Include="js\index.js" />
<Content Include="js\leftNav.js" />

View File

@ -46,5 +46,5 @@
</table>
</div>
<div id="page"></div>
<script type="text/javascript" src="../../layui/layui.js"></script>
<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" src="allUsers.js"></script>

View File

@ -11,7 +11,7 @@
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media="all" />
@RenderSection("header")
@RenderSection("header", false)
</head>
<body class="childrenBody">
@RenderBody()

View File

@ -1,94 +1,43 @@
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<blockquote class="layui-elem-quote news_search">
<div class="layui-inline">
<div class="layui-input-inline">
<input type="text" value="" placeholder="请输入关键字" class="layui-input search_input">
</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>
</div>
</blockquote>
<!-- #section:basics/content.breadcrumbs -->
<div class="breadcrumbs" id="breadcrumbs">
<ul class="breadcrumb">
<li>
<i class="ace-icon fa fa-home home-icon"></i>
<a href="#">用户管理</a>
</li>
<li class="active">列表</li>
</ul><!-- /.breadcrumb -->
</div>
<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>
<!-- /section:basics/content.breadcrumbs -->
<div class="page-content">
<div class="row">
<div class="col-md-12">
<div class="col-md-3">
<div class="widget-box widget-color-blue">
<div class="widget-header">
</div>
<div class="widget-body">
<div class="widget-main">
<ul id="orgtree" class="ztree" style="width: 100%"></ul>
</div>
</div>
</div>
</div>
<div class="col-md-9">
<div class="widget-box widget-color-blue">
<div class="widget-header">
@Html.Action("MenuHeader", "Home")
</div>
<div class="widget-body gridwidth">
<div class="widget-main">
<div class="row">
<div class="col-md-12 ">
<table id="maingrid"></table>
<div id="grid-pager"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- /.page-content -->
<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 id="editDlg" style="display: none">
<div class="col-xs-12">
<form class="form-horizontal" id="editForm">
<script type="text/html" id="barDemo">
<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>
</script>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right" for=""> 账号 </label>
<div class="col-sm-9">
<input type="text" id="Account" v-model="Account"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right" for=""> 姓名 </label>
<div class="col-sm-9">
<input type="text" id="Name" v-model="Name"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right" for=""> 性别 </label>
<div class="col-sm-9">
<input type="text" id="Sex" v-model="Sex"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right" for=""> 所属机构</label>
<div class="col-sm-9">
<input id="Organizations" type="text" v-model="Organizations"/>
<input id="OrganizationIds" type="hidden" v-model="OrganizationIds"/>
<div id="menuContent" class="menuContent" style="display: none;">
<ul id="org" class="ztree"></ul>
</div>
</div>
</div>
</form>
</div>
</div>
<script src="~/Content/scripts/zTree/js/jquery.ztree.excheck.js"></script>
<script src="~/BllScripts/grid.js"></script>
<script src="~/BllScripts/parentTreeMultiple.js"></script>
<script src="~/BllScripts/UserManager.js"></script>
<script src="~/BllScripts/jqEvent.js"></script>
<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" src="/js/users.js"></script>

257
OpenAuth.Mvc/js/users.js Normal file
View File

@ -0,0 +1,257 @@
layui.config({
base : "/js/"
}).use(['form','layer','jquery','laypage', '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)
});
//监听工具条
table.on('tool(demo)', function (obj) {
var data = obj.data;
if (obj.event === 'detail') {
layer.msg('ID' + data.id + ' 的查看操作');
} else if (obj.event === 'del') {
layer.confirm('真的删除行么', function (index) {
obj.del();
layer.close(index);
});
} else if (obj.event === 'edit') {
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 ? '全选' : '未全选')
}
};
$('.demoTable .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();
// }
// })
//}
})

View File

@ -1,25 +1,367 @@
[{
"usersId" : "1",
"userName" : "贤心",
"userEmail" : "xianxin@layui.com",
"userSex" : "男",
"userStatus" : "正常使用",
"userGrade" : "高级会员",
"userEndTime" : "2017-05-14 15:35"
},{
"usersId" : "2",
"userName" : "纸飞机",
"userEmail" : "fly@layui.com",
"userSex" : "男",
"userStatus" : "正常使用",
"userGrade" : "高级会员",
"userEndTime" : "2017-05-14 16:25"
},{
"usersId" : "3",
"userName" : "请叫我马哥",
"userEmail" : "mage@layui.com",
"userSex" : "男",
"userStatus" : "正常使用",
"userGrade" : "超级会员",
"userEndTime" : "2017-05-10 10:30"
}]
{
"code": 0,
"msg": "",
"count": 1000,
"data": [
{
"id": 10000,
"username": "user-0",
"sex": "女",
"city": "城市-0",
"sign": "签名-0",
"experience": 255,
"logins": 24,
"wealth": 82830700,
"classify": "作家",
"score": 57
},
{
"id": 10001,
"username": "user-1",
"sex": "男",
"city": "城市-1",
"sign": "签名-1",
"experience": 884,
"logins": 58,
"wealth": 64928690,
"classify": "词人",
"score": 27
},
{
"id": 10002,
"username": "user-2",
"sex": "女",
"city": "城市-2",
"sign": "签名-2",
"experience": 650,
"logins": 77,
"wealth": 6298078,
"classify": "酱油",
"score": 31
},
{
"id": 10003,
"username": "user-3",
"sex": "女",
"city": "城市-3",
"sign": "签名-3",
"experience": 362,
"logins": 157,
"wealth": 37117017,
"classify": "诗人",
"score": 68
},
{
"id": 10004,
"username": "user-4",
"sex": "男",
"city": "城市-4",
"sign": "签名-4",
"experience": 807,
"logins": 51,
"wealth": 76263262,
"classify": "作家",
"score": 6
},
{
"id": 10005,
"username": "user-5",
"sex": "女",
"city": "城市-5",
"sign": "签名-5",
"experience": 173,
"logins": 68,
"wealth": 60344147,
"classify": "作家",
"score": 87
},
{
"id": 10006,
"username": "user-6",
"sex": "女",
"city": "城市-6",
"sign": "签名-6",
"experience": 982,
"logins": 37,
"wealth": 57768166,
"classify": "作家",
"score": 34
},
{
"id": 10007,
"username": "user-7",
"sex": "男",
"city": "城市-7",
"sign": "签名-7",
"experience": 727,
"logins": 150,
"wealth": 82030578,
"classify": "作家",
"score": 28
},
{
"id": 10008,
"username": "user-8",
"sex": "男",
"city": "城市-8",
"sign": "签名-8",
"experience": 951,
"logins": 133,
"wealth": 16503371,
"classify": "词人",
"score": 14
},
{
"id": 10009,
"username": "user-9",
"sex": "女",
"city": "城市-9",
"sign": "签名-9",
"experience": 484,
"logins": 25,
"wealth": 86801934,
"classify": "词人",
"score": 75
},
{
"id": 10010,
"username": "user-10",
"sex": "女",
"city": "城市-10",
"sign": "签名-10",
"experience": 1016,
"logins": 182,
"wealth": 71294671,
"classify": "诗人",
"score": 34
},
{
"id": 10011,
"username": "user-11",
"sex": "女",
"city": "城市-11",
"sign": "签名-11",
"experience": 492,
"logins": 107,
"wealth": 8062783,
"classify": "诗人",
"score": 6
},
{
"id": 10012,
"username": "user-12",
"sex": "女",
"city": "城市-12",
"sign": "签名-12",
"experience": 106,
"logins": 176,
"wealth": 42622704,
"classify": "词人",
"score": 54
},
{
"id": 10013,
"username": "user-13",
"sex": "男",
"city": "城市-13",
"sign": "签名-13",
"experience": 1047,
"logins": 94,
"wealth": 59508583,
"classify": "诗人",
"score": 63
},
{
"id": 10014,
"username": "user-14",
"sex": "男",
"city": "城市-14",
"sign": "签名-14",
"experience": 873,
"logins": 116,
"wealth": 72549912,
"classify": "词人",
"score": 8
},
{
"id": 10015,
"username": "user-15",
"sex": "女",
"city": "城市-15",
"sign": "签名-15",
"experience": 1068,
"logins": 27,
"wealth": 52737025,
"classify": "作家",
"score": 28
},
{
"id": 10016,
"username": "user-16",
"sex": "女",
"city": "城市-16",
"sign": "签名-16",
"experience": 862,
"logins": 168,
"wealth": 37069775,
"classify": "酱油",
"score": 86
},
{
"id": 10017,
"username": "user-17",
"sex": "女",
"city": "城市-17",
"sign": "签名-17",
"experience": 1060,
"logins": 187,
"wealth": 66099525,
"classify": "作家",
"score": 69
},
{
"id": 10018,
"username": "user-18",
"sex": "女",
"city": "城市-18",
"sign": "签名-18",
"experience": 866,
"logins": 88,
"wealth": 81722326,
"classify": "词人",
"score": 74
},
{
"id": 10019,
"username": "user-19",
"sex": "女",
"city": "城市-19",
"sign": "签名-19",
"experience": 682,
"logins": 106,
"wealth": 68647362,
"classify": "词人",
"score": 51
},
{
"id": 10020,
"username": "user-20",
"sex": "男",
"city": "城市-20",
"sign": "签名-20",
"experience": 770,
"logins": 24,
"wealth": 92420248,
"classify": "诗人",
"score": 87
},
{
"id": 10021,
"username": "user-21",
"sex": "男",
"city": "城市-21",
"sign": "签名-21",
"experience": 184,
"logins": 131,
"wealth": 71566045,
"classify": "词人",
"score": 99
},
{
"id": 10022,
"username": "user-22",
"sex": "男",
"city": "城市-22",
"sign": "签名-22",
"experience": 739,
"logins": 152,
"wealth": 60907929,
"classify": "作家",
"score": 18
},
{
"id": 10023,
"username": "user-23",
"sex": "女",
"city": "城市-23",
"sign": "签名-23",
"experience": 127,
"logins": 82,
"wealth": 14765943,
"classify": "作家",
"score": 30
},
{
"id": 10024,
"username": "user-24",
"sex": "女",
"city": "城市-24",
"sign": "签名-24",
"experience": 212,
"logins": 133,
"wealth": 59011052,
"classify": "词人",
"score": 76
},
{
"id": 10025,
"username": "user-25",
"sex": "女",
"city": "城市-25",
"sign": "签名-25",
"experience": 938,
"logins": 182,
"wealth": 91183097,
"classify": "作家",
"score": 69
},
{
"id": 10026,
"username": "user-26",
"sex": "男",
"city": "城市-26",
"sign": "签名-26",
"experience": 978,
"logins": 7,
"wealth": 48008413,
"classify": "作家",
"score": 65
},
{
"id": 10027,
"username": "user-27",
"sex": "女",
"city": "城市-27",
"sign": "签名-27",
"experience": 371,
"logins": 44,
"wealth": 64419691,
"classify": "诗人",
"score": 60
},
{
"id": 10028,
"username": "user-28",
"sex": "女",
"city": "城市-28",
"sign": "签名-28",
"experience": 977,
"logins": 21,
"wealth": 75935022,
"classify": "作家",
"score": 37
},
{
"id": 10029,
"username": "user-29",
"sex": "男",
"city": "城市-29",
"sign": "签名-29",
"experience": 647,
"logins": 107,
"wealth": 97450636,
"classify": "酱油",
"score": 27
}
]
}