jqgrid - ツールバーのテキスト - これは良い方法ですか？

Question

私はuserdataをJSONレスポンスで指定しました。

• 、titleプロパティの値に応じて、キャプションが変更されtitle性
• （グリッド・キャプションとデータテーブルのヘッダとの間の）ツールバーのテキストの値を反映するように変更され

HTML

<table id="myjqgrid"></table> 
<div id="Pager"></div> 

J SON

{ 
    "colModel": [ 
     { 
      "name": "ID", 
      "label": "ID", 
      "width": 60, 
      "align": "left", 
      "jsonmap": "cells.0.value", 
      "sortable": true  
     }, 
     { 
      "name": "FirstName", 
      "label": "FirstName", 
      "width": 100, 
      "align": "left", 
      "jsonmap": "cells.1.value", 
      "sortable": false  
     }, 
     { 
      "name": "LastName", 
      "label": "LastName", 
      "width": 100, 
      "align": "left", 
      "jsonmap": "cells.2.value", 
      "sortable": false  
     } 
    ], 
    "colNames": [ 
     "ID", 
     "FirstName", 
     "LastName" 
    ], 
    "mypage": { 
     "outerwrapper": { 
      "page":"1", 
      "total":"1", 
      "records":"20", 
      "innerwrapper": { 
       "rows":[ 
        { 
         "id":"1", 
         "cells": 
         [    
          { 
           "value":"12345", 
           "label": "ID"      
          }, 
          { 
           "value":"David", 
           "label": "FirstName"  
          }, 
          {       
           "value":"Smith", 
           "label": "LastName"       
          }                      
         ]  
        }, 
        { 
         "id":"2", 
         "cells": 
         [    
          { 
           "value":"37546", 
           "label": "ID"      
          }, 
          { 
           "value":"Willy", 
           "label": "FirstName"  
          }, 
          {       
           "value":"Peacock", 
           "label": "LastName"       
          }                      
         ]  
        }, 
        { 
         "id":"3", 
         "cells": 
         [    
          { 
           "value":"62345", 
           "label": "ID"      
          }, 
          { 
           "value":"Kim", 
           "label": "FirstName"  
          }, 
          {       
           "value":"Holmes", 
           "label": "LastName"       
          }                      
         ]  
        }, 
        { 
         "id":"4", 
         "cells": 
         [  
          { 
           "value":"186034", 
           "label": "ID"      
          }, 
          { 
           "value":"Andy", 
           "label": "FirstName"  
          }, 
          {       
           "value":"Wills", 
           "label": "LastName"       
          }                      
         ]  
        }, 
        { 
         "id":"5", 
         "cells": 
         [    
          { 
           "value":"67345", 
           "label": "ID"      
          }, 
          { 
           "value":"Paul", 
           "label": "FirstName"  
          }, 
          {       
           "value":"Lawrence", 
           "label": "LastName"       
          }                      
         ]  
        }, 
        { 
         "id":"6", 
         "cells": 
         [    
          { 
           "value":"12906", 
           "label": "ID"      
          }, 
          { 
           "value":"Andy", 
           "label": "FirstName"  
          }, 
          {       
           "value":"Charlery", 
           "label": "LastName"       
          }                      
         ]  
        }, 
        { 
         "id":"7", 
         "cells": 
         [    
          { 
           "value":"564565", 
           "label": "ID"      
          }, 
          { 
           "value":"Bets", 
           "label": "FirstName"  
          }, 
          {       
           "value":"Josilyn", 
           "label": "LastName"       
          }                      
         ]  
        } 
       ], 
       "userdata": { 
        "title": "My Title 1"  // this can be 'My Title 1' or 'My Title 2'     
       } 
      } 
     } 
    } 
} 

JQGrid定義

$(document).ready(function() { 
    $.ajax({ 
     type: "GET", 
     url: "myjqgrid.json", 
     data: "", 
     dataType: "json", 
     success: function(response){ 
      var columnData = response.mypage.outerwrapper, 
       columnNames = response.colNames, 
       columnModel = response.colModel; 

      $("#myjqgrid").jqGrid({ 
       datatype: 'jsonstring', 
       datastr: columnData,     
       colNames: columnNames, 
       colModel: columnModel, 
       jsonReader: { 
        root: "innerwrapper.rows", 
        userdata: "innerwrapper.userdata",    
        repeatitems: false 
       }, 
       gridview: true, 
       pager: "#Pager", 
       rowNum: 21, 
       rowList: [21], 
       viewrecords: true,    
       recordpos: 'left', 
       multiboxonly: true, 
       multiselect: true, 
       width: "1406",  
       height: "auto", 
       loadonce: true, 
       toolbar: [true,"top"], 
       loadComplete: function(){ 
        var userdata = $("#myjqgrid").jqGrid('getGridParam', 'userData'); 
        if (userdata) { 
         if (userdata.title) { 
          $("#myjqgrid").jqGrid('setCaption', userdata.title); 
         } 
        } 
        if (userdata.title === "My Title 1") { 
         $("div#t_myjqgrid").append("Viewing the Records."); 
        } else if (userdata.title === "My Title 2") { 
         $("div#t_myjqgrid").append("Editing the Records."); 
        } 
       } 
      }); 
      $("#myjqgrid").jqGrid('navGrid','#Pager', {add:false, edit:false, del:false, position: 'right'}); 
     } 
    }); 
}); 

私の質問です

これはdiv#t_myjqgridの内容を変更する正しい方法ですか？または、jqgridは私が使用できるプロパティ/メソッド/イベントを提供していますか？

Answer 1

toolbarオプションのjqGridオプションで追加されたコンテンツの上部または下部のツールバーを変更する方法はありませんが、setCaptionを使用してグリッドキャプション（タイトル）を設定できます。あなたのコードの小さな修正demoは以下loadCompleteを使用しています。

loadComplete: function() { 
    var $this = $(this), userdata = $this.jqGrid('getGridParam', 'userData'); 
    if (userdata && userdata.title) { 
     $this.jqGrid('setCaption', userdata.title); 
    } 
    if (userdata.title === "My Title 1") { 
     $this.jqGrid('setCaption', "Viewing the Records."); 
     $('#t_' + $.jgrid.jqID(this.id)) 
      .append('<div style="margin: 0.3em">Viewing the Records.</div>'); 
    } else if (userdata.title === "My Title 2") { 
     $this.jqGrid('setCaption', "Editing the Records."); 
     $('#t_' + $.jgrid.jqID(this.id)) 
      .append('<div style="margin: 0.3em">Editing the Records.</div>'); 
    } 
} 

（あなたの場合「myjqgrid」内の）グリッドのidは、いくつかのmeta-charactersが含まれている場合$.jgrid.jqID(this.id)代わりのthis.idの使用は、場合に役立ちます