此次项目开发过程中用到了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. 【小白的CFD之旅】15 四种境界

    天气不错,小白一大早就起床了,吃过早餐就往奔实验室而去.路上碰到了同去实验室的小牛师兄. "小白,这么早啊",小牛师兄老远就发现了小白,打招呼道. "早啊,牛师兄,刚吃完 ...

  2. HttpURLConnection使用getInputStream无法执行

    url = new URL(urlStr); urlConn = (HttpURLConnection) url.openConnection(); // 设置请求方式为"GET" ...

  3. 自动登录VSS

    每次打开vss都需要输入用户名.密码,用起来多少有些麻烦.用以下两种方式即可实现自动登录: 方法1: 在vss快捷方式的命令行最后面添加-y参数 "C:/Program Files/Micr ...

  4. jquery audio player

    <!DOCTYPE html><html lang="en"> <head>  <meta charset="utf-8&quo ...

  5. iOS开发网络篇—数据安全

    iOS开发网络篇—数据安全 一.简单说明 1.说明 在开发应用的时候,数据的安全性至关重要,而仅仅用POST请求提交用户的隐私数据,还是不能完全解决安全问题. 如:可以利用软件(比如Charles)设 ...

  6. 编译hadoop遇到maven timeout

      在编译hadoop的过程中,使用ant jar进行编译时,提示maven版本库连接超时的问题,通过搜索发现,在如下文件的位置中有repo2的版本库地址,这个地址在国内,目前不能正常的访问:   将 ...

  7. 第1章 Java中常用字符串方法总结

    1.1 charAt方法——提取指定字符 1.2 codePointAt方法——提取索引字符代码点 1.3 codePointBefore方法——获取索引前一个字符的代码点 1.4 codePoint ...

  8. Windows NT访问权限

    #define SECTION_QUERY 0x0001 #define SECTION_MAP_WRITE 0x0002 #define SECTION_MAP_READ 0x0004 #defin ...

  9. UITableView全面解析,讲的好详细

    --UIKit之UITableView 概述 在iOS开发中UITableView可以说是使用最广泛的控件,我们平时使用的软件中到处都可以看到它的影子,类似于微信.QQ.新浪微博等软件基本上随处都是U ...

  10. 解决dede搜索页面只能显示10条信息解决方案

    解决dede搜索页面只能显示10条信息解决方案,感觉显示的信息太少,这时就要想办法去解决一下.看看有什么好办法来解决一下这个问题. dede搜索页模板中,默认只能显示10条记录. 打开dede搜索页模 ...