问题
I have specified userdata in JSON response. Depending on the value of the title property,
- the caption will change to reflect the value of the
titleproperty - the text in the toolbar (between the grid caption and data table headers) will change
HTML
<table id="myjqgrid"></table>
<div id="Pager"></div>
JSON
{
"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 Definition
$(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'});
}
});
});
My Question is
Is this the right way of changing the content of div#t_myjqgrid? Or does jqgrid offer a property/method/event that I can use?
回答1:
There are no methods for changing of content top or bottom toolbars added by toolbar option of jqGrid, but you can use setCaption to set grid caption (title). The small modified demo of your code uses the following 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>');
}
}
The usage of $.jgrid.jqID(this.id) instead of this.id is helpful in the case if the id of the grid (in you case 'myjqgrid') contains some meta-characters.
来源：https://stackoverflow.com/questions/8684116/jqgrid-toolbar-text-is-this-a-good-way-of-doing-it