bootstrap心路历程

最新推荐文章于 2022-04-25 01:31:22 发布

卷起裤腿过河

最新推荐文章于 2022-04-25 01:31:22 发布

阅读量473

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_39885753/article/details/89520962

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

点点滴滴记录
持续记录,未准时更新
主要记录使用bootstrap使用过程中碰到的奇特小点
1.用于过滤输入不合理范围的值此处的数据范围在 1~最大值

<input type="number" oninput="if(value >'+最大值+' || value < 1 ){layer.msg(\'请输入合理还款！\');value = \'\'}"  />

bootstrap行编辑学习:链接地址
https://blog.csdn.net/dizuncainiao/article/details/81742971
比较全的行编辑学习地址:
https://www.cnblogs.com/landeanfen/p/5821192.html

bootstrap table 假删除（前端假删除，单机之后去除表格数据）
1.下面的方法类似于递归假删除
在这里插入图片描述
但是我遇到的情况不符合这种情况。
情景描述：给项目团队添加成员，默认添加所在部门成员，可进行跨部门进行添加。添加后的成员不能再次添加进该团队，除非该团队成员离开本项目后再次添加进入本团队，以下使用截图进行展示。因为牵扯到使用thymeleaf的问题，前端使用标签所以使用原始js方法比较多

/**
* 参数id为机构id  根据机构id获取该机构下的人员
*/
function initTable(id) {
    var data = {};
    $.post(ctxPath + "sys/user/findPersonList/"+id,{sysUser:JSON.stringify(data)},function (result) {
        var data = result.data;
        if($("#tabShare tr").length > 1){
            var haveData = [];
            /*获取列表中的人员信息，存在状态*/
            $("#tabShare tr").each(function () {
                var haveUser ={}
                var userId = $(this).find("input[name='userId']").val();
                var userStatus = $(this).find("input[name='userStatus']").val();
                haveUser.id = userId;
                haveUser.status = userStatus;
                haveData.push(haveUser);
            });
            data = masked(data,haveData);
        }
        //将处理过的人员信息装给bootstrap table
        initSearchTable(data);
    });

}

//根据列表中存在的人员剔除根据机构id查询出来的人员
function masked(firstArray,haveData) {
    for (var i = 0;i < haveData.length;i++){
        for(var j = 0; j < firstArray.length;j++){
            if (firstArray[j].id == haveData[i].id && haveData[i].status == '0'){
                firstArray.splice(j,1);
            }
        }
    }
    var data = firstArray;
    return data;
}

结合第一张上图中展示的代码可以实现该功能。
最后加了根据公司组织机构改变人员信息（跨部门选人），以下是成果展示：
在这里插入图片描述