jqgrid 的一些操作 动态增加列 用本地 数据 修改表格

 

1 jqGrid动态增加列,

 

 

目前还没有这样的方法

只能先卸载Grid再进行重绘,才能达到改变列的目的。

 

 

jQuery('#grid1').GridUnload();
 

 

用这个方法 卸载jqgrid

 

然后重新设置吧

 

 

jQuery('#grid1').jqGrid({
    colNames:...,
    colModel:...,
    ...
});
 

 

 

2 用本地 数据 修改表格

这个必须先把数据类型改成local

 

$('#lgrid-1').jqGrid().clearGridData();

$('grid-1').jqGrid('setGridParam', 
{  datatype:local,
    rowNum:data.length,
    data:data
}
).trigger('reloadGrid', [{page:1}]);  
 

 

 

一旦用本地数据 分页功能就不好用了,因为不会再去查后台了

 

3 修改多条 同时提交后台

 

var savedRow = null;
var savedCol = null;
// 修正
$('#lgrid-3').setGridParam({
      beforeEditCell : function(rowid, cellname, value, iRow, iCol) {
            // 记录修改的表格
            savedRow = iRow;
            savedCol = iCol;
                 }
});
// 向后台发送数据前 保存表格的修改
if (savedRow && savedCol) {
           jQuery('#grid-3').jqGrid('saveCell', savedRow, savedCol);
}
// 取得表格的数据 全部
var data = $('#grid-3').jqGrid().getRowData();

 

 

 

 

4 隐藏列

  jQuery('#grid_id').hideCol('somecol').trigger('reloadGrid');  
            显示用 showCol

    

 

 

 

 

 

5 可以多选的情况下 默认选中

 

$('#list').jqGrid().setSelection(1);
 

 

如果已经被选中 则是 反选

 

6 数据绑定前检查

ajaxGridOptions:   
        {dataFilter:    
            function(data,dataType){    // preprocess the data
                if ( $(data).find("code").text() == 'problem' ) {   // check for an error in the result
                    $("#list").jqGrid('GridUnload');
                    $("#errormsg").text( $(data).find("description").text() );
                }else{
                    return data;
                }
            }
        }
 

 

 

 


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是基于 jqGrid 4.15.5 版本的动态设置筛选集合数据的示例代码及注释: ```javascript // 定义 jqGrid 表格 $("#grid").jqGrid({ url: "data.json", // 数据源 URL datatype: "json", // 数据类型 colModel: [ {name: "id", label: "ID", width: 50}, {name: "name", label: "姓名", width: 100}, {name: "gender", label: "性别", width: 80, stype: "select", searchoptions: {value: ":All;男:男;女:女"}}, // "stype" 表示该的筛选类型,"searchoptions" 表示该的筛选选项 {name: "hobby", label: "爱好", width: 150, stype: "select", searchoptions: {value: ":All"}}, // "stype" 表示该的筛选类型,"searchoptions" 表示该的筛选选项 {name: "age", label: "年龄", width: 80, stype: "integer", searchoptions: {sopt: ["eq", "ne", "lt", "le", "gt", "ge"]}}, // "sopt" 表示该的筛选操作符 {name: "email", label: "邮箱", width: 150}, {name: "address", label: "地址", width: 300} ], rowNum: 10, // 每页行数 rowList: [10, 20, 30], // 每页行数选项 pager: "#pager", // 分页控件 ID sortname: "id", // 默认排序名 sortorder: "asc", // 默认排序方式 viewrecords: true, // 是否显示总记录数 caption: "示例表格" // 表格标题 }); // 动态设置 "hobby" 的筛选选项 $.ajax({ url: "hobby.json", // 筛选选项数据源 URL dataType: "json", success: function (data) { var options = {}; $.each(data, function (i, item) { options[item.id] = item.name; }); $("#grid").setColProp("hobby", { searchoptions: { value: ":All;" + options // 将集合数据转换为字符串形式 } }); } }); ``` 注释中已经说明了每一部分的作用,简单总结一下: 1. 定义 jqGrid 表格,其中 "hobby" 的 "stype" 设置为 "select",表示该的筛选类型为下拉框,"searchoptions" 设置了该的筛选选项,下拉框的选项值暂时设置为 ":All",待后续动态设置。 2. 通过 Ajax 请求获取筛选选项数据源,并将集合数据转换为字符串形式(格式为 "value1:text1;value2:text2;..."),然后动态设置 "hobby" 的筛选选项。 希望这个示例能够帮到你,如果还有不清楚的地方,可以继续提问哦!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值