jqgrid 4.6 销毁并重新加载
时间: 2023-08-23 20:06:56 浏览: 228
如果需要在 jqGrid 4.6 中销毁并重新加载 jqGrid,可以使用以下代码:
```
// 销毁 jqGrid
$("#grid").GridUnload();
// 重新加载 jqGrid
$("#grid").jqGrid({
// jqGrid 的配置项
...
});
```
这段代码会先销毁 jqGrid,然后重新加载 jqGrid,从而实现 jqGrid 的销毁和重新加载。
需要注意的是,在 jqGrid 4.6 中,可以使用 GridUnload 方法或者 GridDestroy 方法销毁 jqGrid。但是,如果表格中使用了一些插件或者事件,使用 GridDestroy 方法可能会导致这些插件和事件没有被完全销毁,而使用 GridUnload 方法可以完全销毁 jqGrid,从而避免这个问题。
另外,在 jqGrid 4.6 中,如果需要在重新加载 jqGrid 时传递参数,可以使用 setGridParam 方法设置 postData 参数,例如:
```
// 设置 postData 参数
$("#grid").jqGrid("setGridParam", { postData: { param1: value1, param2: value2 } });
// 重新加载 jqGrid
$("#grid").trigger("reloadGrid");
```
这样就可以在重新加载 jqGrid 时传递参数了。
相关问题
jqgrid 4.6 treeReader 构建本地JSON 加载数据
以下是一个简单的本地 JSON 数据的 jqGrid 4.6 的 demo:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jqGrid 4.6 TreeReader Demo</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/free-jqgrid/4.15.5/css/ui.jqgrid.min.css">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.bootcss.com/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script>
<script>
var mydata = [
{id: "1", name: "Node 1", parent: "0", level: "0", isLeaf: false, expanded: true},
{id: "2", name: "Node 2", parent: "1", level: "1", isLeaf: true, expanded: false},
{id: "3", name: "Node 3", parent: "1", level: "1", isLeaf: false, expanded: true},
{id: "4", name: "Node 4", parent: "3", level: "2", isLeaf: true, expanded: false},
{id: "5", name: "Node 5", parent: "3", level: "2", isLeaf: true, expanded: false},
{id: "6", name: "Node 6", parent: "0", level: "0", isLeaf: false, expanded: true},
{id: "7", name: "Node 7", parent: "6", level: "1", isLeaf: true, expanded: false},
{id: "8", name: "Node 8", parent: "6", level: "1", isLeaf: true, expanded: false},
{id: "9", name: "Node 9", parent: "0", level: "0", isLeaf: true, expanded: false}
];
$(function () {
$("#list").jqGrid({
data: mydata,
datatype: "local",
colModel: [
{name: "id", width: 50},
{name: "name", width: 150},
{name: "parent", width: 100, hidden: true}
],
treeGrid: true,
treeGridModel: "adjacency",
ExpandColumn: "name",
ExpandColClick: true,
caption: "jqGrid 4.6 TreeReader Demo",
height: "auto",
rowNum: 10000,
jsonReader: {
repeatitems: false,
root: function (obj) {
return obj;
},
page: function () {
return 1;
},
total: function () {
return 1;
},
records: function (obj) {
return obj.length;
}
},
treeReader: {
parent_id_field: "parent",
level_field: "level",
leaf_field: "isLeaf",
expanded_field: "expanded"
}
});
});
</script>
</head>
<body>
<table id="list"></table>
</body>
</html>
```
上述示例中,我们构建了一个包含简单树形结构数据的 `mydata` 数组。每个节点都包含了 `id`、`name`、`parent`、`level`、`isLeaf` 和 `expanded` 属性。其中 `id` 用于表示节点的唯一标识,`name` 用于显示节点的名称,`parent` 用于表示节点的父节点 ID,`level` 用于表示节点的层级,`isLeaf` 用于表示节点是否为叶子节点,`expanded` 用于表示节点是否展开。
在 jqGrid 的配置中,我们使用 `data` 和 `datatype` 来指定加载本地数据,并使用 `colModel` 来定义表格的列模型。使用 `treeGrid` 和 `treeGridModel` 来启用 jqGrid 的树形功能,并使用 `ExpandColumn` 和 `ExpandColClick` 来使树形结构可以展开和收缩。`jsonReader` 和 `treeReader` 分别用于解析 JSON 数据和树形结构的数据。
在 `jsonReader` 中,我们将 `root` 属性设置为返回整个 JSON 数据,将 `records` 属性设置为返回 JSON 数组的长度,而其他属性则按默认值设置即可。
在 `treeReader` 中,我们使用了 `parent_id_field`、`level_field`、`leaf_field` 和 `expanded_field` 来指定树形结构中每个节点的父节点 ID、层级、是否为叶子节点和是否展开。这些属性的值需要在 `mydata` 数组中提供。
你可以根据需要修改 `mydata` 数组的内容。
jqgrid 4.6 treeReader 加载本地树形数据demo
以下是一个简单的本地树形数据的 jqGrid 4.6 的 demo:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jqGrid 4.6 TreeReader Demo</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/free-jqgrid/4.15.5/css/ui.jqgrid.min.css">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.bootcss.com/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script>
<script>
$(function () {
$("#list").jqGrid({
url: 'data.json',
datatype: "json",
mtype: "GET",
colModel: [
{name: "id", width: 50},
{name: "name", width: 150},
{name: "parent", width: 100, hidden: true}
],
treeGrid: true,
treeGridModel: "adjacency",
ExpandColumn: "name",
ExpandColClick: true,
caption: "jqGrid 4.6 TreeReader Demo",
height: "auto",
rowNum: 10000,
jsonReader: {
repeatitems: false,
root: function (obj) {
return obj;
},
page: function () {
return 1;
},
total: function () {
return 1;
},
records: function (obj) {
return obj.length;
}
},
treeReader: {
parent_id_field: "parent",
level_field: "level",
leaf_field: "isLeaf",
expanded_field: "expanded"
}
});
});
</script>
</head>
<body>
<table id="list"></table>
</body>
</html>
```
上述示例中,我们使用 `treeGrid` 和 `treeGridModel` 来启用 jqGrid 的树形功能,并使用 `ExpandColumn` 和 `ExpandColClick` 来使树形结构可以展开和收缩。`jsonReader` 和 `treeReader` 分别用于解析 JSON 数据和树形结构的数据。
在 `jsonReader` 中,我们将 `root` 属性设置为返回整个 JSON 数据,将 `records` 属性设置为返回 JSON 数组的长度,而其他属性则按默认值设置即可。
在 `treeReader` 中,我们使用了 `parent_id_field`、`level_field`、`leaf_field` 和 `expanded_field` 来指定树形结构中每个节点的父节点 ID、层级、是否为叶子节点和是否展开。这些属性的值需要在 JSON 数据中提供。
同时,我们还提供了一个名为 `data.json` 的本地 JSON 数据文件,其中包含了一个简单的树形结构数据。你可以根据需要修改该文件的内容。
阅读全文