jqgrid动态改变colModel属性

1 篇文章 0 订阅
今天开发的过程中遇到一个问题:jqgrid 第一次初始化完成后,有个操作需要重新去加载grid,并将某一列的显示改变。因为grid第一次加载的时候这一列是直接显示其值的,并没有去formatter它的显示,后面的操作需要为这一列formatter显示方式,所以怎么去动态的添加这一列的formatter配置就成了问题。
查jqgrid的api也没有发现很有效的方法,应该是有点粗心。从网上查了下,有网友分享了他的做法,自己实验了下是可以的。
他是这样做的:在重新加载之前,先调用——gridunload 这样一个方法。然后重新为colName和colModel设置属性值,重新加载就可以动态改变列了。原文在这里

贴上自己的代码:

第一次初始化

init:function(criteria){
 jQuery("#container").jqGrid(jQuery.extend(true,defaultOptions,{
 url: contextPath + "count/listing.do?"+new Date().getTime(),
 postData: {criteria:criteria},
 colName:['短信账号','短信密码','短信条数'],
 colModel:[{
 name: 'dxzh',index: 'dxzh',width: 100
 },{
 name: 'dxmm',index: 'dxmm',width: 100
 },{
 name: 'dxts',index, 'dxts',width: 100
 }],
 pager: 's4pager',
 caption: '短信统计'
 }));

}




重新请求,并为短信条数增加formatter属性

jQuery("#container").GridUnload();
  jQuery("#container").jqGrid(jQuery.extend(true,defaultOptions,{
    colModel:[{
                name: 'dxzh',index: 'dxzh',width: 100
               },{
                name: 'dxmm',index: 'dxmm',width: 100
               },{
                name: 'dxts',index, 'dxts',width: 100,formatter: dxtsFormatter
               }],
    pager: 's4pager',
    caption: '短信统计'
  }));
  jQuery('#container').trigger('reloadGrid');

打完收工。

其实还有一个更简单的方法,是在看GridUnload方法说明的时候发现的。http://www.cnblogs.com/jiewei915/archive/2012/08/09/2630617.html
这篇博文里面比较系统的解释了jqgrid的各种方法。
在这篇博文里GridUnload方法的下面发现了一个更好使的方法: setColProp,这个方法需要两个参数-- colname, properties, 设置新的属性,对于动态改变列属性是非常有用的,但是有些属性的修改并不会起效。用法:jQuery(”#grid_id”).setColProp('colname',{editoptions:{value:“True:False”}});
同样贴上自己的代码。

count: function(){
    jQuery("#container").setPostDateItem('criteria',newCriteria);
    jQuery("#container").setColProp('dxts',{index, 'dxts',width: 100,formatter: dxtsFormatter});
    jQuery("#container").trigger('reloadGrid');
}



搞定。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jqGrid 中,colModel 是用于定义表格列模型的属性之一,而 stype 属性则是 colModel 的一个子属性,用于定义表格列的编辑类型。常用的 stype 类型有以下几种: 1. text 表示文本框,用于输入文本信息。 ``` {name: "name", index: "name", width: 200, editable: true, edittype: "text", stype: "text"} ``` 2. select 表示下拉框,用于选择固定的选项。 ``` {name: "gender", index: "gender", width: 100, editable: true, edittype: "select", stype: "select", editoptions: {value: ":请选择;1:男;2:女"}} ``` 3. date 表示日期选择器,用于选择日期。 ``` {name: "birthday", index: "birthday", width: 100, editable: true, edittype: "text", stype: "date", searchoptions: {dataInit: function (el) { $(el).datepicker({dateFormat: "yy-mm-dd"}); }}} ``` 4. checkbox 表示复选框,用于选择一个或多个选项。 ``` {name: "hobby", index: "hobby", width: 200, editable: true, edittype: "checkbox", stype: "select", editoptions: {value: "篮球:篮球;足球:足球;乒乓球:乒乓球"}} ``` 5. textarea 表示多行文本框,用于输入多行文本信息。 ``` {name: "description", index: "description", width: 300, editable: true, edittype: "textarea", stype: "text"} ``` 6. custom 表示自定义类型,可以根据需求自定义编辑类型。 ``` {name: "price", index: "price", width: 100, editable: true, edittype: "text", stype: "custom", searchoptions: {sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: function (el) { $(el).spinner({min: 0, max: 1000}); }}} ``` 以上就是 jqGrid 中常用的 colModel.stype 类型,你可以根据需求选择不同的编辑类型来实现表格的功能。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值