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><!-- /.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" ο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.//删除操作
<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.//进入网页显示用户信息    （用了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>
</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 += '<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});
        }
    });
}