注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

_

_

 
 
 

日志

 
 

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

2015-01-29 05:02:03|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
jqGrid 笔记 获取rowData colModel 不同类型字段 不同查询 定制cell 模板 横向卷轴
    博客分类:
  • js

jsonPHPBlog.netHTML

定制cell 模板

写一个自定义的format

Java代码 复制代码 收藏代码jqGrid 笔记 获取rowData colModel 不同类型字段 不同查询 定制cell 模板 横向卷轴 - redtea - _

  1. $("div.returnValue").live('click',function(){?
  2. ??? alert($(this).attr("rel"));?
  3. });?
  4. function custFormat( cellvalue, options, rowObject ){?
  5. return '<div style="color:red;" class="returnValue" rel="'+options.rowId+'">'+cellvalue+' </>';?
  6. }?
  7. function custUnFormat( cellvalue, options, cell){?
  8. return $('div').html();?
  9. }?
        $("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();
        }

Java代码 复制代码 收藏代码jqGrid 笔记 获取rowData colModel 不同类型字段 不同查询 定制cell 模板 横向卷轴 - redtea - _

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

添加按钮

定义col的时候预留一个col

Java代码 复制代码 收藏代码jqGrid 笔记 获取rowData colModel 不同类型字段 不同查询 定制cell 模板 横向卷轴 - redtea - _

  1. ?????????????? colNames:['Action',....'],?
  2. ??????????????? colModel:[?
  3. ??????????????????????? {name:'act',index:'act', width:60,},?
  4. ??????????????????????? ..........?
?????????????? colNames:['Action',....'],???????????????? colModel:[
                        {name:'act',index:'act', width:60,},
                        ..........

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

Java代码 复制代码 收藏代码jqGrid 笔记 获取rowData colModel 不同类型字段 不同查询 定制cell 模板 横向卷轴 - redtea - _

  1. gridComplete: function(){?
  2. ??? var ids = jQuery("#gridTable").jqGrid('getDataIDs');?
  3. for(var i=0;i < ids.length;i++){?
  4. ??????? var cl = ids[i];?
  5. ????????? be = "<input style='height:22px;width:60px;' type='button' value='return' onclick=\"alert('"+cl+"');\"? />";??
  6. ????????? jQuery("#gridTable").jqGrid('setRowData',ids[i],{act:be});?
  7. ??? }????
  8. },?
                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了后? 发现要这么写

Java代码 复制代码 收藏代码jqGrid 笔记 获取rowData colModel 不同类型字段 不同查询 定制cell 模板 横向卷轴 - redtea - _

  1. postData:{?
  2. ??? firstRowid:function() { return $("#firstRowid").val(); },?
  3. ?? lastRowid:function() { return $("#lastRowid").val(); },?
  4. ?? currentPage:function() { return $("#currentPage").val(); },?
  5. },?
        postData:{
            firstRowid:function() { return $("#firstRowid").val(); },
           lastRowid:function() { return $("#lastRowid").val(); },
           currentPage:function() { return $("#currentPage").val(); },
        },

注意逗号要和我的一样多

my code

Java代码 复制代码 收藏代码jqGrid 笔记 获取rowData colModel 不同类型字段 不同查询 定制cell 模板 横向卷轴 - redtea - _

  1. <table id="users" style="font-size:11px;font-family:Calibri,Tahoma;"></table>?
  2. $("#users").jqGrid({?
  3. ??????? url:'search',?
  4. ??????? datatype: "json",?
  5. ??????? colNames:[?
  6. ?????? ........?
  7. }?
<table id="users" style="font-size:11px;font-family:Calibri,Tahoma;"></table>

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

       ........

}

Java代码 复制代码 收藏代码jqGrid 笔记 获取rowData colModel 不同类型字段 不同查询 定制cell 模板 横向卷轴 - redtea - _

  1. ondblClickRow: function(id){??
  2. ??????????? var row=$("#users").getRowData(id);? //根据ID拿到一行的数据
  3. ????????????? $("#Select").val(row.rowName);?
  4. ????????????? $.fn.colorbox.close();?
  5. ??????????? }?
ondblClickRow: function(id){ 
            var row=$("#users").getRowData(id);  //根据ID拿到一行的数据
              $("#Select").val(row.rowName);
              $.fn.colorbox.close();
            }

Java代码 复制代码 收藏代码jqGrid 笔记 获取rowData colModel 不同类型字段 不同查询 定制cell 模板 横向卷轴 - redtea - _

  1. colModel:[?
  2. ?????????? {name:'id',index:'id',width:40,sortable:true,hidden:true},?
  3. ?????????? {name:'rowName',index:'indexName',width:105,sortable:true},?
 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
);
  评论这张
 
阅读(376)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017