datagrid列表控件在需要动态显示、隐藏列时,若使用hideColumn会出错显示错位的问题,可能过两种方式来解决此问题: 1.设置hidden属性 2.重写列头
示例datagrid
$('#magazineGrid').datagrid({
height: 340,
url: 'url',
method: 'POST',
queryParams: { 'id': id },
idField: '产品ID',
pageSize: 10,
pageList: [10, 20, 50, 100, 150, 200],
showFooter: true,
columns: [[
{ field: 'ck', checkbox: true },
{ field: '刊名', title: '刊名', width: 180, align: 'left' },
{ field: '类别', title: '类别', width: 150, align: 'left' },
{ field: '月份', title: '月份', width: 100, align: 'left' },
{ field: '期次', title: '期次', width: 100, align: 'left' }
]],
onBeforeLoad: function (param) {
},
onLoadSuccess: function (data) {
},
onLoadError: function () {
},
onClickCell: function (rowIndex, field, value) {
}
});
如上,假设我们要根据条件来动态显示或隐藏【其次】列,若$('#magazineGrid').datagrid('hideColumn', '期次')这样设置,展示时会出现错位问题,
可通过下面两种方式来处理
1.设置hidden
{ field: '期次', title: '期次', width: 100, align: 'left',hidden:条件==true?true:false }
2.重写列头(只是将此列设置为空,列宽度仍存在)
//重写标题
$.extend($.fn.datagrid.methods, {
setColumnTitle: function (jq, option) {
if (option.field) {
return jq.each(function () {
var $panel = $(this).datagrid("getPanel");
var $field = $('td[field=' + option.field + ']', $panel);
if ($field.length) {
var $span = $("span", $field).eq(0);
$span.html(option.text);
}
});
}
return jq;
}
});
if (条件) {
$("#magazineGrid").datagrid("setColumnTitle", { field: '期次', text: '' });
}