项目需求：做一个可供用户自定义选择的表格。先上图：
由于标题&操作是固定项，所以在代码中已经把标题&指南的下拉选项去掉了。
一、bootstrap-select
<!-- bootstrap-select -->
<link rel="stylesheet" href="../../js_/bootstrap/bootstrap-select.css">
<script src="../../js_/bootstrap/bootstrap-select.js"></script>
<div class="form-group" style="width: 100%;float:left;margin: 5px;">
<label class="col-sm-1 control-label">表头配置：</label>
<div class="col-sm-4">
<select id="usertype" name="usertype" class="selectpicker show-tick form-control" multiple
data-live-search="false">
<option value="xmlxmc">项目类型</option>
<option value="fnum">计划申报数</option>
<option value="countproject">已申报数</option>
<option value="fromusername">发起人</option>
</select>
</div>
<input type="button" value="确认" class="btn btn-primary" onclick="thead()"/>
</div>
<div>
<table id="gridTable"></table> //表格容器
<div id="gridPager"></div>
</div>可能会出现对勾不显示的问题，这里需要注意 glyphicons-halflings-regular 等文件的引用
处理方案引用原文博客 https://blog.****.net/nongweiyilady/article/details/53611094
二、jqgrid
/*自定义表头*/
var thead = function () {
var theadobj = $('#usertype').selectpicker('val'); //bootstrap-select自带找选中下拉值的方法
var theadarr = ["ftitle",'caozuo']; //不可自定义选择的列,默认一直显示
for (let j in theadobj) {
theadarr.push(theadobj[j]); //已经选择的下拉值
}
var allarr = ["ftitle", "xmlxmc", "fnum", "countproject", "fromusername", "caozuo"]; //所有可选的下拉值
$("#gridTable").jqGrid('setGridParam', {
url: url + '/guide/queryGuideDistinct',
datatype: 'json',
mtype: 'POST',
postData: subData,
width: 500,
page: 1,
loadComplete: function () {
allarr.forEach(function (a, b, c) {
if (theadarr.indexOf(a) > -1) {
$("#gridTable").setGridParam().showCol(a); //jqgrid自带显示列的方法
} else {
$("#gridTable").setGridParam().hideCol(a); //jqgrid自带隐藏列的方法
}
})
$("#gridTable").setGridWidth($(window).width()); //每次加载完之后设置表格宽度
}
}).trigger("reloadGrid"); //重新载入
}这个代码的前提是默认页面初始化已经加载全部表格，再选择进行处理。
我这个方法比较简单粗暴，上午看了一个大神教科书式的操作，我要好好研究研究哈哈。
附博主原文链接https://www.cnblogs.com/XCWebLTE/archive/2017/06/06/6951822.html