jqgrid 初始化不需要加载数据
时间: 2023-07-31 15:04:08 浏览: 116
是的,jqGrid的初始化不需要加载数据。在jqGrid的初始化中,可以设置表格的基本属性,如列名、列宽、排序方式等。数据可以在后续的操作中通过ajax请求或其他方式加载。示例代码如下:
```
$("#grid").jqGrid({
url: 'url',
datatype: 'json',
colNames:['Column 1', 'Column 2', 'Column 3'],
colModel:[
{name:'col1', index:'col1', width:100},
{name:'col2', index:'col2', width:100},
{name:'col3', index:'col3', width:100}
],
rowNum:10,
rowList:[10,20,30],
pager: '#pager',
sortname: 'col1',
viewrecords: true,
sortorder: "desc",
caption:"My first grid"
});
```
在上面的代码中,我们设置了表格的基本属性,但是没有加载任何数据。数据可以通过url参数指定远程请求的地址,也可以在后续的操作中通过ajax请求或其他方式加载。
相关问题
jqgrid 初始化设置url 但是不需要加载数据,等待调用reloadGrid 才加载数据
可以在初始化jqGrid时指定`url`参数,并将`datatype`参数设置为`local`。这将使jqGrid不会在初始化时从服务器上加载数据。然后,在需要加载数据时,可以调用`reloadGrid`方法从服务器上获取数据并刷新表格。
示例代码如下:
```
$("#grid").jqGrid({
url: 'url',
datatype: 'local',
colNames:['Column 1', 'Column 2', 'Column 3'],
colModel:[
{name:'col1', index:'col1', width:100},
{name:'col2', index:'col2', width:100},
{name:'col3', index:'col3', width:100}
],
rowNum:10,
rowList:[10,20,30],
pager: '#pager',
sortname: 'col1',
viewrecords: true,
sortorder: "desc",
caption:"My first grid"
});
// 当需要加载数据时,调用reloadGrid方法
$("#grid").jqGrid("setGridParam", {url: 'new_url'}).trigger("reloadGrid");
```
在上面的代码中,我们将`url`设置为需要获取数据的地址,但是将`datatype`设置为`local`,这将使表格不会在初始化时从服务器上加载数据。然后,在需要加载数据时,我们调用`reloadGrid`方法,并设置`url`参数为需要获取数据的地址,以重新加载并刷新表格。
jqgrid实时动态初始化列表内的下拉框
### 实现 JqGrid 中实时动态初始化列表内下拉框
为了实现 JqGrid 列表中的下拉框能够根据实际需求动态加载数据,通常会采用 AJAX 请求来获取最新的选项并填充到下拉菜单中。下面介绍一种常见做法:
#### 使用 `edittype` 和 `formatter`
通过设置列定义中的 `edittype` 属性为 `'select'` 可以指定该列为下拉选择框,并利用 `dataUrl` 或者直接提供 JSON 数据作为源。
对于更复杂的场景,比如需要每次编辑记录时都重新请求最新数据,则可以在 `beforeEditCell` 事件触发时执行异步调用来更新特定单元格的选择项[^1]。
```javascript
$("#list").jqGrid({
url:'example.php',
datatype: "json",
colModel:[
{name:'id',index:'id', width:55},
{
name:'status',
index:'status',
editable:true,
edittype:"select",
formatter:'select',
dataUrl:'/get-status-options'
}
],
});
```
此配置使得当用户点击进入编辑模式时,状态字段将会显示由 `/get-status-options` 接口返回的数据构成的下拉列表[^2]。
如果希望进一步优化用户体验,在首次加载页面时不预先加载所有可能的状态值而是仅在必要时候才发起网络请求的话,可以通过监听 `onSelectRow` 或其他合适的时机手动刷新对应行次的内容[^3]。
```javascript
// 假设我们有一个方法可以从服务端取得某一行对应的下拉框选项
function reloadDropdownOptions(rowId){
$.getJSON('/dynamic-dropdown-data?rowId='+ rowId , function(data) {
var sel = $("#" + grid_selector).getCell(rowId,'columnName');
$(sel).html('');
$.each(data,function(i,item){
$("<option/>").val(item.id).text(item.text).appendTo(sel);
});
});
}
```
上述代码片段展示了如何针对选定行单独处理其内部某个具体位置上的可选条目集合。这不仅提高了性能还减少了不必要的资源消耗。
阅读全文
相关推荐
















