jqGrid:处理多个相关表中的数据
jqGrid,一个强大的 jQuery 插件,擅长显示来自各种来源的数据。此示例演示如何有效地呈现两个互连表中的数据:Students
和 Cities
.
Students
表使用城市 ID 作为外键,引用 Cities
表获取城市名称:
<code>Students: | SID | SNAME | CITY | |---|---|---| | 1 | ABC | 11 | | 2 | XYZ | 12 | | 3 | ACX | 13 | Cities: | CID | CNAME | |---|---| | 11 | Chennai | | 12 | Mumbai | | 13 | Delhi |</code>
所需的输出格式是一个jqGrid,显示学生信息和实际城市名称:
SID | SNAME | City |
---|---|---|
1 | ABC | Chennai |
2 | XYZ | Mumbai |
3 | ACX | Delhi |
4 | KHG | Banglore |
5 | ADF | Hyderabad |
6 | KKR | Kolkatta |
为了实现此目的,服务器端响应的结构包括一个 cityMap
,它将城市 ID 转换为名称:
<code class="language-json">{ "cityMap": {"11": "Chennai", "12": "Mumbai", "13": "Delhi"}, "rows": [ { "SID": "1", "SNAME": "ABC", "CITY": "11" }, { "SID": "2", "SNAME": "XYZ", "CITY": "12" }, { "SID": "3", "SNAME": "ACX", "CITY": "13" }, { "SID": "4", "SNAME": "KHG", "CITY": "13" }, { "SID": "5", "SNAME": "ADF", "CITY": "12" }, { "SID": "6", "SNAME": "KKR", "CITY": "11" } ] }</code>
客户端 jqGrid 代码利用 beforeProcessing
事件使用 cityMap
动态更新列属性。这可确保显示正确的城市名称。 这里没有直接使用formatter: "select"
选项,但是运行时动态更新列选项的原理保持不变。
这是客户端代码的简化表示:
<code class="language-javascript">var filterToolbarOptions = {defaultSearch: "cn", stringResult: true, searchOperators: true}, removeAnyOption = function ($form) { /* ... (function remains unchanged) ... */ }, $grid = $("#list"); // ... (other code remains largely unchanged) ... $grid.jqGrid({ // ... (colModel remains largely unchanged) ... beforeProcessing: function (response) { // ... (logic to handle cityMap and update column properties) ... }, jsonReader: { id: "SID"} }); // ... (rest of the code remains largely unchanged) ...</code>
beforeProcessing
函数将在 jqGrid 渲染网格之前使用响应中的 cityMap
将 rows
数据中的数字城市 ID 替换为相应的城市名称。 这种方法避免了复杂的客户端数据操作并保持逻辑简洁。
以上是如何使用带有城市映射的 JSON 响应在 jqGrid 中显示多个表中的数据?的详细内容。更多信息请关注PHP中文网其他相关文章!