隐藏显示列

隐藏显示列

关注
发信
关注(28)粉丝(399)

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

此次项目开发过程中用到了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 -->
05-02 19:17
Powered by LMLPHP ©2024 隐藏显示列 0.069463