码迷，mamicode.com
首页 > Web开发 > 详细

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

时间：2015-04-21 12:38:15      阅读：315      评论：0      收藏：0      [点我收藏+]

标签：

此次项目开发过程中用到了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设置隐藏显示列多次提交后台刷新数据的问题

标签：

原文地址：http://www.cnblogs.com/xiaoerlang90/p/4443987.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！