有没有办法隐藏jqGrid表中的列,但是在表单编辑器模式对话框中编辑行时它是否显示为只读?
答案 0 :(得分:79)
此功能内置于jqGrid中。
按如下方式设置网格功能。
$('#myGrid').jqGrid({
...
colNames: ['Manager', 'Name', 'HiddenSalary'],
colModel: [
{ name: 'Manager', editable: true },
{ name: 'Price', editable: true },
{ name: 'HiddenSalary', hidden: true , editable: true,
editrules: {edithidden:true}
}
],
...
};
还可以应用其他编辑规则,但此基本设置会在网格视图中隐藏经理的工资,但允许在显示编辑表单时进行编辑。
答案 1 :(得分:38)
我只想扩展 queen3 的建议,应用以下功能:
editoptions: {
dataInit: function(element) {
$(element).attr("readonly", "readonly");
}
}
场景#1 :
<强>解决方案强>:
colModel:[
{ name:'providerUserId',
index:'providerUserId',
width:100,editable:true,
editrules:{required:true},
editoptions:{
dataInit: function(element) {
jq(element).attr("readonly", "readonly");
}
}
},
],
providerUserId在网格中可见,在编辑表单时可见。但是你无法编辑内容。
场景#2 :
<强>解决方案强>:
colModel:[
{name:'providerUserId',
index:'providerUserId',
width:100,editable:true,
editrules:{
required:true,
edithidden:true
},
hidden:true,
editoptions:{
dataInit: function(element) {
jq(element).attr("readonly", "readonly");
}
}
},
]
请注意,在两个实例中我都使用jq来引用jquery,而不是通常的$。在我的HTML中,我有以下脚本来修改jQuery使用的变量:
<script type="text/javascript">
var jq = jQuery.noConflict();
</script>
答案 2 :(得分:22)
您可以使用以下代码隐藏表格列。
JQuery("tableName").hideCol("colName");
您可以使用以下代码再次显示它。
JQuery("tableName").showCol("colName");
对于您的问题,您可以调用document.ready()上的hideCol()代码,并且可以在对话框的编辑/单击事件上绑定showCol()代码。
答案 3 :(得分:7)
这个帖子我觉得很老了,但万一其他人偶然发现了这个问题...... 我必须从表的选定行中获取一个值,但我不想显示该行的列。我使用了hideCol,但是和Andy一样,它看起来很麻烦。要修复它(称之为黑客攻击),我只需重新设置网格的宽度。
jQuery(document).ready(function() {
jQuery("#ItemGrid").jqGrid({
...,
width: 700,
...
}).hideCol('StoreId').setGridWidth(700)
由于我的行宽是自动的,当我重置表的宽度时,它会重置列宽但排除隐藏的宽度,因此它们填补了空白。
答案 4 :(得分:1)
尝试使用edithidden:true并执行
editoptions: { dataInit: function(element) { $(element).attr("readonly", "readonly"); } }
或者查看jqGrid wiki进行自定义编辑,您可以设置任何输入类型,甚至是我认为的标签。
答案 5 :(得分:1)
隐藏网格列
jQuery("#validGrid").jqGrid('hideCol',str);
答案 6 :(得分:0)
这篇文章有点旧了。但这是我显示/隐藏列的代码。我使用内置函数来显示列并只标记它们。
显示列/隐藏列的功能。 #jqGrid是我的网格的名称,columnChooser是jqGrid列选择器。
function showHideColumns() {
$('#jqGrid').jqGrid('columnChooser', {
width: 250,
dialog_opts: {
modal: true,
minWidth: 250,
height: 300,
show: 'blind',
hide: 'explode',
dividerLocation: 0.5
} });