此次项目开发过程中用到了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. Ajax在jQuery中的应用 (4)向jsp提交表单数据

    ajax技术带给我们的是良好的用户体验,同时,使用jquery可以简化开发,提高工作效率. 下面就介绍一下大致的开发步骤. 工具/原料 本文中使用的是 jquery-1.3.2.min.js 方法/步 ...

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

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

  3. jquery中选择checkbox拼接成字符串,然后到后台拆分取值

    jquery中选择checkbox拼接成字符串,然后到后台拆分取值 js中的代码 $("#btn").click(function(){ var chenked=$("i ...

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

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

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

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

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

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

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

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

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

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

  9. 【Python学习】解决pandas中打印DataFrame行列显示不全的问题

    在使用pandas的DataFrame打印时,如果表太长或者太宽会自动只给前后一些行列,但有时候因为一些需要,可能想看到所有的行列. 所以只需要加一下的代码就行了. #显示所有列 pd.set_opt ...

随机推荐

  1. 生成多sitemap文件

    Thinkphp生成多sitemap文件 我们知道sitemap对于seo的重要性,很多介绍只生成一个文件sitemap.xml ,但是如果网站内容比较多,就要生成多个sitemap文件,因为搜索引擎 ...

  2. 如何:对 Windows 窗体控件进行线程安全调用

    http://msdn.microsoft.com/zh-cn/library/ms171728(VS.90).aspx http://msdn.microsoft.com/zh-cn/library ...

  3. svn提交时强制添加注释

    1,找到Repositories 文件夹 2,在Repositories 中找到对应的工程, 3,在工程下找到hooks文件夹 4.在hooks文件夹下添加 :pre-commit.bat文件;文件内 ...

  4. Android中进程与线程

    常说的主线程(UI线程)是什么? 当一个Android程序刚启动的时候,我们的android系统就会启动一个带有一个单一线程的linux进程.默认情况下,所有的组件比如Activity都运行在同样的一 ...

  5. 14.python笔记之paramiko

    作者:刘耀 博客:www.liuyao.me 博客园:www.cnblogs.com/liu-yao 转载请注明 一,介绍 1.使用paramiko可以很好的解决以上问题,比起前面的方法,它仅需要在本 ...

  6. 2015寒假ACM训练计划

    1月26号至3月4号 每天给自己一个计划.做有意义的事情,不要浪费时间. 8:00——11:30 acm训练 11:30——13:00 午休 13:00——17:30  acm训练 17:30——18 ...

  7. R2D2 and Droid Army(多棵线段树)

    R2D2 and Droid Army time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  8. [YY题]HDOJ5288 OO’s Sequence

    题意:求这个式子 $\sum \limits_{i=1}^{n} \sum \limits_{j=1}^{m} f(i, j) mod (10^9 + 7)$ 的值 就是对每个区间[i, j]枚举区间 ...

  9. 锋利的jQuery第2版学习笔记1~3章

    第1章,认识jQuery 注意:使用的jQuery版本为1.7.1 目前流行的JavaScript库 Prototype(http://www.prototypejs.org),成型早,面向对象的思想 ...

  10. javascript 中的数据驱动页面模式

    前段时间一直在想前端MVC的意义.这个话题仁者见仁,但是MVC的使用方法给我提了一个管理数据的有意思的想法--数据管理和数据驱动页面.我们以前的思路一直是事件驱动页面,事件驱动页面合乎逻辑而且节约代码 ...