基于Bootstrap+Nodejs的Web应用（四）_数据修改

1综述

模拟用户对表格数据的增加、删除、修改。

1. 本次使用bootstrap插件modal模态对话框实现新增、修改数据的录入窗口
2. bootstraptable的getSelections获取选定的记录。

2模态对话框

与win桌面程序类似，是父窗体之上的窗体，强制焦点，不关闭不允许切换到父窗体。
实质是：隐藏的div，是否模态显示。

3布局

定义模态对话框

要素	说明
class=modal	模态显示
class=fade	淡入淡出效果
modal-header	标题
modal-body	主体
modal-footer	底部，一般是按钮等触发标签

<div class="modal fade" id="addUserModal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3>新增用户</h3>
                    </div>
                    <div class="modal-body">
                        <form id="addUserForm" class="form-horizontal">
                            <div class="form-group">
                                <label for="s_id" class="col-sm-2 control-label">ID</label>
                                <div class="col-sm-7">
                                    <input type="account" name="s_id" class="form-control" id="s_id" placeholder="ID"/>
                                </div>
                                <label id="errorAccount" for="inputAccount" class="col-sm-3 control-label"></label>
                            </div>
                            <div class="form-group" >
                                <label for="s_name" class="col-sm-2 control-label">姓名</label>
                                <div class="col-sm-7">
                                    <input type="text" name="s_name" class="form-control" id="s_name" placeholder="密码"/>
                                </div>
                                <label id="errorPassword" for="s_name" class="col-sm-3 control-label"></label>
                            </div>
                            <div class="form-group">
                                <label for="s_age" class="col-sm-2 control-label">年龄</label>
                                <div class="col-sm-7">
                                    <input type="name" name="s_age" class="col-sm-4 form-control" id="s_age" placeholder="年龄"/>
                                </div>
                                <label id="errorName" for="s_age" class="col-sm-3 control-label"></label>
                            </div>
                            <div class="form-group">
                                <label for="inputSex" class="col-sm-2 control-label">性别</label>
                                <div class="col-sm-7">
                                    <input type="sex" name="sex" class="col-sm-4 form-control" id="inputSex" placeholder="性别"/>
                                </div>
                                <label id="errorSex" for="inputSex" class="col-sm-3 control-label"></label>
                            </div>
                            <div class="form-group">
                                <label for="inputPhone" class="col-sm-2 control-label">手机</label>
                                <div class="col-sm-7">
                                    <input type="phone" name="phone" class="col-sm-4 form-control" id="inputPhone" placeholder="手机"/>
                                </div>
                                <label id="errorPhone" for="inputPhone" class="col-sm-3 control-label"></label>
                            </div>
                            <div class="form-group">
                                <label for="inputEmail" class="col-sm-2 control-label">邮箱</label>
                                <div class="col-sm-7">
                                    <input type="email" name="email" class="col-sm-4 form-control" id="inputEmail" placeholder="邮箱"/>
                                </div>
                                <label id="errorEmail" for="inputEmail" class="col-sm-3 control-label"></label>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="conf" class="btn btn-default" onclick="addUser()">确定</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal" onclick="resetAddModal()">取消</button>
                    </div>
                </div>              
            </div>
        </div>

模态对话框的触发

<button id="btn_add_out" type="button" class="btn btn-default" data-toggle="modal" data-target="#addUserModal">
    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>

4以修改为例

1. 弹出模态对话框并填充选择行的信息

//用户编辑modal传参
function updateUserModal(){
    //$("#addUserModal").modal('show');
    debugger;
    var rows=$("#tabUsers").bootstrapTable("getSelections");
    if(rows.length!=1) {
        alert("请选择1条记录");
        //$("#updateUserModal").modal('hide');
        return;
    };
    var row=rows[0];
    $("#se_id").val(row.id);
    $("#se_name").val(row.name);
    $("#se_age").val(row.aget);
    $("#updateUserModal").modal("show");
};

3. 点击保存提交后台

function addUser(){
        //序列化表单元素（类似 .serialize() 方法），返回 JSON 数据结构数据
        var param = $("#addUserForm").serializeArray();
        debugger;
        // $("#conf").attr("onclick","addUser()");
        $.ajax({
            url:"/users_Adduser",
            method:"post",
            data:param,
            dataType:"json",
            success:function(data){
                if(data.dbret=="success"){
                    //document.getElementById("al").innerText="新增成功";
                    //$("#addEnd").modal('show');
                    $("#addUserModal").modal('hide');
                    $("#tabUsers").bootstrapTable('refresh');
                }
            },
            error:function(){
                //document.getElementById("al").innerText="新增失败";
                //$("#addEnd").modal('show');
                alert("新增失败");
            }
        });

5删除

删除简单，只需要获取选中的行的key上传即可。

var delUsers = function () {
        var rows=$("#tabUsers").bootstrapTable('getSelections');
        if (rows.length==0){
            alert("请选择要删除的记录");
            return;
        }
        var ids="";
        for (var i=0;i<rows.length;i++){
            ids+=rows[i]['id']+",";
        }
        ids=ids.substring(0,ids.length-1);

        $.ajax({
            url:"/delUsers",
            type:"post",
            data:{ids:ids},
            success:function(){
                $("#tabUsers").bootstrapTable('refresh');
            }
        });
    };

问题

模态对话框是bootstrap原生的方法，但是批量修改数据时，操作稍显麻烦。
有更高效的edittable插件可以使用，感兴趣的自己试验下。