定制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' οnclick=\"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 );