zoukankan      html  css  js  c++  java
  • 基于maven+ssm的增删改查之批量删除之全选全不选

    首先是在Index.jsp中加入checkbox多选:

                        <thead>
                            <tr>
                                <th>
                                    <input type="checkbox" id="check_all"/>
                                </th>
                                <th>#</th>
                                <th>epmName</th>
                                <th>gender</th>
                                <th>email</th>
                                <th>deptName</th>
                                <th>操作</th>
                            </tr>
                        </thead>

    然后是在list.jsp中为每一条记录也加上多选:

    //员工信息
    function build_emps_table(result){
        $("#emps_tables tbody").empty();
        var emps = result.extend.pageInfo.list;
        $.each(emps,function(index,item){
            var checkboxTd = $("<td><input type='checkbox' class='check_item'/></td>");
            var empIdTd = $("<td></td>").append(item.empId);
            var empNameTd = $("<td></td>").append(item.empName); 
            var genderTd = $("<td></td>").append(item.gender == "M"?"男":"女");
            var emailTd = $("<td></td>").append(item.email);
            var deptNameTd = $("<td></td>").append(item.dept.deptName);
            var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
                                                .append($("<span></span>").addClass("glyphicon glyphicon-pencil"))
                                                .append("编辑");
            //添加一个自定义的属性,表示当前员工id
            editBtn.attr("edit-id", item.empId)
            var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
                                            .append($("<span></span>").addClass("glyphicon glyphicon-trash"))
                                            .append("删除");
            delBtn.attr("del-id", item.empId)
            var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
            //alert(item.empName);
            $("<tr></tr>").append(checkboxTd)
                .append(empIdTd)
                .append(empNameTd)
                .append(genderTd)
                .append(emailTd)
                .append(deptNameTd)
                .append(btnTd)
                .appendTo("#emps_tables tbody");
        });
    }

    最后就是在delete.js中加上逻辑:

    //全选或全不选
    $("#check_all").click(function(){
        //prop获取原生的,attr获取自定义的值
        //$(this).prop("checked");
        $(".check_item").prop("checked",$(this).prop("checked"));        
    });
    
    //check_item,用于我们选中所有的之后,开头的check_all也被选中
    $(document).on("click",".check_item",function(){
        //判断当前选中元素是否为总个数,如果是,则将check_all也选上
        var flag = $(".check_item:checked").length==$(".check_item").length;
        $("#check_all").prop("checked",flag);
    });

    启动服务器看下效果:

  • 相关阅读:
    SP375 QTREE
    「2017 山东一轮集训 Day5」字符串 (后缀自动机, 拓扑排序)
    [SDOI2016]生成魔咒(后缀自动机)
    bzoj3252: 攻略(贪心)
    bzoj2961 共点圆 (CDQ分治, 凸包)
    [CTSC2012]熟悉的文章 (后缀自动机 单调队列)
    bzoj3622: 已经没有什么好害怕的了
    [SDOI2013]泉(容斥)
    [SHOI2012]信用卡凸包(计算几何)
    CF1139D Steps to One (莫比乌斯反演 期望dp)
  • 原文地址:https://www.cnblogs.com/xiximayou/p/12240589.html
Copyright © 2011-2022 走看看