sso项目心得第一天

1.人员添加

<div class="clearfix">
<div class="btn-group">
<button id="btn_add" class="btn yellow" onclick="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" onclick="clear_diaglog();">关闭</button>
<button type="button" class="btn btn-primary" onclick="portal_submit();">提交更改</button>
</div>
</div><!-- /.modal-content -->
 </div>
</div><!-- /.modal -->
<div>

2.人员信息的修改

<a href="javascript:edit('+row.userId+')">编辑</a>//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=" itsasecrest@mail.com" style="margin:20px 10px 10px 0">    </div></div>
//保存当前信息
<div class="modal-footer"><button type="button" class="btn btn-primary" onclick="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.//删除操作
<a href="javascript:del('+row.userId+')">删除</a> //携带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.//进入网页显示用户信息$(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 : 'userId', title : 'ID', hidden:'true', width : '3%', align : 'center', formatter : function(value, row, index) { return value; } },*/{            field : 'userName',            title : '用户名称',            width : '10%',            align : 'center',            formatter : function(value, row, index) {                return value;            }        },/*, { field : 'email', title : '邮箱', width : '16%', align : 'center', formatter : function(value) { return value; } }, { field : 'realName', title : '姓名', width : '16%', align : 'center', formatter : function(value) { return value; } }, { field : 'telephone', title : '电话', width : '12%', align : 'center', formatter : function(value) { return value; } }, */{            field : 'do',            title : '操作',            width : '20%',            align : 'center',            formatter : function(value, row) {                var str = '';                str += '<a href="javascript:edit('+row.userId+')">编辑</a>';                str += '&nbsp;|&nbsp; <a href="javascript:del('+row.userId+')">删除</a>';                return str;            }        } ] ],        onLoadSuccess: function () {  //加载成功时执行 //layer.msg("加载成功"); },        onLoadError: function () {  //加载失败时执行 // layer.msg("加载数据失败", {time: 1500, icon: 2}); }    });}

秒客网

sso项目心得第一天

相关文章