此次项目开发过程中用到了Jquery的Datatables插件,无疑他是数据列表展示,解决MVC中同步过程中先走控制器后返回视图,查询数据过程中无法提示等待的弊端,

而且他所提供的各种方法也都有较强的实用性。但是再好的程序也会有瑕疵,项目开发中就遇到了其提供的设置隐藏显示列的方法 table.fnSetColumnVis(colShowDic_key[i], true);//colShowDic_key[i]为列的索引。会多次提交刷新数据(有多少列会提交刷新多少次)。

为解决这个问题尝试了很多种方法依然存在各种问题:最终换了个角度思考,既然在列表中更换隐藏显示列不行,为何不重新加载列表呢?

于是datatables中的参数:aoColumns  本身即是一个数组,我们换成了变量,根据设置的隐藏显示列重新定义该数组,然后调用加载列表的方法重新加载列表:

代码如下:

//初始化设置显示列弹出层数据
function instailSetColShow() {
    var left = document.getElementById("selectBefor");
    var right = document.getElementById("selectAfter");

    left.options.length = 0;
    for (i = 0; i < colHiddenDic_key.length; i++) {
        left.options.add(new Option(colHiddenDic_value[i], colHiddenDic_key[i]));
    };

    right.options.length = 0;
    for (j = 0; j < colShowDic_key.length; j++) {
        right.options.add(new Option(colShowDic_value[j], colShowDic_key[j]));
    };
}

//导出选项卡
function selectMove() {
    var left = document.getElementById("selectBefor");
    var right = document.getElementById("selectAfter");

    while (true) {
        var index = left.selectedIndex;
        if (index < 0) {
            break;
        }
        right.options.add(new Option(left.options[index].text, left.options[index].value));
        left.options.remove(index);
    }

}

function selectBack() {
    var left = document.getElementById("selectBefor");
    var right = document.getElementById("selectAfter");

    while (true) {
        var index = right.selectedIndex;
        if (index < 0) {
            break;
        }
        left.options.add(new Option(right.options[index].text, right.options[index].value));
        right.options.remove(index);
    }
}

//重置显示、隐藏列
function ReSetShowCol() {
    //获取隐藏显示列
    GetHideShowCol();
    //获取列表显示列数组
    GetAoColumnShow();
    //设置列显示
    setShowCol();
    //关闭弹出层
    $("#setModal").modal("hide");
}

//获取显示隐藏列
function GetHideShowCol() {
    var right = document.getElementById("selectAfter");
    var left = document.getElementById("selectBefor");

    colShowDic_key.length = 0;
    colShowDic_value.length = 0;
    colHiddenDic_key.length = 0;
    colHiddenDic_value.length = 0;

    //获取显示列
    if (right.options.length > 0) {
        for (i = 0; i < right.options.length; i++) {
            //获取要添加到数据字典的键值对(显示列)
            colShowDic_key[i] = right.options[i].value;
            colShowDic_value[i] = right.options[i].text;
        }
    }
    //获取隐藏列
    if (left.options.length > 0) {
        for (i = 0; i < left.options.length; i++) {
            //获取要添加到数据字典的键值对(隐藏列)
            colHiddenDic_key[i] = left.options[i].value;
            colHiddenDic_value[i] = left.options[i].text;
        }
    }
}

//获取列表显示列数组
function GetAoColumnShow() {

    aoColumuShow.length = 0;
    aoColumuShow[0] = { "mData": 'ID', "sTitle": '序号', "sClass": "tdright", "sWidth": "30px", "bSortable": false };

    var k = 1;
    for (var i = 0; i < colShowDic_key.length; i++) {
        switch (colShowDic_key[i]) {
            case "1":
                aoColumuShow[k] = { "mData": "ENTRYNO", "sTitle": "报关单号", "sClass": "taleft", "bSortable": false };
                break;
            case "2":
                aoColumuShow[k] = { "mData": "DECL_PORT_NAME", "sTitle": "申报地海关", "sClass": "taleft", "bSortable": false };
                break;
            case "3":
                aoColumuShow[k] = { "mData": "TRADE_MODE", "sTitle": "贸易方式", "sClass": "taleft", "bSortable": false };
                break;
            case "4":
                aoColumuShow[k] = { "mData": "G_NO", "sTitle": "商品项号", "sClass": "taleft", "bSortable": false };
                break;
            case "5":
                aoColumuShow[k] = { "mData": "ZM_MODE", "sTitle": "征免方式", "sClass": "taleft", "bSortable": false };
                break;
            case "6":
                aoColumuShow[k] = { "mData": "RED_GREEN", "sTitle": "红绿通道", "sClass": "taleft", "bSortable": false };
                break;
            case "7":
                aoColumuShow[k] = { "mData": "AGENT_NAME", "sTitle": "报关单位", "sClass": "taleft", "bSortable": false };
                break;
            case "8":
                aoColumuShow[k] = { "mData": "OWNER_NAME", "sTitle": "收发货单位", "sClass": "wp10", "bSortable": false };
                break;
            case "9":
                aoColumuShow[k] = {
                    "mData": "I_E_FLAG", "sTitle": "进出口", "sClass": "taleft", "bSortable": false,
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if (oData.I_E_FLAG == "1" || oData.I_E_FLAGI_E_FLAG == "E") {
                            $(nTd).html('进口');
                        } else {
                            $(nTd).html('出口');
                        }
                    }
                };
                break;
            case "10":
                aoColumuShow[k] = { "mData": "DECL_PORT_CODE", "sTitle": "关区", "sClass": "taleft", "bSortable": false };
                break;
            case "11":
                aoColumuShow[k] = { "mData": "CUT_MODE", "sTitle": "征免性质", "sClass": "taleft", "bSortable": false };
                break;
            case "12":
                aoColumuShow[k]={ "mData": "G_NAME", "sTitle": "商品名称", "sClass": "taleft", "bSortable": false };
                break;
            case "13":
                aoColumuShow[k]={ "mData": "G_MODEL", "sTitle": "规格型号", "sClass": "taleft", "bSortable": false };
                break;
            case "14":
                aoColumuShow[k] = {
                    "mData": "RELEASE_DATE", "sTitle": "放行日期", "sClass": "wp10", "bSortable": false,  "sType": "date",
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        $(nTd).html(getDate(ConvertJSONDateToJSDateObject(oData.RELEASE_DATE)));
                    }
                }
                break;
            case "15":
                aoColumuShow[k] = {
                    "mData": "D_DATE", "sTitle": "申报日期", "sClass": "taleft", "bSortable": false, "sType": "date",
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        $(nTd).html(getDate(ConvertJSONDateToJSDateObject(oData.D_DATE)));
                    }
                }
                break;
            case "16":
                aoColumuShow[k] = {
                    "mData": "CONCLUDE_DATE", "sTitle": "审结日期", "sClass": "taleft", "bSortable": false, "sType": "date",
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        $(nTd).html(getDate(ConvertJSONDateToJSDateObject(oData.CONCLUDE_DATE)));
                    }
                }
                break;
            default:
                break;
        }
        k++;
    }
}

//设置列显示
function setShowCol() {
    oTable = GetList();
}

function intialShowCol() {
    //显示列
    colShowDic_key[0] = "1";
    colShowDic_value[0] = "报关单号";
    colShowDic_key[1] = "2";
    colShowDic_value[1] = "申报海关";
    colShowDic_key[2] = "3";
    colShowDic_value[2] = "贸易方式";
    colShowDic_key[3] = "4";
    colShowDic_value[3] = "商品项号";
    colShowDic_key[4] = "5";
    colShowDic_value[4] = "征免方式";
    colShowDic_key[5] = "6";
    colShowDic_value[5] = "红绿通道";
    colShowDic_key[6] = "7";
    colShowDic_value[6] = "报关单位";
    colShowDic_key[7] = "8";
    colShowDic_value[7] = "收发货单位";

    colShowDic_key[8] = "9";
    colShowDic_value[8] = "进出口";
    colShowDic_key[9] = "11";
    colShowDic_value[9] = "征免性质";
    colShowDic_key[10] = "12";
    colShowDic_value[10] = "商品名称";

    //隐藏列
    colHiddenDic_key[0] = "10";
    colHiddenDic_value[0] = "关区";
    colHiddenDic_key[1] = "13";
    colHiddenDic_value[1] = "规格型号";
    colHiddenDic_key[2] = "14";
    colHiddenDic_value[2] = "放行日期";
    colHiddenDic_key[3] = "15";
    colHiddenDic_value[3] = "申报日期";
    colHiddenDic_key[4] = "16";
    colHiddenDic_value[4] = "审结日期";
}

页面代码部分:

<!-- 设置显示列模态框(Modal) -->
                <!--Modal Start-->
                <div class="modal fade" id="setModal" tabindex="-1" role="dialog"
                     aria-labelledby="myModalLabel" aria-hidden="true" style="overflow-y: hidden;">
                    <div class="modal-dialog">
                        <div class="modal-content" id="Detail">
                            <div class="tiptop">
                                <span>选择需要显示的列:</span><a data-dismiss="modal" aria-hidden="true"></a>
                            </div>
                            <div class="modal-body">
                                <div class="row" style="margin: -10px 0 10px 0;">
                                    <div class="col-sm-6"><span style="font-weight:bold">可选显示列:</span></div>
                                    <div class="col-sm-6"><span style="font-weight:bold">已选显示列:</span></div>
                                </div>
                                <div class="row" style="overflow: hidden; height: 155px; line-height: 155px;">
                                    <div class="col-sm-1" style="width: 30px"></div>
                                    <div class="col-sm-4" style="width: 200px;">
                                        <select name="selectBefor" id="selectBefor" style="width: 200px; border: solid 1px #b1adad;"  multiple="multiple" size="10"></select>
                                    </div>
                                    <div class="col-sm-2" style="width: 60px;">
                                        <ul class="forminfo" style="width: 60px;">
                                            <li><label></label></li>
                                            <li><label style="cursor: pointer;" onclick=" selectMove() "> > </label></li>
                                            <li><label></label></li>
                                            <li><label style="cursor: pointer;" onclick=" selectBack() "> < </label></li>
                                            <li><label></label></li>
                                        </ul>
                                    </div>
                                    <div class="col-sm-4" style="width: 200px;">
                                        <select name="selectAfter" id="selectAfter" style="width: 200px; border: solid 1px #b1adad; " multiple="multiple" size="10"></select>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <a href="#" class="btn btn-success" onclick=" ReSetShowCol() ">确认</a>
                                <a href="#" class="cancel btn btnbord" data-dismiss="modal"
                                   aria-hidden="true">取消</a>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal -->
                </div>
                <!-- ModalEnd -->

解决JQuery中datatables设置隐藏显示列多次提交后台刷新数据的问题的更多相关文章

  1. 解决iOS中 tabBarItem设置图片(image+title切图在一起)时造成的图片向上偏移

    解决iOS中 tabBarItem设置图片(image+title切图在一起)时造成的图片向上偏移 解决办法1:设置tabBarItem的imageInsets属性 代码示例: childContro ...

  2. 【技术贴】解决Eclipse中SVN图标不显示

    在用Eclipse做开发的时候,用到了svn版本控制器,这天当我打开Eclipse的时候,发现项目里面的所有文件前的版本号以及状态图标都不显示了,即所有的svn图标不显示了,这是怎么回事,关掉Ecli ...

  3. 解决jQuery中美元符号($)命名与别的js脚本库引用冲突方法

    在Jquery中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery来替换,如$('#msg')等同于JQuery('#msg') 的写法.然而,当我们引入多个js库后,在另外一个js库 ...

  4. 解决jQuery中dbclick事件触发两次click事件

    首先感谢这位小哥!http://qubernet.blog.163.com/blog/static/1779472842011101505853216/ 太长姿势了. 在jQuery事件绑定中,dbc ...

  5. 解决ScrollView中的ListView无法显示全

    问题描述: ListView加入到ScrollView中之后,发现只能显示其中一条,具体原因得看一下源代码.现在先贴一下方案 (转自:http://blog.csdn.net/hitlion2008/ ...

  6. WinForm中,设置不显示窗口的标题栏

    1:ControlBox设置False,然后标题为""的时候标题就不显示了2:把窗体设置为无边的窗体 FormBoderStyle 设为 None  (在Mdi中,关闭按钮会还在) ...

  7. 解决ActionBar中的item不显示在ActionBar的问题

    今天在用ActionBar,需要增加一个菜单选项,按教程在/res/menu下对应的布局文件中添加了一个item,但是它却是显示在overflow中,而不是直接显示在ActionBar当中的.我的布局 ...

  8. 解决PowerDesigner中DBMS设置的问题(Repost)

    创建物理模型时DBMS下拉框是空的,没值,以前从来没遇到过这种现象,开始以为PowerDesigner安装软件的问题,不过装了又卸,卸了又装,结果还是那样,现在找到答案了:点击DBMS后面的黄色文件图 ...

  9. 用这个插件jquery.raty.js————用于星星评价(这个案例用于后台传数据给我,前台显示星星个数)

    1.引入jquery.js文件 2.引入jquery.raty.js 3.页面中放在这个:<span class="readOnly" data-path="ima ...

随机推荐

  1. css3线条围绕跑马+jquery打字机效果

    原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...

  2. ASP.NET Core 中文文档 第四章 MVC(3.2)Razor 语法参考

    原文:Razor Syntax Reference 作者:Taylor Mullen.Rick Anderson 翻译:刘怡(AlexLEWIS) 校对:何镇汐 什么是 Razor? Razor 是一 ...

  3. React News Site 新闻站

    Learn React & Webpack by building the Hacker News front page from https://github.com/theJian/bui ...

  4. 简述linux的发行版,并描述不同发行版之间的联系与区别

    bash命令行返回值和展开 标签(空格分隔): bash,命令,状态,展开 1.命令状态结果和执行结果 (1)命令执行的状态返回值,命令执行完成之后,其执行状态结果值保存于bash的特殊状态变量$?中 ...

  5. Openmeetings 3.1.1 报错-Internal error

    安装手册官网教程:安装:我按照文档安装了至少10次,都是在初始化数据库时出现了如下:Internal error (图已失效) 后面找了N多资料都没有解决问题直到联Installation OpenM ...

  6. Yii2.0高级框架数据库增删改查的一些操作(转)

    yii2.0框架是PHP开发的一个比较高效率的框架,集合了作者的大量心血,下面通过用户为例给大家详解yii2.0高级框架数据库增删改查的一些操作 --------------------------- ...

  7. check if a linux process is done using bash 检查进程是否在运行

    # cat > check_process_is_end.sh while truedo   sleep 30 # seconds   res=`ps -ef | grep RNAhybrid` ...

  8. Java作业

    1.实现一个名为Person的类和它的子类Employee,Employee有两个子类Faculty和Staff.具体要求如下: (1)Person类中的属性有:姓名name(String类型),地址 ...

  9. CQOI2009中位数图

    原来在vijos上做过,当时根本看不懂 现在看起来这么水…… x记录从b向左连续走比k大的有多少个 y记录从b向右连续走比k大的有多少个 最后根据乘法原理乘一下 不过要加上x[0]+y[0]+1 因为 ...

  10. hibernate关联关系映射详解

    词汇解释 关系:事物之间相互作用.相互联系的状态.范围最大. 联系:在关系数据库中表示实体与实体之间的联系,1:1,1:n,m:n. 关联:表示对象之间的关系,既有数量性,又有方向性:动词:将对象之间 ...