點選按鈕刪除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">×</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可以刪除,多位的就不可以。