zoukankan      html  css  js  c++  java
  • 复选框批量删除操作-jquery方式

    1.首先在页面添加一个批量删除的按钮:<li class="btns"><input id="deleteSubmit" class="btn btn-primary" type="submit" value="批量删除"/></li>

    2.在列表项中添加设置复选框:

    <table id="contentTable" class="table table-striped table-bordered table-condensed">

    <thead>
    <tr>
    <th>
          <input type="checkbox" id="checkAll">全选
    </th>
    <th>序号</th>
    <th>时间</th>
    <th>姓名</th>
    <th>性别</th>
    <th>毕业学校</th>
    </tr>
    </thead>

    <tbody>

    <td>
    <input type="checkbox" name="subBox" value="${xgStudentRegistration.id}"/>
    </td>

    </tbody>

    </table>

    2.使用jquery获取复选框选中的对应item的id

    <html>
    <head>

    <script type="text/javascript">
    $(document).ready(function() {

    //全选按钮事件绑定
    $(function() {
    $("#checkAll").click(function() {
    $('input[name="subBox"]').not("[disabled]").attr("checked",this.checked);
    });
    var $subBox = $("input[name='subBox']");
    $subBox.click(function(){

    $("#checkAll").attr("checked",$subBox.length == $("input[name='subBox']:checked").length ? true : false);
    });
    });

    $("#deleteSubmit").click(function(){
    var chk_value =[];
    $('input[name="subBox"]:checked').each(function(){
    chk_value.push($(this).val());
    });
    if(chk_value.length<=0){
    alert("请选择要删除的数据!");
    }else{
    if(confirm("你确定删除吗?")){
    var s = chk_value.join(",");
    location.href = '${ctx}/student/xgStudentRegistration/deleteChosse?id='+s;
    return false;
    }
    }
    });

    </script>
    </head>

    </html>

    3.在controller中操作:

    @Controller
    @RequestMapping(value = "${adminPath}/student/xgStudentRegistration")
    public class XgStudentRegistrationController extends BaseController {

    @RequiresPermissions("student:xgStudentRegistration:edit")
    @RequestMapping(value = "deleteChosse")

    public String deleteChosse(XgStudentRegistration xgStudentRegistration, RedirectAttributes redirectAttributes,String id) {
    xgStudentRegistrationService.deleteChosse(id);
    addMessage(redirectAttributes, "删除信息成功");
    return "modules/xg/student/xgStudentRegistrationList";
    }

    }

    4.在service中操作:

    public class XgStudentRegistrationService extends CrudService<XgStudentRegistrationDao, XgStudentRegistration>{

    @Transactional(readOnly = false)
    public void delete(XgStudentRegistration xgStudentRegistration) {
    super.delete(xgStudentRegistration);
    }

    public void deleteChosse(String id) {
    String[] list = id.split(",");
    XgStudentRegistration xgStudentRegistration = new XgStudentRegistration();
    for (String i : list) {
    xgStudentRegistration.setId(i);
    delete(xgStudentRegistration);
    }
    }

    }

    public abstract class CrudService<D extends CrudDao<T>, T extends DataEntity<T>> extends BaseService {

    /**
    * 持久层对象
    */
    @Autowired
    public D dao;

    /**
    * 删除数据
    * @param entity
    */
    @Transactional(readOnly = false)
    public void delete(T entity) {
    dao.delete(entity);
    }

    }

    **
    * 学生咨询登记DAO接口
    * @author gh
    * @version 2017-05-15
    */
    @MyBatisDao
    public interface XgStudentRegistrationDao extends CrudDao<XgStudentRegistration> {

    }

    5.在xml中delete

    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    <mapper namespace="com.student.dao.XgStudentRegistrationDao">

    <update id="delete">
    UPDATE xg_student_registration SET
    del_flag = #{DEL_FLAG_DELETE}
    WHERE id = #{id}
    </update>

    </mapper>

    tag:

    jquery中的$(document).ready(function() {})这句话是什么 意思

    这部分代码主要声明,页面加载后 “监听事件” 的方法。
    例如:
    $(document).ready(
    $("a").click(function(){alert('你点我干嘛')});
    );
    这句的意思是:
    页面加载成功后,页面内的所有链接在“点击”事件的时候,提示“你点我干嘛”。

    文档就绪事件

    所有 jQuery 函数位于一个 document ready 函数中:

    $(document).ready(function(){ // 开始写 jQuery 代码... });

    这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。

    如果在文档没有完全加载之前就运行函数,操作可能失败。下面是两个具体的例子:

    • 试图隐藏一个不存在的元素
    • 获得未完全加载的图像的大小

    提示:简洁写法(与以上写法效果相同):

    $(function(){ // 开始写 jQuery 代码... });

    以上两种方式,选择喜欢的方式实现文档就绪后执行 jQuery 方法。

  • 相关阅读:
    算法-经典趣题-寻找假银币
    一天一个 Linux 命令(3):cat 命令
    算法-经典趣题-青蛙过河
    常用数据库有哪些?
    SpringBoot2.0入门教程(一) 快速入门,项目构建HelloWorld示例
    一天一个 Linux 命令(2):ls 命令
    算法-经典趣题-爱因斯坦阶梯问题
    一天一个 Linux 命令(1):vim 命令
    什么是开发环境、测试环境、UAT环境、仿真环境、生产环境?
    算法-经典趣题-渔夫捕鱼
  • 原文地址:https://www.cnblogs.com/zhouj850/p/7193404.html
Copyright © 2011-2022 走看看