此次项目开发过程中用到了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 -->