0

現在、JQGridを実装しています。初めて検索を実行すると、グリッドに問題なく入力されます。検索をもう一度クリックすると、同じ基準を使用しても、返されたデータを使用する代わりに、グリッドが空白に更新されます。なぜそうなるのか、誰か考えがありますか？

これが私の検索機能です：

function searchlibrary(searchInfo){
            if(searchInfo == undefined){
                searchInfo = null;
            }
            $("#searchlist").jqGrid({
            url:'./searchlibrary',
            datatype: 'json',
            mtype: 'POST',
            postData: searchInfo,
            colNames:['Resource Name','Unit', 'Topic','Document Type','Content Type','Select'],
            colModel :[ 
              {name:'resourceName', index:'resourceName', width:374, align:'left'}, 
              {name:'unit', index:'unitID', width:40, align:'center',sortable:true,sorttype:'text'}, 
              {name:'topic', index:'topicID', width:220, align:'center',sortable:true}, 
              {name:'docType', index:'docTypeID', width:97, align:'center',sortable:true}, 
              {name:'contentType', index:'contentTypeID', width:97, align:'center',sortable:true},
              {name: 'resourceID', width:55, align: "center", sortable: false, editable: true, edittype: "checkbox", editoptions: {value: "Yes:No"}}
            ],
            rowNum:20,
            sortname: 'resourceName',
            sortorder: 'asc',
            viewrecords: true,
            gridview: true,
            width:878,
            height:251
          });
          $("#searchlist").jqGrid('setLabel','resourceName','',{'text-align':'left','padding-left':'5px'});
        }

グリッドの上にアイテムのドロップダウンがあります。1つのアイテムを選択すると、より多くのコンテンツが表示される別のドロップダウン、またはテキストボックスが表示されます。次に、ユーザーが送信ボタンをクリックすると、ドロップダウン/テキストフィールドの内容がjqueryによって取得され、オブジェクトが作成されます。そのオブジェクトは、searchlibrary関数が呼び出されたときにsearchInfo引数として渡されます。その後、jqgrid呼び出しでpostDataとして使用されます。渡されるオブジェクトが常に正しいことを確認するためにログに記録しました。何らかの理由で、この関数を最初に呼び出した後は、空白のjqgridが返されます。また、情報を取得するために呼び出されるURLをさらに理解するために、jsonデータを生成するphpファイルがあります。

アップデート

これがオレグの提案に対する私の試みです。私は何かが欠けているに違いありません。再び空白になります。これが私が今使っているコードです。

$(document).ready(function(){
            $("#searchlist").jqGrid({
                url:'./searchlibrary',
                datatype: 'json',
                mtype: 'POST',
                postData: {data: function(){var myvar = new Object(); myvar = getSearchData(); console.log(myvar); return myvar;}},
                colNames:['Resource Name','Unit', 'Topic','Document Type','Content Type','Select'],
                colModel :[ 
                  {name:'resourceName', index:'resourceName', width:380, align:'left'}, 
                  {name:'unit', index:'unitID', width:40, align:'center',sortable:true,sorttype:'text'}, 
                  {name:'topic', index:'topicID', width:220, align:'center',sortable:true}, 
                  {name:'docType', index:'docTypeID', width:97, align:'center',sortable:true}, 
                  {name:'contentType', index:'contentTypeID', width:97, align:'center',sortable:true},
                  {name: 'select', width:55, align: "center", sortable: false, editable: true, edittype: "checkbox", formatter:"checkbox", editoptions: {value: "Yes:No"},formatoptions: {disabled : false}}
                ],
                rowNum:20,
                sortname: 'resourceName',
                sortorder: 'asc',
                viewrecords: true,
                gridview: true,
                width:878,
                height:251
             });
          $("#searchlist").jqGrid('setLabel','resourceName','',{'text-align':'left'});

          function getSearchData(){
                var searchType = $('select[name="searchtype"]').val();
                var searchCriteria = "";
                var searchInfo = new Object();
                if(searchType=="Unit" || searchType=="Topic" || searchType=="Document Type"){
                    searchCriteria = $('select[name="searchcontent_select"]').val();
                } else if(searchType=="Resource Name" || searchType=="Keyword"){
                    searchCriteria = $('input[name="searchcontent_text"]').val();
                }
                searchInfo = {type:searchType, criteria:searchCriteria}
                return searchInfo;
          }

          $('#searchbutton').click(function(ev){
                $("#searchlist").trigger('reloadGrid');
          });
 });

実用的なソリューション

$(document).ready(function(){
            $("#searchlist").jqGrid({
                url:'./searchlibrary',
                datatype: 'json',
                mtype: 'POST',
                postData: {type: function(){return $('select[name="searchtype"]').val();},
                    criteria: function(){return getSearchData();}
                },
                colNames:['Resource Name','Unit', 'Topic','Document Type','Content Type','Select'],
                colModel :[ 
                  {name:'resourceName', index:'resourceName', width:380, align:'left'}, 
                  {name:'unit', index:'unitID', width:40, align:'center',sortable:true,sorttype:'text'}, 
                  {name:'topic', index:'topicID', width:220, align:'center',sortable:true}, 
                  {name:'docType', index:'docTypeID', width:97, align:'center',sortable:true}, 
                  {name:'contentType', index:'contentTypeID', width:97, align:'center',sortable:true},
                  {name: 'select', width:55, align: "center", sortable: false, editable: true, edittype: "checkbox", formatter:"checkbox", editoptions: {value: "Yes:No"},formatoptions: {disabled : false}}
                ],
                rowNum:20,
                sortname: 'resourceName',
                sortorder: 'asc',
                viewrecords: true,
                gridview: true,
                width:878,
                height:251
             });
          $("#searchlist").jqGrid('setLabel','resourceName','',{'text-align':'left'});

          function getSearchData(){
                var searchType = $('select[name="searchtype"]').val();
                var searchCriteria = "";
                var searchInfo;
                if(searchType=="Unit" || searchType=="Topic" || searchType=="Document Type"){
                    searchCriteria = $('select[name="searchcontent_select"]').val();
                } else if(searchType=="Resource Name" || searchType=="Keyword"){
                    searchCriteria = $('input[name="searchcontent_text"]').val();
                }
                searchInfo = {type:searchType, criteria:searchCriteria}
                return searchCriteria;
          }

          $('#searchbutton').click(function(ev){
                $("#searchlist").trigger('reloadGrid');
          });
 });
4

2 に答える 2

1

解決策は、最初にグリッドをアンロードすることでした。だから私はこの行を追加しました：

$("#searchlist").jqGrid('GridUnload');

すぐ上にsearchlibrary関数を入れました

$("#searchlist").jqGrid({

これにより、グリッドは完全にアンロードされ、適切なコンテンツでリロードされます。

メモとして、私はここで解決策のアイデアを見つけました。

于 2012-06-27T18:09:01.183 に答える
0

の使用法は$("#searchlist").trigger("reloadGrid")、の使用法としてより効果的です$("#searchlist").jqGrid('GridUnload')。$("#searchlist").jqGrid({...]);列ヘッダーや他の多くのグリッド要素が作成されることは理解できます。したがって、グリッドを1回作成し、$("#searchlist").jqGrid({...]);後でのみ使用する必要があります$("#searchlist").trigger("reloadGrid")。

postData関数をプロパティとして使用することをお勧めします（ここを参照）。例えば

postData: {
    type: function () {
        return $('select[name="searchtype"]').val(); // get some data
    },
    criteria: function () {
        return getSearchData();}
    }
}

'#searchbutton'ユーザーがボタンをクリックするか、データの並べ替えまたはページングを行うたびに、メソッドtypeとcriteriaメソッドが呼び出されます。したがって、プロパティの現在の値を返し、ユーザーがページ上のいくつかのコントロールに入力するサーバーにデータを送信できます。

于 2012-06-27T20:21:04.440 に答える