sso项目心得第一天
1.人员添加
<div class="clearfix"> <div class="btn-group"> <button id="btn_add" class="btn yellow" οnclick="user_add()"> 新增 <i class="icon-plus" >i> button> div> div>
function user_add() { $('#myModal').modal();//让隐藏的mymodel的div悬浮在最上层显示 }
function portal_submit() {
//获取要提交的input框中的value值
var userId =$('#userId').val();
var userName = $('#userName').val();
var email = $('#email').val();
var password = $('#password').val();
var realName = $('#realName').val();
var telephone = $('#telephone').val();
var remark = $('#remark').val();
var status = $('#status').val();
if ($.trim(userName) == "") {
$.messager.show({
title : titleInfo,
msg : '用户名不能为空！',
timeout : timeoutValue,
showType : 'slide'
});
return;
}
if ($.trim(email) == "") {
$.messager.show({
title : titleInfo,
msg : '邮箱不能为空！',
timeout : timeoutValue,
showType : 'slide'
});
return;
}
var portal = {//给condition中的属性一一对应
'userName' : userName,
'email' : email,
'passWord' : password,
'userId' :userId,
'realName':realName,
'telephone':telephone,
'remark':remark,
'status':status
};
if(userId !=null && userId !=''){
// $.post(ctx + "/userWeb/updateUser", portal, function(data) {
$("#user_table").bootstrapTable('refresh', param);
$("#myModal").modal('hide');
}else
$.post(ctx + "/userWeb/saveUser", portal, function(data) {将portal中的值通过post提交到后台
if (data.returnValue == 0) {
alert( '新增成功！');
$("#myModal").modal('hide');
$("#user_table").bootstrapTable('refresh', param);
} else {
alert( '新增失败！');
}
}, "json");
}
//被隐藏的悬浮框
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">button> <h4 class="modal-title" id="myModalLabel">新增用户h4> div> <div class="modal-body"> <input id="userId1" type="hidden"> <div class="form-group"> <label for="userName">用户名：label> <input type="text" name="txt_recommendName" class="form-control" id="userName" placeholder="用户名"> div> <div class="form-group"> <label for="password">密码：label> <input type="text" name="txt_timeSpan" class="form-control" id="password" placeholder="密码"> div> <div class="form-group"> <label for="email">邮箱：label> <input type="text" name="txt_timeSpan" class="form-control" id="email" placeholder="邮箱"> div> <div class="form-group"> <label for="telephone">电话：label> <input type="text" name="txt_timeSpan" class="form-control" id="telephone" placeholder="电话"> div> <div class="form-group"> <label for="realName">姓名：label> <input type="text" name="txt_timeSpan" class="form-control" id="realName" placeholder="姓名"> div> <div class="form-group"> <label for="remark">备注：label> <input type="text" name="txt_timeSpan" class="form-control" id="remark" placeholder="备注"> div> <div class="form-group"> <label for="status">是否有效：label> <input type="text" name="txt_timeSpan" class="form-control" id="status" placeholder="是否有效"> div> div> <div class="modal-footer"> <button type="button" class="btn btn-primary" οnclick="clear_diaglog();">关闭button> <button type="button" class="btn btn-primary" οnclick="portal_submit();">提交更改button> div> div> div> div> <div>
2.人员信息的修改
编辑//a标签传递userId的值 调用edit（userId）方法
//给input框中赋值，显示通过userId查询的对应的用户的信息
function edit(userId) { var portal = { 'userId' : userId }; $.post(ctx + "/userWeb/getUserInfoById", portal, function(data) { var user=JSON.parse(data); debugger; if (user.returnValue == 0) { $('#uId').val(user.data.userId); $('#uname').val(user.data.userName); $('#uemail').val(user.data.email); $('#upassword').val(user.data.passWord); $('#upasswordy').val(user.data.passWord); $('#urealname').val(user.data.realName); $('#utelephone').val(user.data.telephone); $('#uremak').val(user.data.remark); $('#input_id').val(user.data.userId); } });
//被赋值的表格
<div class="span5" style="box-shadow:inset 1px -1px 1px #dddddd, inset -1px 1px 1px #dddddd;margin:0"> <h5 class="page-title">用户信息h5><hr> <div id="body2"> <input id="uId" type="hidden" > <span style="display:block;margin: 25px 10px 0 10px;width:80px;float: left">用户名称：span><input id="uname" type="text" class="m-wrap span8" placeholder="张三" style="margin:20px 10px 0 0"> <span style="display:block;margin: 25px 10px 0 10px;width:80px;float: left">邮箱：span> <input id="uemail" type="text" class="m-wrap span8" placeholder="xxxx" style="margin:20px 10px 0 0"> <span style="display:block;margin: 25px 10px 0 10px;width:80px;float: left">密码：span> <input id="upassword" type="text" class="m-wrap span8" placeholder="xxxx" style="margin:20px 10px 0 0"> <span style="display:block;margin: 25px 10px 0 10px;width:80px;float: left">确认密码：span><input id="upasswordy" class="m-wrap span8" placeholder="xxxx" style="margin:20px 10px 0 0"> <span style="display:block;margin: 25px 10px 0 10px;width:80px;float: left">姓名：span> <input id="urealname" class="m-wrap span8" placeholder="张三" style="margin:20px 10px 0 0"> <span style="display:block;margin: 25px 10px 0 10px;width:80px;float: left">电话：span> <input id="utelephone" class="m-wrap span8" placeholder="xxxx" style="margin:20px 10px 0 0"> <span style="display:block;margin: 25px 10px 15px 10px;width:80px;float: left">备注：span> <input id="uremak" class="m-wrap span8" placeholder=" [email protected]" style="margin:20px 10px 10px 0"> div> div>
//保存当前信息
<div class="modal-footer"> <button type="button" class="btn btn-primary" οnclick="update();">ok,保存当前信息button> div>
对修改之后的信息进行提交
function update() { var portal = { 'userId' : $('#uId').val(), 'userName':$('#uname').val(), 'email':$('#uemail').val(), 'passWord':$('#upassword').val(), 'passWord':$('#upasswordy').val(), 'realName':$('#urealname').val(), 'telephone':$('#utelephone').val(), 'remark':$('#uremak').val() }; $.post(ctx + "/userWeb/updateUser", portal, function(data) { if (data.returnValue == 0) { alert( '成功！'); } else { alert( '失败！'); } }, "json"); }
3.//删除操作
+row.userId+')">删除 //携带userId去删除操作
function del(userId) { if (confirm("是否确认删除？")) { var portal = { 'userId' : userId, }; console.log("userId= "+userId); $.post(ctx + "/userWeb/deleteUser", portal, function(data) { if (data.returnValue == 0) { alert( '成功！'); $("#myModal").modal('hide'); $("#user_table").bootstrapTable('refresh', param); } else { alert( '失败！'); } }, "json"); } }
4.//进入网页显示用户信息 （用了bootstrup2中的bootstrup-table组件）
<div class="portlet-body ">
<table class="table table-striped table-bordered table-hover dataTable" id="user_table" aria-describedby="sample_1_info"> table>
<div class="row-fluid"> <div class="span6"> <div class="dataTables_info" id="sample_1_info">div> div> div>
$(document).ready(function () { initUserTable(); clear_diaglog(); }); var param ={}; function initUserTable(){ //先销毁表格 $('#user_table').bootstrapTable('destroy'); //初始化表格,动态从服务器加载数据 $("#user_table").bootstrapTable({ method: "get", //使用get请求到服务器获取数据 url: ctx + "/userWeb/getPageList", //获取数据的Servlet地址 striped: true, //表格显示条纹 clickToSelect: false, pagination: true, //启动分页 pageSize: 10, //每页显示的记录数 pageNumber: 1, //当前第几页 pageList: [5, 10, 15, 20, 25], //记录数可选列表 search: false, //是否启用查询 // showColumns: true, //显示下拉框勾选要显示的列 showRefresh: false, //显示刷新按钮 sidePagination: "server", //表示服务端请求 //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder //设置为limit可以获取limit, offset, search, sort, order queryParamsType: "undefined", queryParams: function queryParams(params) { //设置查询参数 param = { page: params.pageNumber, rows: params.pageSize }; return param; }, columns : [ [ { field : 'userName', title : '用户名称', width : '10%', align : 'center', formatter : function(value, row, index) { return value; } },{ field : 'do', title : '操作', width : '20%', align : 'center', formatter : function(value, row) { var str = ''; str += 'userId+')">编辑'; str += ' | userId+')">删除'; return str; } } ] ], onLoadSuccess: function () { //加载成功时执行 //layer.msg("加载成功"); }, onLoadError: function () { //加载失败时执行 // layer.msg("加载数据失败", {time: 1500, icon: 2}); } }); }