jqgrid – 工具栏文本 – 这是一个很好的方法吗?

我在JSON响应中指定了userdata 。 根据title属性的值,

  • 标题将更改以反映title属性的值
  • 工具栏中的文本(网格标题和数据表标题之间)将发生变化

HTML

 

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是否提供了我可以使用的属性/方法/事件?

没有方法可以更改由jqGrid的toolbar选项添加的内容顶部或底部工具toolbar ,但您可以使用setCaption设置网格标题(标题)。 代码的小修改演示使用以下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('
Viewing the Records.
'); } else if (userdata.title === "My Title 2") { $this.jqGrid('setCaption', "Editing the Records."); $('#t_' + $.jgrid.jqID(this.id)) .append('
Editing the Records.
'); } }

如果网格的id (在你的情况下是’myjqgrid’)包含一些元字符 ,则使用$.jgrid.jqID(this.id)而不是this.id是有帮助的。