jqgrid-工具栏文本-这是一个好方法吗? [英] jqgrid - toolbar text - is this a good way of doing it?
问题描述
我在JSON响应中指定了userdata
.取决于title
属性的值
I have specified userdata
in JSON response. Depending on the value of the title
property,
- 标题将更改以反映
title
属性的值 - 工具栏中的文本(在网格标题和数据表标题之间)将发生变化
- the caption will change to reflect the value of the
title
property - 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定义
$(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提供了我可以使用的属性/方法/事件?
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?
推荐答案
jqGrid的toolbar
选项没有更改内容顶部或底部工具栏的方法,但是您可以使用setCaption
设置网格标题(标题).对代码进行小的修改的演示使用以下loadComplete
:
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>');
}
}
如果网格的id
(在您的情况下为"myjqgrid")包含某些
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.
这篇关于jqgrid-工具栏文本-这是一个好方法吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!