`

jqGrid 笔记 获取rowData colModel 不同类型字段 不同查询 定制cell 模板 横向卷轴

    博客分类:
  • js
阅读更多

定制cell 模板

写一个自定义的format

 

        $("div.returnValue").live('click',function(){
            alert($(this).attr("rel"));
        });

        function custFormat( cellvalue, options, rowObject ){
            return '<div style="color:red;" class="returnValue" rel="'+options.rowId+'">'+cellvalue+' </>';
        }
        function custUnFormat( cellvalue, options, cell){
            return $('div').html();
        }
 

 

colModel:[
                        {name:'act',index:'act', width:60,},
                        {name:'id',index:'id', width:60, sorttype:"int",formatter:custFormat, unformat:custUnFormat},

 

 

 

添加按钮

定义col的时候预留一个col

 

               colNames:['Action',....'],
                colModel:[
                        {name:'act',index:'act', width:60,},
                        ..........

 加载完grid的时候再去填充这个col

 

                gridComplete: function(){
                    var ids = jQuery("#gridTable").jqGrid('getDataIDs');
                    for(var i=0;i < ids.length;i++){
                        var cl = ids[i];
                          be = "<input style='height:22px;width:60px;' type='button' value='return' onclick=\"alert('"+cl+"');\"  />"; 
                          jQuery("#gridTable").jqGrid('setRowData',ids[i],{act:be});
                    }   
                },
 

 

 

横向卷轴

设置各行的宽度, 不要设grid的宽度

然后配置

 

                loadComplete:function(data){

                   jQuery("#gridTable").setGridWidth(850,false);

                },

 

 

 

 

 

查询分页的时候postData  传参数不上服务器

后来google了后  发现要这么写

 

 

        postData:{
            firstRowid:function() { return $("#firstRowid").val(); },
           lastRowid:function() { return $("#lastRowid").val(); },
           currentPage:function() { return $("#currentPage").val(); },
        },
 

注意逗号要和我的一样多

 

 

 

 

my code

 

<table id="users" style="font-size:11px;font-family:Calibri,Tahoma;"></table>

$("#users").jqGrid({
        url:'search',
        datatype: "json",
        colNames:[

       ........

}
ondblClickRow: function(id){ 
            var row=$("#users").getRowData(id);  //根据ID拿到一行的数据
              $("#Select").val(row.rowName);
              $.fn.colorbox.close();
            }
 colModel:[
            {name:'id',index:'id',width:40,sortable:true,hidden:true},
            {name:'rowName',index:'indexName',width:105,sortable:true},
 

 

colModel

中 name是js端用来获取rowData的值时用的

index是传到服务器端用来做 searchField ,  sidx (orderby 的字段)

 

和extjs不同的是 服务器传过来的json数据,他是按顺序一个一个填充到列里去的,服务器上的json属性名和colModel中的不一样也可以

{name:'invdate',index:'invdate', width:90, jsonmap:"invdate"},这个jsonmap才是做映射的

 

指定查询  可以进行的操作, 不同类型字段 不同查询

{name:'email',index:'email',width:160,sortable:true,searchoptions:{sopt:['eq','ne','cn','nc']}}

{name:'cellphone',index:'cellphone',width:90,sortable:true,searchoptions:{sopt:['eq','ne','lt','le','gt','ge']}},

 

 

http://www.trirand.com/blog/jqgrid/jqgrid.html

http://www.secondpersonplural.ca/jqgriddocs/index.htm

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:search_config

===============================================================

 

转:

 

http://blog.csdn.net/alfoo/archive/2010/03/30/5434022.aspx

1. 如何获取grid 选中的行的ID

var rowid = $("#searchResultList
").getGridParam("selrow
");

2. 如何在表格中动态增加一行数据?

//$("#jqgrid").addRowData(rowId, data, pos, idx);

//pos可以为[first,last,before,after],为后两者是需要指定相对的行ID

$("#jqgrid
").addRowData("1
", {"name
":"test
","age
":12}, "first
");

3. 如何动态修改某行的数据内容,如某几列的值?

//setRowData( rowid, data );

$("#jqgrid
").setRowData( "1
", { tax:"5
", total:"205
" });

4. jqgrid 的常用属性?

$("#jqgrid
").jqGrid({
	url:"${ctx}/sys/role/search.dm
",
	colNames:["角色名称
"],//,"角色代码"

	colModel:["roleName
"],//"roleCode"还可以用对象替换

	jsonReader:{id:"roleId
",root:"dataList
"},
	width:240,
	height:250,
	rowNum:20,//每页20条记录

	pager: "logListPager
",//分页显示的DIVID

	sortname: "actionTime
",//默认排序的列名

	sortorder: "desc
",//默认排序的顺序

	scroll
:true
,//鼠标滚动翻页

	onSelectRow: function
(rowid) {}
});

5. 获取某一行的数据对象?

var
 rowid = $("#searchResultList
").getGridParam("selrow
");
var
 rowData = $("#searchResultList
").getRowData(rowid);

6. 如何使用API 动态修改选中的行?

//true:重新加载表格数据, false:不重新加载表格数据

$("#jqGrid
").setSelection("1
", true
);
分享到:
评论

相关推荐

    jQuery插件jqGrid动态获取列和列字段的方法

    本文实例讲述了jQuery插件jqGrid动态获取列和列字段的方法。分享给大家供大家参考,具体如下: 1、问题背景 jqGrid表格插件,利用自身方法获取表格的表头和表格字段;获取列名和列字段名显示在弹窗里,用复选框进行...

    获取jqGrid中选择的行的数据

    下面可以获取选择一行的id,如果你选择多行,那下面的id是最后选择的行的id: var id=$(‘#gridTable').jqGrid(‘getGridParam','selrow');...var rowData = $(“#gridTable”).jqGrid(‘getRowData',rowId);

    jqgrid colModel中文配置文档

    这份文档主要描述的是jqgrid中colModel的属性配置!

    jqGrid手册教程一本通

    jqGrid 学习 自定义格式化类型 19 jqGrid 学习 格式化 21 jqGrid 学习 自定义按钮 26 jqGrid 学习 翻页(2) 28 jqGrid 学习 翻页 33 jqGrid 学习 配置 json 35 jqGrid 学习 方法 37 jqGrid 学习 事件 45 jqGrid ...

    jqGrid Wiki部分文档说明

    wiki_options - jqGrid Wiki wiki_colmodel_options - jqGrid Wiki wiki_methods - jqGrid Wiki wiki_events - jqGrid Wiki 4个pdf文件

    jqGrid使用笔记.docx

    jqGrid使用笔记.docx

    jqGrid模板

    jqGrid模板 信息管理系统后台模板 采用jqGrid第三方UI插件

    关于jqGrid中查询功能

    jqGrid 按多个条件 或单个条件进行查询

    jqGrid4.6.0 jqgrid_demo40

    jquery.jqGrid-4.6.0(jquery表格插件).zip----------jqGrid4.6.0包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件.rar-----------经我修改过的demo40,官网上面demo40下载...

    jqGrid 离线帮助手册

    jqGrid 最新版 3.7.2 离线帮助手册,方便各位查看 Installing jqGrid Before you begin System Requirements Download jqGrid Change Log How to Install How it Works My First Grid Basic Grid Conventions ...

    jqGrid_各种参数_详解

    jqGrid_各种参数_详解

    jqgrid序列

    jqgrid

    jqGrid 离线帮助手册 来源官方wiki

    jqGrid 3.7.2 版本 官方完整帮助手册,含有很多代码样例,方便大家查看学习。 Upgrading Upgrade from 3.6.4 to 3.6.5 Upgrade from 3.4.x to 3.5 Installing jqGrid Before you begin System Requirements Download...

    jqGrid属性中文详细说明

    jqGrid属性中文详细说明 jqGrid属性中文详细说明

    jqGrid4.8.2 jqgrid_demo40

    jquery.jqGrid-4.8.2(jquery表格插件).zip----------jqGrid4.8.2包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件. jqgrid_3.6.5_API_en.chm------附加放在这里的其它资料...

    jqgrid中文文档API

    jqgrid中文文档API,使用JQGRID

    JqGrid插件+JqGridDemo+JqGrid主题

    JqGrid插件+JqGridDemo+JqGrid主题,自己项目里引入的文件

    jqGrid学习笔记1 - - - - jqGrid英语PDF文档

    NULL 博文链接:https://only-xxp.iteye.com/blog/768029

    jqgrid学习笔记

    学习jqgrid自己整理的一些笔记,希望对大家有所帮助

Global site tag (gtag.js) - Google Analytics