我正在使用 jqGrid 来维护数据库,并且需要在添加/编辑表单对话框中使某些字段只读。我看到 jqGrid 支持 editoptions 下的只读字段,但是否有可能“灰显”只读输入框,以便有一个视觉提示让用户知道该字段是只读且不可编辑的?
提前致谢。
更新 感谢您的快速回复奥列格!我尝试了您发布的内容,但我在 IDE (Netbeans) 中收到很多代码警告。这是我的代码:
jQuery("#grid").jqGrid('navGrid','#grid_toppager',
{
add:true,
edit:true,
view:true,
search:false,
del:false,
refresh:true
},
{ // Edit form
width:"auto",
height:"auto",
top:220,
left:500,
viewPagerButtons:false, //disables the arrows to next records
topinfo:"Fields marked with (*) are required",
resize:false,
recreateForm: true,
beforeShowForm: function ($form) {
$form.find(".FormElement[readonly]")
.prop("disabled", true)
.addClass("ui-state-disabled")
.closest(".DataTD")
.prev(".CaptionTD")
.prop("disabled", true)
.addClass("ui-state-disabled")
},
{ // Add form
width:"auto",
height:"auto",
top:220,
left:500,
topinfo:"Fields marked with (*) are required",
resize:false,
reloadAfterSubmit:true,
closeAfterAdd: true
},
{ // prmDel
},
{ // prmSeach
},
{ //prmView
top:220,
left:460
}
); //jQuery("#grid").jqGrid('navGrid','#grid_toppager'
另外是否可以将灰色更改为稍深的色调?我需要用户仍然能够阅读它,但看到并理解它不可编辑的视觉提示。非常感谢奥列格
最佳答案
您可以使用beforeShowForm
回调来设置编辑表单的所有可读字段。
The demo使用以下代码
$("#grid").jqGrid("navGrid", "#pager", {},
{
recreateForm: true,
beforeShowForm: function ($form) {
$form.find(".FormElement[readonly]")
.prop("disabled", true)
.addClass("ui-state-disabled")
.closest(".DataTD")
.prev(".CaptionTD")
.prop("disabled", true)
.addClass("ui-state-disabled");
},
// Add dialog options
},
{recreateForm: true}
);
它将编辑表单的所有只读字段“灰显”:
您可以使用该字段上的 disabled
属性,并且如果需要,您可以使用另一个类作为 "ui-state-disabled"
。我主要想展示如何选择所有您想要“灰显”的字段。
关于jqGrid:如何在添加/编辑表单对话框上灰显只读字段?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20497674/