jqgrid + bootstrap-select 自定义表头列显示隐藏

项目需求：做一个可供用户自定义选择的表格。先上图：

由于标题&操作是固定项，所以在代码中已经把标题&指南的下拉选项去掉了。

一、bootstrap-select

         
         
         

         

            表头配置：
            

                
                    项目类型
                    计划申报数
                    已申报数
                    发起人
                
            
            
        

        

             //表格容器
            

        

可能会出现对勾不显示的问题，这里需要注意 glyphicons-halflings-regular 等文件的引用

处理方案引用原文博客 https://blog.csdn.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

 

第一版是选中需要显示的下拉值点击确认之后改变表头。现：日常改交互 -- 需要点击下拉中的某一项直接改变table表头，这个也很简单，把确认键上面的函数放在select的onchange上面，即：