bootstrap-table
项目中需要将原来的表格全部改成用bootstrap-table展现，于是写了一个各页面公用的js，表头字段是可配置的，直接上代码
HTML
<table id="manulistTable" class="table table-no-bordered " style="width: 100%;margin-top: -40px;">
js
/**
* 初始化数据
*/
initData : function(startPage) {
var $tableid = $('#manulistTable');
var url = ;
var gc = ;
var cmeditList = ;
var tenantId = window.sessionStorage.getItem("tenantId");
var userId = window.sessionStorage.getItem("userId");
var hasCheckbox = true;
var states=;
var mainIsOriginal=;
resourceType=resourceType?resourceType:'1';
mainIsDeleted=mainIsDeleted?mainIsDeleted:'1';
var columnId=;
var queryParams={
resourceType:resourceType,
mainIsDeleted:mainIsDeleted,
userColumnIds:userColumnIds,
mainHeader:title,
mainStatus:states,
columnId:columnId,
dateranges:dateranges,
mainIsOriginal:mainIsOriginal,
mainType:4
};
var tableParams = {
$tableid: $tableid,
url: url,
gc: gc,
hasCheckbox: hasCheckbox,
tenantId: tenantId,
userId: userId,
cmeditList: cmeditList,
resourceType :"myManulist",
callBackRender : function(){
}
};
TableInit(tableParams, queryParams);
},
bootstrapTable.js
function TableInit(tableParams, _queryParams) { // var options; var gridConfig = baseColumn(tableParams); /*var mainType = tableParams.cmeditList; console.log('mainType:'+mainType);*/ //先销毁表格 tableParams.$tableid.bootstrapTable('destroy'); tableParams.$tableid.bootstrapTable({ url: tableParams.url, //请求后台的URL（*） method: 'post', //请求方式（*） dataType: "json", contentType : "application/x-www-form-urlencoded; charset=UTF-8", ajaxOptions:{ headers:{ "tenantId":tableParams.tenantId, "userId":tableParams.userId } }, // toolbar: '#toolbar', //工具按钮用哪个容器 striped: true, //是否显示行间隔色 cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） pagination: true, //是否显示分页（*） sortable: true, //是否启用排序 sortOrder: "desc", //排序方式 pageNumber: 1, //初始化加载第一页，默认第一页 pageSize: 10, //每页的记录行数（*） queryParams: function(params) { var param = { currentPage : params.offset/params.limit+1, pageSize : params.limit, sortField : cmedit.util.underScoreName(params.sort), sortDirection : params.order }; return $.extend(param,_queryParams); }, responseHandler:function(res){ //动态渲染表格之前获取有后台传递的数据时,用于获取出除去本身渲染所需的数据的额外参数 console.log(res); return { "total": res.data.totalCount, //总条数 "rows": res.data.list //数据 // "page": res.data.currentPage //页数 }; }, sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*） // pageList: [10, 25, 50, 100], //可供选择的每页的行数（*） search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大 searchOnEnterKey: true, strictSearch: true, showColumns: true, // 显示下拉框勾选要显示的列 showRefresh: true, //是否显示刷新按钮 minimumCountColumns: 2, //最少允许的列数 clickToSelect: false, //是否启用点击选中行 height:$('.cont_container').innerHeight()-54, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度 uniqueId: "ID", //每一行的唯一标识，一般为主键列 cardView: false, //是否显示详细视图 detailView: false, //是否显示父子表 undefinedText: "", //当数据为 undefined 时显示的字符 maintainSelected: true, //设置为 true 在点击分页按钮或搜索按钮时，将记住checkbox的选择项。 data_local: "zh-US",//表格汉化 locale:'zh-CN', columns: gridConfig, formatLoadingMessage: function () { return '<div class="manuLoader"><div id="preloader_1"><span></span><span></span><span></span><span></span></div></div>'; }, formatNoMatches: function () { //没有匹配的结果 return '<span class="noResults">暂无数据<span>'; }, onLoadSuccess :function(){ if(tableParams.callBackRender){ tableParams.callBackRender(); } } }); }; function baseColumn(tableParams){ var gridConfig = []; var gc = tableParams.gc; var hasCheckbox = tableParams.hasCheckbox; var cmeditList = tableParams.cmeditList; var resourceType = tableParams.resourceType; if (hasCheckbox) { gridConfig.push({ checkbox: hasCheckbox }); }; console.log('gc:',gc); $.each(gc, function(i, item){ var field = { "field" : item.fcFieldCode, "title" : item.fcFieldName, "align" : 'left', "valign" : 'middle', "sortable" : true } if(item.fcFieldCode == "mainCreateUserName"){ field["width"] = '200px'; field["formatter"] = function(value,row,index){ return '<span class="nowrap-ellipsis" style="width:100%;display:inline-block" title='+ value +'>'+ value +'</span>'; } } if(item.fcFieldCode == "mainIsDistribute" || item.fcFieldCode == "mainIsImport"){ field["align"] = 'center'; field["formatter"] = function(value,row,index){ switch(value){ case 0: return '<span >否</span>'; break; case 1: return '<span >是</span>'; break; } } } if(item.fcFieldCode == "mainCensorState"){ field["formatter"] = function(value,row,index){ switch(value){ case 0: return '待提交'; break; case 1: return '<span>'+row["mainStrReserve1"]+'</span>'; break; case 2: return '<span style="color:red">'+row["mainStrReserve1"]+'</span>'; break; case 3: return '待审核'; break; } } } /* if (item.fcFieldCode == "mainStatus") { // &&(resourceType == "myManulist" || resourceType == "allManulist" || resourceType == "manuSendTask") field["formatter"] = function(value,row,index){ var temp = ''; switch(value){ case 0: temp = "<span class='manu_submit'></span><span>待提交</span>"; break; case 1: temp = "<span class='manu_examine'></span><span onmouseover='cmedit.ManuscriptSystem.popoverBox(this,\""+row['mainGuid']+"\")'>待审核</span>"; break; case 2: temp = "<span class='manu_pass'></span><span onmouseover='cmedit.ManuscriptSystem.popoverBox(this,\""+row['mainGuid']+"\")'>已通过</span>"; break; case 3: temp = "<span class='manu_return'></span><span onmouseover='cmedit.ManuscriptSystem.popoverBox(this,\""+row['mainGuid']+"\")'>已打回</span>"; break; } if(value != 0){ return temp +' ' +'<img class="popoverimg" src="../../static/images/u202.svg" onmouseover="cmedit.ManuscriptSystem.popoverBox(this,\''+row['mainGuid']+'\')">' +'<div class="popover-box"><div class="popover-arrow-up"></div><div class="popover_content"></div></div>'; return temp; } } }*/ //我的稿件或者部门稿件 if(resourceType == "myManulist" || resourceType == "allManulist"){ if(item.fcFieldCode == "cmeditOperate"){ field["align"] = 'center'; field["sortable"] = false; field["formatter"] = function(value,row,index){ var list=''; for (var key in cmeditList) { list+='<li style="cursor: pointer;"><a onclick="cmedit.ManuscriptSystem.copyManuscript(\''+row['mainGuid']+'\',\''+cmeditList[key]+'\')">'+key+'</a></li>'; } console.log("cmeditList____",cmeditList) return [ '<span onclick="cmedit.ManuscriptSystem.recordBox(this,\''+ row['mainGuid'] +'\')" class="operateBtn">记录</span>', '<span class="lineTip" style="cursor: default;">|</span>', '<div class="dropdown operateCopyItem"><a href="javascript:;" class="dropdown-toggle manu_copy" data-toggle="dropdown"><span class="operateBtn">复制</span></a>', '<span class="lineTip" style="cursor: default;">|</span>' +'<ul class="dropdown-menu dropdown-menutop" role="menu">'+list+'</ul></div>', '<span class="operateBtn" onclick="cmedit.ManuscriptSystem.delResoure(\''+row['mainGuid']+'\')">删除</span>' ].join(''); } }else if(item.fcFieldCode == "mainHeader"){ field["width"] = '300px'; field["formatter"] = function(value,row,index){ var manuscript ="manuscript"; return [ '<span class="list_title" id=' + row['mainGuid'] + ' mainHeader=' + encodeURI(row['mainHeader']) + ' status=' + row['mainStatus'] + ' name=' + row['mainCreateUserId'] + ' title=' + value +' onclick="cmedit.ManuscriptSystem.enterDetail(\''+row['mainGuid']+'\',\''+manuscript+'\');">' +value+'</span>', '<span class="icon_preview" onclick="cmedit.ManuscriptSystem.enterPreview(this,\''+row['mainGuid']+'\')" style="cursor: pointer;"></span>' ].join(''); } }else if(item.fcFieldCode == "mainStatus"){ field["formatter"] = function(value,row,index){ var temp = ''; switch(value){ case 0: temp = "<span class='manu_submit'></span><span>待提交</span>"; break; case 1: temp = "<span class='manu_examine'></span><span onmouseover='cmedit.ManuscriptSystem.popoverBox(this,\""+row['mainGuid']+"\")'>待审核</span>"; break; case 2: temp = "<span class='manu_pass'></span><span onmouseover='cmedit.ManuscriptSystem.popoverBox(this,\""+row['mainGuid']+"\")'>已通过</span>"; break; case 3: temp = "<span class='manu_return'></span><span onmouseover='cmedit.ManuscriptSystem.popoverBox(this,\""+row['mainGuid']+"\")'>已打回</span>"; break; } if(value != 0) return temp +' ' +'<img class="popoverimg" src="../../static/images/u202.svg" onmouseover="cmedit.ManuscriptSystem.popoverBox(this,\''+row['mainGuid']+'\')">' +'<div class="popover-box"><div class="popover-arrow-up"></div><div class="popover_content"></div></div>'; return temp; } } } //审核任务 else if(resourceType == "manuTask"){ if(item.fcFieldCode == "cmeditOperate"){ field["align"] = 'center'; field["sortable"] = false; field["formatter"] = function(value,row,index){ if(row["mainStatus"] == 1){ return [ '<span style="cursor: pointer;vertical-align:bottom" onclick="cmedit.TaskSystem.taskModal(\''+ row['mainGuid'] +'\',\''+ row['mainColumnId'] +'\',true)" class="dropdown manulist_operate">通过</span>', '<span class="lineTip" style="cursor: default;">|</span>', '<span style="cursor: pointer;" class="manulist_operate" onclick="cmedit.TaskSystem.taskModal(\''+ row['mainGuid'] +'\',\''+ row['mainColumnId'] +'\',false)">打回</span>', ].join(''); }else if(row["mainStatus"] == 2 || row["mainStatus"] == 3){ return [ '<span class="dropdown manulist_operate" style="disabled:disabled;color:gray;vertical-align:bottom">通过</span>', '<span class="lineTip" style="cursor: default;">|</span>', '<span class="manulist_operate" style="disabled:disabled;color:gray;">打回</span>', ].join(''); } } }else if(item.fcFieldCode == "mainHeader"){ /* '<span class="list_title" id=' + row['mainGuid'] + ' mainHeader=' + row['mainHeader'] + ' status=' + row['mainStatus'] + ' name=' + row['mainCreateUserId'] + ' title=' + value +' onclick="cmedit.ManuscriptSystem.enterDetail(\''+row['mainGuid']+'\',\''+manuscript+'\');">' +value+'</span>',*/ field["width"] = '300px'; field["formatter"] = function(value,row,index){ var manuscript ="manuscript"; return [ '<span class="list_title" id=' + row['mainGuid'] + ' mainHeader=' + encodeURI(row['mainHeader']) + ' status=' + row['mainStatus'] + ' name=' + row['mainCreateUserId'] + ' title=' + value + ' onclick="cmedit.TaskSystem.entertaskDetail(\''+row['mainGuid']+'\',\''+manuscript+'\');">' +value+'</span>', ].join(''); } }else if(item.fcFieldCode == "mainStatus"){ field["formatter"] = function(value,row,index){ var temp = ''; switch(value){ case 0: temp = "<span class='manu_submit'></span>待提交"; break; case 1: temp = "<span class='manu_examine'></span>待审核"; break; case 2: temp = "<span class='manu_pass'></span>已通过"; break; case 3: temp = "<span class='manu_return'></span>已打回"; break; } if(value != 0) return temp +' ' return temp; } } } //签发监控 else if(resourceType == "manuSend"){ if(item.fcFieldCode == "cmeditOperate"){ field["align"] = 'center'; field["sortable"] = false; field["formatter"] = function(value,row,index){ var html = ''; if(row["mbtStatus"] == 3 || row["mbtStatus"] == 4){ html += '<span class="dropdown manulist_operate" style="color: #3498db;cursor: pointer;vertical-align:bottom" onclick="cmedit.TargetSystem.reTargetDistribute(\''+ row['mntGuid'] +'\',\''+ row['mainGuid'] +'\')">重试</span>' }else{ html += '<span class="dropdown manulist_operate send_unclick" disabled="disabled" style="vertical-align:bottom;">重试</span>' } html += '<span class="lineTip">|</span>' if(row["mbtStatus"] == 1 || row["mbtStatus"] == 2){ html += '<span class="manulist_operate send_unclick">删除</span>' }else{ html += '<span class="manulist_operate" style="color: #3498db;cursor: pointer;" onclick="cmedit.TargetSystem.deleteDistribute(\''+ row['mntGuid'] +'\')">删除</span>' } return [html].join(''); } } if(item.fcFieldCode == "mbtStatus"){ field["formatter"] = function(value,row,index){ var temp = ''; switch(value){ case 2: temp = "<span class='manu_examine'></span>签发中"; break; case 3: temp = "<span class='manu_return'></span>请求失败"; break; case 4: temp = "<span class='manu_return'></span>回调失败"; break; case 5: temp = "<span class='manu_pass'></span>成功"; break; } if(value != 0) return temp +' ' return temp; } } if(item.fcFieldCode == "mainHeader"){ field["width"] = '300px'; field["formatter"] = function(value,row,index){ return '<span class="list_title" style="cursor:default;" title='+ value +'>'+value+'</span>'; } } } //下载监控 else if(resourceType == "manuDownload"){ if(item.fcFieldCode == "downloadStatus"){ field["formatter"] = function(value,row,index){ switch(value){ case 0: return '<span class="manu_examine"></span>下载中'; break; case 1: return '<span class="manu_pass"></span>已下载'; break; case 2: return '<span class="manu_return"></span>下载失败'; break; } } } if(item.fcFieldCode == "downloadName"){ field["formatter"] = function(value,row,index){ if(row.downloadPath != null){ return row.downloadPath.downloadName; }else{ return '<span style="cursor:default;color:red">(检测到该下载路径已被删除)</span>'; } } } if(item.fcFieldCode == "cmeditOperate"){ field["align"] = 'center'; field["sortable"] = false; field["formatter"] = function(value,row,index){ var list=''; console.log("cmeditList____",cmeditList); if(row['downloadStatus'] == '2' && row['downloadPath'] != null){ return '<div onclick="cmedit.DownloadSystem.downloadfileSpecifiedRetry(\'' + row['downloadStatusGuid'] +'\',\'' + row['mainGuid'] +'\',\'' + row['downloadPathGuid'] + '\',\'' + row['downloadFileType'] + '\')"' + 'class="dropdown manulist_operate" style="color: #3498db;cursor:pointer;" >重试</div>' + '<span class="lineTip">|</span>' + '<div onclick="cmedit.DownloadSystem.delResoure(\'' + row['downloadStatusGuid'] + '\')" style="color: #3498db;cursor:pointer;" class="manulist_operate manulist_operate_edit">删除</div>'; }else{ return '<div onclick="javascript:void(0)" class="dropdown manulist_operate download_unclick">重试</div>' + '<span class="lineTip">|</span>' + '<div onclick="cmedit.DownloadSystem.delResoure(\'' + row['downloadStatusGuid'] + '\')" style="color: #3498db;cursor:pointer;" class="manulist_operate manulist_operate_edit">删除</div>'; } } } if(item.fcFieldCode == "mainHeader"){ field["width"] = '300px'; field["formatter"] = function(value,row,index){ return '<span class="list_title" style="cursor:default;" title='+ value +'>'+value+'</span>'; } } } //成品稿库 else if(resourceType == "manuSendTask"){ if(item.fcFieldCode == "cmeditOperate"){ field["align"] = 'center'; field["sortable"] = false; field["formatter"] = function(value,row,index){ var list=''; for (var key in cmeditList) { list+='<li style="cursor: pointer;"><a onclick="cmedit.TargetManager.copyManuscript(\''+row['mainGuid']+'\',\''+cmeditList[key]+'\')">'+key+'</a></li>'; } return [ '<span onclick="cmedit.TargetManager.recordBox(this,\''+ row['mainGuid'] +'\')" class="operateBtn">记录</span>', '<span class="lineTip" style="cursor: default;">|</span>', '<div class="dropdown operateCopyItem"><a href="javascript:;" class="dropdown-toggle manu_copy" data-toggle="dropdown"><span class="operateBtn">复制</span></a>', '<span class="lineTip" style="cursor: default;">|</span>' +'<ul class="dropdown-menu dropdown-menutop" role="menu">'+list+'</ul></div>', '<span class="operateBtn" onclick="cmedit.TargetManager.delResoure(\''+row['mainGuid']+'\')">删除</span>' ].join(''); } }else if(item.fcFieldCode == "mainHeader"){ field["width"] = '300px'; field["formatter"] = function(value,row,index){ var manuscript ="manuscript"; return [ '<span class="list_title" id=' + row['mainGuid'] + ' mainHeader=' + encodeURI(row['mainHeader']) + ' status=' + row['mainStatus'] + ' name=' + row['mainCreateUserId'] + ' title=' + value +' onclick="cmedit.TargetManager.entersendDetail(\''+row['mainGuid']+'\',\''+manuscript+'\');">' +value+'</span>', '<span class="icon_preview" onclick="cmedit.TargetManager.enterPreview(this,\''+row['mainGuid']+'\')" style="cursor: pointer;"></span>' ].join(''); } }else if(item.fcFieldCode == "mainStatus"){ field["formatter"] = function(value,row,index){ var temp = ''; switch(value){ case 0: temp = "<span class='manu_submit'></span><span>待提交</span>"; break; case 1: temp = "<span class='manu_examine'></span><span onmouseover='cmedit.TargetManager.popoverBox(this,\""+row['mainGuid']+"\")'>待审核</span>"; break; case 2: temp = "<span class='manu_pass'></span><span onmouseover='cmedit.TargetManager.popoverBox(this,\""+row['mainGuid']+"\")'>已通过</span>"; break; case 3: temp = "<span class='manu_return'></span><span onmouseover='cmedit.TargetManager.popoverBox(this,\""+row['mainGuid']+"\")'>已打回</span>"; break; } if(value != 0) return temp +' ' +'<img class="popoverimg" src="../../static/images/u202.svg" onmouseover="cmedit.TargetManager.popoverBox(this,\''+row['mainGuid']+'\')">' +'<div class="popover-box"><div class="popover-arrow-up"></div><div class="popover_content"></div></div>'; return temp; } } } //回收站 else if(resourceType == "manuRecycle"){ if(item.fcFieldCode == "mainHeader"){ field["width"] = '300px'; field["formatter"] = function(value,row,index){ return '<span class="list_title" style="cursor:default;" title='+ value +'>'+value+'</span>'; } } if(item.fcFieldCode == "mainStatus"){ field["formatter"] = function(value,row,index){ var temp = ''; switch(value){ case 0: temp = "<span class='manu_submit'></span>待提交"; break; case 1: temp = "<span class='manu_examine'></span>待审核"; break; case 2: temp = "<span class='manu_pass'></span>已通过"; break; case 3: temp = "<span class='manu_return'></span>已打回"; break; } return temp; } } } gridConfig.push(field); }) console.log("gridConfig___",gridConfig) return gridConfig; };
