点击按钮删除bootstrapTable选中行，js模块化及一些问题的总结

页面效果展示

html代码：

<div class="col-md-12" style="height: 15%">
    <form action="web?module=stwmgr&action=Develop&method=searchIterationByTerm&tokenId=<%=request.getParameter("tokenId")%>"
                    class="form-inline" id="searchInfo" method="post" style="height: 80%;width: 100%">
        <div class="form-group" style="margin-top: 2%;width: 20%;">
            <label for="beginDate" style="color: #000000;"> 计划迭代日期:</label> 
            <div class="input-group" style="width: 58%">
            <span id="beginspan" class="input-group-addon timeimg no-radius"></span>
            <input type="text" class="form-control no-radius" id="beginDate" name="plan_time" value="${plan_time}">
            </div>
        </div>
        <div class="form-group" style="margin-top: 2%;width: 14%;margin-left: 2%">
            <label for="operation_user " style="color: #000000">需求号:</label>
            <input type="text" class="form-control no-radius1"  value="${demand_number}" name="demand_number" style="width: 62%">
        </div>
        <div class="form-group" style="margin-top: 2%;width: 17%;margin-left: 2%">
            <label for="schema_name " style="color: #000000">类别：</label> 
            <select class="form-control no-radius" name="category" style="width: 60%">
                <option value="0">全部</option>
                <option value="1">APP端</option>
                <option value="2">PC端</option>
                <option value="3">管理端</option>
                <option value="4">服务端</option>
                <option value="5">小程序</option>
            </select>
        </div>
    <button type="submit" class="btn btn-primary" onclick="query()" style="margin-top: 2%; width: 5%;margin-left: 2%;">查询</button>
    <button type="button" class="btn btn-primary" data-toggle="modal"  data-target="#addIterationModal" style="margin-top: 2%; width: 5%;margin-left: 1%;">新增</button>
    <button type="button" id="editBtn" class="btn btn-primary" style="margin-top: 2%; width: 5%;margin-left: 1%;">修改</button>
    <button type="button" class="btn btn-primary" id="delBtn"  style="margin-top: 2%; width: 5%;margin-left: 1%;">删除</button>

    </form>
</div>
<div class="col-md-12" style="height: 78%;margin-top: 2%">
    <!-- 表格部分 -->
    <div class="tableDiv" ng-controller="stwController">

    <table id="IterationTable" class="table table-hover table-bordered" style="color: #000000">
    </table>
    <jsp:include page="/desktop/stwmgr/page.jsp" flush="false"></jsp:include>
    </div>
</div>
<!-- 修改模态框 -->
<div class="modal fade" id="editIterationModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">修改迭代记录</h4>
           </div>
       <div class="modal-body">
            <form class="form-horizontal" role="form" id="editIterationForm" method="post">
                <div class="form-group">
                    <label for="eplan_time" class="col-sm-3 control-label">
                    <label style="color:red">*</label>计划迭代时间</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="eplan_time" name="plan_time" value="">
                        <input type="hidden" name="id" id="eid" value="">
                     </div>
                </div>

                <div class="form-group">
                     <label for="ecategory" class="col-sm-3 control-label">
                     <label style="color:red">*</label>类别</label>
                     <div class="col-sm-9">
                       <select class="form-control no-radius" id="ecategory" name="category">
                        <option value="1">APP端</option>
                        <option value="2">PC端</option>
                        <option value="3">管理端</option>
                        <option value="4">服务端</option>
                        <option value="5">小程序</option>
                       </select>
                     </div>
                 </div>
                 <div class="form-group">
                    <label for="edemand_number" class="col-sm-3 control-label">
                    <label style="color:red">*</label>需求号</label>
                    <div class="col-sm-9">
                       <input type="text" class="form-control" name="demand_number" value="" id="edemand_number" placeholder="需求号">
                    </div>
                 </div>
                 <div class="form-group">
                     <label for="edemand_content" class="col-sm-3 control-label">
                     <label style="color:red">*</label>需求内容</label>
                     <div class="col-sm-9">
                       <input type="text" class="form-control" name="demand_content" value="" id="edemand_content" placeholder="需求内容">
                     </div>
                </div>
                <div class="form-group">
                    <label for="eprogress" class="col-sm-3 control-label">功能完成进度</label>
                    <div class="col-sm-9">
                       <select class="form-control no-radius" id="eprogress" name="progress">
                        <option value="0">0%</option>
                        <option value="10">10%</option>
                        <option value="20">20%</option>
                        <option value="30">30%</option>
                        <option value="40">40%</option>
                        <option value="50">50%</option>
                        <option value="60">60%</option>
                        <option value="70">70%</option>
                        <option value="80">80%</option>
                        <option value="90">90%</option>
                        <option value="100">100%</option>
                       </select>
                 </div>
             </div>
             <div class="form-group">
                 <label for="eifcomplete" class="col-sm-3 control-label">是否完成迭代</label>
                 <div class="col-sm-9">
                    <label class="radio-inline">
                        <input type="radio" name="eifcomplete" value="1" >是
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="eifcomplete" value="2" checked="checked">否
                    </label>

                 </div>
              </div>
              <div class="form-group">
                 <label for="elast_time" class="col-sm-3 control-label">最终迭代日期</label>
                 <div class="col-sm-9">
                     <input type="text" class="form-control" id="elast_time" name="last_time" value="">
                 </div>
              </div>
              <div class="form-group">
                  <label for="eremark" class="col-sm-3 control-label">备注</label>
                  <div class="col-sm-9">
                      <textarea  class="form-control"  name="remark" id="eremark" placeholder="备注"></textarea>
                  </div>
             </div>
          </form>
      </div>
      <div class="modal-footer">
         <span id="evalidateMessage" class="glyphicon"></span>
         <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
         <button type="button" class="btn btn-primary" id="editIteration">提交</button>
         <span id="tip"> </span>
     </div>
   </div>
 </div>
</div>

js初始化表格：

var iterationList =${iterationList};
//console.log(iterationList);
$('#IterationTable').bootstrapTable({
    sortOrder: "asc",                   //排序方式
    showColumns: false,                  //是否显示所有的列
    cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
    data: iterationList, 
    /* height: $(window).height()*0.82,*/
    striped : true,
    columns: [{
        field: 'id',
        visible: true,
        formatter: function (value, row, index) {
            console.log(row);
            var hhh=JSON.stringify(row);
            return "<input type='radio' name='mark' value='"+hhh+"' data-test="+value+" />"
        }
    }, {
        field: 'plan_time',
        title: '计划迭代时间',
        visible: true,
        /* formatter: function (value, row, index) {
            return value.substring(0,10);
        } */
    }, {
        field: 'category',
        title: '类别',
        visible: true
    }, {
        field: 'demand_number',
        title: '需求号',
        visible: true
    }, {
        field: 'demand_content',
        title: '需求内容',
        visible: true
    },{
        field: 'progress',
        title: '功能完成进度',
        visible: true,
        formatter: function (value, row, index) {
            var percent=value+'%';
            var content='<div class="progress" style="margin:0px"><div class="progress-bar" role="progressbar" '
            + ' aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:'+percent+';"> '
            + ' '+value+'%</div></div> ';
            return content;
       }
    }, {
        field: 'ifcomplete',
        title: '是否完成迭代',
        visible: true
    }, {
        field: 'last_time', 
        title: '最终迭代时间',
        visible: true
    }, {
        field: 'operation_user', 
        title: '修改人',
        visible: true
    }, {
        field: 'remark',
        title: '备注',
        visible: true,
    }],
    onClickRow: function (row) {

    }
});
$("input[name='plan_time']").datetimepicker({
    format: 'yyyy-mm-dd',autoclose:true,minView:2,todayBtn:true
});
$("input[name='last_time']").datetimepicker({
    format: 'yyyy-mm-dd',autoclose:true,minView:2,todayBtn:true
});
$("#beginDate").datetimepicker({
    format: 'yyyy-mm-dd ',autoclose:true,minView:2,todayBtn:true
    }).on("click",function(){   
        $("#beginDate").datetimepicker("setStartDate","2017-09-01");  
    });
$("#beginspan").click(function(){
    $('#beginDate').datetimepicker('show');
});

这段通过bootstrapTable实现了表格的初始化，其中值得一提的就是进度条效果是使用bootstrap自带的进度条属性，通过表格插件进行formatter，将value转换成百分比的形式，最后拼接到input中，最后return一个包含input的字符串。实现在表格中实现进度条的效果。

bootstrapTable每一行都有对应的row属性，row属性是一个json类型的对象，其中存放了这一行中各个列对应的参数。

在实现修改的功能时，要求传递所要修改的那一行原先就有的参数，但是我们使用的是选中单选框之后进行修改的方式，所以需要在点击修改按钮后将所点击的行的row属性传递到模态框的表单中。

具体js代码：

$("#editBtn").on('click',function () {
//给修改按钮绑定点击事件，执行editIteration函数中的init方法，并传递一个tokenId，避免后面出现账号在别处登陆的错误。
    iteration.editIteration.init({
        tokenId:tokenId
    });
});

//这部分我是放在了另外的js文件中，刚学习了js模块化，在这里便做了些许尝试。
var iteration={
    url:{
            add:function(){
                return '';
            }
        },
        //验证新增模态框是否信息是否填写完整
    validateModal:function(plan_time,demand_number,demand_content){
            if (plan_time.trim()!='' && demand_number.trim()!='' && demand_content.trim()!='') {
                return true;//直接判断对象会看对象是否为空,空就是undefine就是false; isNaN 非数字返回true
            } else {
                return false;
            }
        },
    validateRadio:function(radio){
            if(radio==undefined){
                return false;
            }else{
                return true;
            }
        },
    addIteration:{
        init: function(params){
                var plan_time=params['plan_time'];
                var demand_number=params['demand_number'];
                var demand_content=params['demand_content'];
                if(iteration.validateModal(plan_time, demand_number, demand_content)){
                    var form = document.getElementById("addIterationForm");
                    form.action = 'web?module=stwmgr&action=Develop&method=addIteration&tokenId='+params['tokenId'];
                    form.submit();
                }else{
                    $('#validateMessage').hide().html('<label class="label label-danger">带*号的内容必须填写完整!</label>').show(300);
                }

            }
        },
    editIteration:{
        init:function(params){
            var radio=$("input[name=mark]:checked").val();
                if(iteration.validateRadio(radio)){
                    var obj=eval("(" + radio + ")");
                    $("#eid").val(obj['id']);  //设置修改模态框计划时间的值
$("#eplan_time").val(obj['plan_time']);//设置修改模态框计划时间的值     
$("#ecategory").children("option").each(function(){  
            var temp_value = $(this).text();  
            if(temp_value ==obj['category']){  
                 $(this).attr("selected","selected");  
                 }  
            }); //设置修改模态框类别的值
                    $("#edemand_number").val(obj['demand_number']);  //设置修改模态框需求号的值
                    $("#edemand_content").val(obj['demand_content']);  //设置修改模态框需求内容的值
                    $("#eprogress").children("option").each(function(){  
        var temp_value = $(this).val();  
        if(temp_value == obj['progress']){  
              $(this).attr("selected","selected");  
        }  
        }); //设置修改模态框完成进度的值
                    $("input[name='eifcomplete']").each(function(){  
        var flag=2;
        if(obj['ifcomplete']=='已完成'){
            flag=1;
        }
        var temp_value = $(this).val();  
        if(temp_value == flag ){  
              $(this).attr("checked","checked");  
         }  
}); //设置修改模态框单选框的值
$("#elast_time").val(obj['last_time']);  //设置修改模态框最终迭代时间的值
$("#eremark").val(obj['remark']);  //设置修改模态框最终迭代时间的值
$('#editIterationModal').modal('show');
$("#editIteration").on('click',function () {
    var plan_time=$("#eplan_time").val();
    var demand_number=$("#edemand_number").val();
    var demand_content=$("#edemand_content").val();
    if(iteration.validateModal(plan_time, demand_number, demand_content)){
    iteration.editIteration.editsubmit(params['tokenId']);
    }else{
    $('#evalidateMessage').hide().html('<label class="label label-danger">带*号的内容必须填写完整!</label>').show(300);
    }
});

        }else{
            layer.msg("请选择一条记录进行修改！");
        }
        },
        editsubmit:function(tokenId){
            var form = document.getElementById("editIterationForm");
            form.action = 'web?module=stwmgr&action=Develop&method=editIteration&tokenId='+tokenId;
            form.submit();
        }
    },
    delIteration:function(){
        var radio=$("input[name=mark]:checked").val();
        if(iteration.validateRadio(radio)){
            var obj=eval("(" + radio + ")");
            $.ajax({
                url:'web?module=stwmgr&action=Develop&method=deleteIterationById&tokenId='+tokenId,
                data:{
                    did:obj['id']
                },
                type:'post',
                success:function(){

                    var id =[];
                    id.push(obj['id']);

                $('#IterationTable').bootstrapTable('remove', {
                            field:'id',
                            values:id
                        });
                    }
                });

            }else{
                layer.msg("请选择一条记录进行删除！");
            }
        }
}

在这里我是把row对象通过JSONstringfy转换成json字符串类型，在存放在radio单选按钮的value属性中，通过jquey的name选择器可以找到这个radio，从而获取这个json字符串，在将json字符串eval(“(” + radio + “)”)方法重新转换为json对象，在逐个取出其中的值。

在实现删除功能的时候，遇到了一个困扰我很久的问题，我原先的思路是获取所选中单选框的行的id，bootstrapTable中提供了删除行的方法。

var id =[];
id.push(obj['id']);
$('#IterationTable').bootstrapTable('remove', {
                            field:'id',
                            values:id
                        });
                    }
                });

field是根据id属性进行删除，values是所要删除行的id。
最开始的问题是有的行能够删除，有的行不能删除，经过排查发现id小于10的可以删除，id大于10的不能删除，换言之，就是id是一位数的可以删除，id是两位数的则不可以。这个问题我觉得是因为我传递过来的id是字符串类型的，由于位数不同造成多位数的id在表格的行的id属性找不到，所以不能删除。

后来在网上查阅了一些资料，发现bootstrapTable这个方法传递的参数类型是一个数组类型的。后来我定义了一个数组将要删除的id存放进去就解决了这个问题。

问题虽然解决了，但是还是没搞懂为什么一位的id可以删除，多位的就不可以。