JSPとサーブレット(IDE:Eclipse、データベース:Oracle10)を使用してWebアプリケーションを開発しています。jqGridを使用して、レコードを表形式で表示しています。
コードスニペット:
jQuery("#list10").jqGrid({
url:'ProfileServ?action=profile',
datatype: "xml",
sortable: true,
height: 250,
width: 550,
colNames:['Sr.No.','PROFILE_ID','PROFILE_NAME','TITLE','FIRST_NAME','MIDDLE_NAME','LAST_NAME'],
colModel:[{name:'srNo',index:'srNo', width:20,sortable:true, hidden:true},
{name:'PROFILE_ID',index:'PROFILE_ID', width:70,sortable:true,editable:true},
{name:'PROFILE_NAME',index:'PROFILE_NAME', width:150,sortable:true,editable:true},
{name:'TITLE',index:'TITLE', width:200,sortable:false,editable:true, hidden:true},
{name:'FIRST_NAME',index:'FIRST_NAME', width:200,sortable:false,editable:true, hidden:true},
{name:'MIDDLE_NAME',index:'MIDDLE_NAME', width:200,sortable:false,editable:true, hidden:true},
{name:'LAST_NAME',index:'LAST_NAME', width:200,sortable:false,editable:true, hidden:true}],
rowNum:10,
rowList:[10,20,50,100],
pager: '#pager10',
sortname: 'srNo',
loadonce:true,
ignoreCase: true,
viewrecords: true,
sortorder: "desc",
multiselect: false,
editurl: "ProfileServ?action=profileEdit",
caption: "Profile",
}).navGrid('#pager10',{edit:true,add:true,del:true,view:true},
{modal:true,checkOnUpdate:true,closeOnEscape:true,width:500,closeOnSubmit: true,editurl:'ProfileServ?action=profileEdit',
beforeShowForm: function(formid){alert('hiu');
cm = $('#list10').jqGrid('getColProp',"PROFILE_NAME"); cm.hidden=true;
cm = $('#list10').jqGrid('getColProp',"TITLE"); cm.hidden=false;
cm = $('#list10').jqGrid('getColProp',"FIRST_NAME"); cm.hidden=false;
cm = $('#list10').jqGrid('getColProp',"MIDDLE_NAME"); cm.hidden=false;
cm = $('#list10').jqGrid('getColProp',"LAST_NAME"); cm.hidden=false;},recreateForm: true},
{modal:true,closeOnEscape:true,recreateForm: true,width:500,mtype:'POST', url: 'ProfileServ',editData:{action: 'profileAdd',profileID: function () {return profileID;}},
beforeShowForm: function(formid){alert('hi');
cm = $('#list10').jqGrid('getColProp',"PROFILE_NAME"); cm.hidden=true;
cm = $('#list10').jqGrid('getColProp',"PROFILE_ID"); cm.editable=true;
cm = $('#list10').jqGrid('getColProp',"TITLE"); cm.hidden=false;
cm = $('#list10').jqGrid('getColProp',"FIRST_NAME"); cm.hidden=false;
cm = $('#list10').jqGrid('getColProp',"MIDDLE_NAME"); cm.hidden=false;
cm = $('#list10').jqGrid('getColProp',"LAST_NAME"); cm.hidden=false;},recreateForm: true},
{closeOnEscape:true, recreateForm: true,mtype: 'POST',url: 'ProfileServ',delData: {action: 'profileDelete',profileID: function () {return profileID;}},closeOnSubmit: true},
{closeOnEscape: true, multipleSearch: true, closeAfterSearch: true,width: 700},
{recreateForm: true,width:700,navkeys: [true,38,40],closeOnEscape:true});
私のcolModel
4列にはhidden
、表形式で表示したくないので、があります。Insert
ユーザーが望むときにそれらの列またはUpdate
データを表示したいと思います。
したがって、私のコードでは、これらの列のプロパティをoneventに設定していcm.hidden=false;
ます beforeShowForm
。ただし、問題は、ユーザーがデータを編集する場合、編集ボタンを2回クリックする必要があることです。最初のクリックでは、非表示になっていない2つの列のみが表示されcolModel
、ユーザーが編集ボタンを2回クリックすると、フィールドが表示されます。設定済みcm.hidden=false;
が表示されます。データの挿入中にも同じことが起こります。
私はrecreateForm: true
間違った場所や間違ったイベントに配置したと思います。
前もって感謝します。