點選按鈕刪除bootstrapTable選中行，js模組化及一些問題的總結
阿新 • • 發佈：2018-11-25
頁面效果展示
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 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可以刪除，多位的就不可以。