实训第二天之bootstrap首页框架（二)

超、凢脫俗 2022-06-03 00:19 282阅读 0赞

上一篇贴了完整源码，在本章主要介绍思路和遇到的问题  
在内联框架中主要完成的是用户个人信息的增删改查：  
首先要有用户信息的界面：  
body代码如下：

body效果图如下：  
![这里写图片描述][SouthEast]

在本界面中可以实现对用户信息的增删改查（查询由于时间缘故没实现），接下来详细介绍增删改：

1、加载用户：  
在body中创建了table ，所以我们要做的是将内容填充进去，用到的事件为$(‘\#tb’).append(str)  
思路：

1.  使用jquery的ajax请求后台的json文件
2.  $.each(result, function(index, item) 循环json数组
3.  将单个json对象的值拼凑成html语句，并且在拼凑的时候给加上id，便于之后的增加删除修改操作的进行。还需要增加的是删除和修改的按钮，便于绑定点击事件。  
    源码如下：

$.ajax({
        type: "get",
        url: "../user.json",
        async: true,
        success: function(result) { 
            var str = '<tr>';
            var index = 0;
            $.each(result, function(index, item) { 
                str = "<tr id='tr" + (index++) + "'>";
                str +=
                    '<td>' + item.id + '</td>' +
                    '<td>' + item.user + '</td>' +
                    '<td>' + item.tel + '</td>' +
                    '<td>' + item.email + '</td>' +
                    '<td>' + '<button type="button" onclick="del(this)">删除</button>' + '<button type="button" style="margin-left: 15px" onclick="update(this)">修改</button>' + '</td>'
                str += '</tr>'
                $('#tb').append(str)
            });
        },
    })

2、增添新用户：  
![这里写图片描述][SouthEast 1]  
如图所示，通过填写用户的信息点击保存可以将用户添加到表格中。  
添加操作需要注意的点在读取填写的信息和如何将信息添加至表格中，  
本人所用的办法可以完成功能，但是由于初学，没有研究出更好的解决方法。  
思路：  
1、通过jQuery选择器获取输入框的内容，通过add方法生成新的一行添加到表格的最后。  
2、add中，由于在最初加载表格的时候就已经将tr的id进行编号，所以当添加一个新的元素的时候只需要将table中的tr元素个数-1就是对应的序号，-1是因为第一行为各列的名称也为一个tr，接下来通过字符串链接拼凑出html语句  
3、用 $(‘\#tb’).append(str) 将str添加至表格最后  
实现函数源码如下：

$('#add').click(function() { 
        $('#add-modal').modal('toggle')
    })
    $('#save').click(function() { 
        var id = $('#newid')
        var user = $('#newuser')
        var tel = $('#newtel')
        var mail = $('#newmail')  
        add(id.val(),user.val(),tel.val(),mail.val())
            return true;
        })
    function add(id,user,tel,email) { 
        var index = $('#tb').find("tr").length-1
        console.log(index)
        str = "<tr id='tr" + (index) + "'>";
        str +=
            '<td>' + id + '</td>' +
            '<td>' + user + '</td>' +
            '<td>' + tel + '</td>' +
            '<td>' + email + '</td>' +
            '<td>' + '<button type="button" onclick="del(this)">删除</button>' + '<button type="button" style="margin-left: 15px" onclick="update(this)">修改</button>' + '</td>'
        str += '</tr>'
        $('#tb').append(str)
    }

3、删除用户：  
此功能较为简单，只需要在删除的时候将对应tr直接移除便可  
思路：

1.  获取对应tr对象，使用remove去除

源码如下：

function del(obj) { 
        $(obj).parent().parent().remove();
    }

4、修改用户信息：  
此功能为为麻烦的功能，因为涉及到tr的多次删除和添加，问题的麻烦点在于，type是不可以修改的，table的信息原本是放在td中的文本信息，但是修改的话就需要改变type为text，所以需要将原来td中的值保存下来后将其删除，然后在当前的位置创建一个新的input标签，type=”text”并且value为当前位置原来的对应的值。之后当用户点击了保存按钮 后，需要将当前文本框的信息获取，获取之后删除当前tr并再次创建tr为不可编辑形式。到此修改行为结束。  
需要注意的是，在进行修改的时候，原来的修改按钮需要变成保存去绑定保存的事件，当保存结束后，动态生成的按钮应该为原来的修改按钮。除此之外对this的运用是本人一直迷糊的地方。包括对jquery的作用域的不理解，致使本人写了很多功能都用的为js原生实现的。代码不工整。本人在实现的时候刚开始的想法为通过this指针去获取当前对象进行修改，但是发现不成功，后来采用获取id的方式来进行获取tr，然后采用.find方法去寻找td标签，最终获取td标签中的内容。  
此处有一个疑问为 到底何时可以用jQuery选择器，什么时候只能通过js原生实现  
源码如下：

function save(obj) { 
        var tb1 = $(obj)
        var trid = tb1.parent().parent().attr('id')
        $td = $('#' + trid).find("td")
        str = "";
        str +=
        '<td>' + $('#userid').val() + '</td>' +
        '<td>' + $('#username').val() + '</td>' +
        '<td>' + $('#usertel').val() + '</td>' +
        '<td>' + $('#useremail').val() + '</td>' +
        '<td>' + '<button type="button" onclick="del(this)">删除</button>' + '<button type="button" style="margin-left: 15px" onclick="update(this)">修改</button>' + '</td>'
    $('#' + trid).html(str)
    }
    
    function update(obj) { 
        var tb1 = $(obj)
        var trid = tb1.parent().parent().attr('id')
        var message = new Array()
        $td = $('#' + trid).find("td")
        $.each($td, function(index, item) { 
            item = $(item)
            message.push(item.text())
        })
        str = "";
        str +=
            '<td>' + '<input type="text" id="userid" value="' + message[0] + '" />' + '</td>' +
            '<td>' + '<input type="text" id="username" value="' + message[1] + '" />' + '</td>' +
            '<td>' + '<input type="text" id="usertel" value="' + message[2] + '" />' + '</td>' +
            '<td>' + '<input type="text" id="useremail" value="' + message[3] + '" />' + '</td>' +
            '<td>' + '<button type="button" onclick="del(this)">删除</button>' + '<button type="button" style="margin-left: 15px" onclick="save(this)">保存</button>' + '</td>'
        $('#' + trid).html(str)
    }

第二天到此结束。前路漫长，仍需努力

[SouthEast]: /images/20220603/9c2fd0b67b7f4f1a9ada289e706593b1.png
[SouthEast 1]: /images/20220603/2b1f7da9a29b4d9492ea4d32bc2dd917.png