jqgrid应用详解

var engineTypeMarkTab;
var engineTypeMarkDiv;
function load()
{
engineTypeMarkDiv = "#engineTypeMarkTable_pager";
engineTypeMarkTab=$("#engineTypeMarkTable");
engineTypeMarkTab.jqGrid({
//表格名称
caption:"发动机标志配置",
// 服务器返回的数据类型，常用的是xml和json两种
datatype : "json",
url : rootPath + "/common/jqgrid-getdatas.action",
// 发送的类型
mtype : "POST",
// 表格的宽度
width : getWindowWidth()-50,
// 表格的高度
height : "303",
// 表头显示的列名称
colNames : ["主键序号", "发动机类型","标志标准","标志类型","操作"],
colModel : [// 具体的列属性，name必须有。index属性设置鼠标点击相应的表头的时候，排序的字段。这里还可以设置列是否可见，是否可编辑.....
{
name : "pkid",index : "pkid",sortable : true,
align : "center",
editable : false,
hidden:true
},{
name : "name",
index : "name",
width : "200",
sortable : true,
align : "center",
edittype : "text",
editable : true,
formatter:function(cellvalue,options,row){if(cellvalue=="null"){return "--"}else{return cellvalue}}
},{
name : "markStandard",
index : "markStandard",
width : "200",
sortable : true,
align : "center",
edittype : "text",
editable : true,
formatter:function(cellvalue,options,row){if(cellvalue=="null"){return "--"}else{return cellvalue}}
},{
name : "markType",
index : "markType",
width : "180",
sortable : true,
align : "center",
edittype : "text",
editable : true,
formatter:function(cellvalue,options,row){if(cellvalue=="null"){return "--"}else{return cellvalue}}
},{
name : "handle",
index : "handle",
width : "113",
sortable : true,
align : "center",
edittype : "text",
editable : true
}],
//翻页用的导航栏在哪个层上显示
pager : engineTypeMarkDiv,
//下拉列表定义每页显示记录条数
rowList : [13,26,39],
// 默认的每页显示记录条数
rowNum : 13,
// 定义是否在导航条上显示总的记录数
viewrecords : true,
//加载完成事件
gridComplete:function(){
//得到表格中数据总条数
var ids=engineTypeMarkTab.jqGrid("getDataIDs");
//循环加入最后一列超链接
for(var i in ids)
{
var pkid=engineTypeMarkTab.getCell(ids[i],"pkid");
engineTypeMarkTab.jqGrid("setCell",ids[i],"handle","<a href='engineTypeMarkCollocate1.jsp?pkid="+pkid+"'>修改</a>/<a href='#' οnclick='del("+ids[i]+")'>删除</a>");
}
},
//背景是否为斑马线
altRows : "true",
// 当返回的数据位0时显示的信息，只有当属性 viewrecords 设置为true时起作用
emptyrecords : "没有查询到数据！",
// 增加序号列
rownumbers : true,
postData : {
tableName : "BAS_MAR_EngineTypeCollocate a left join COD_EngineType b on(a.engineTypeDM=b.code)",
fields:"a.pkid,b.name,a.markStandard,a.markType",
addWhere : "b.flag='1'"
}
});
engineTypeMarkTab.jqGrid("navGrid",engineTypeMarkDiv,{add:false,edit:false,del:false,refresh:false,search:false}
).navButtonAdd(engineTypeMarkDiv,
{
caption:"增加",
buttonicon:"ui-icon-plus",
onClickButton: add,
position:""
});
$(window).resize(function(){engineTypeMarkTab.setGridWidth(getWindowWidth()-50,true);});
}

//删除指定的记录
function del(id)
{
if(confirm("确定要删除吗？"))
{
//提交后台，删除数据库记录
$.ajax({
url:rootPath+"/BaseMark/engineTypeMark!delete.action",
data:{pkid:engineTypeMarkTab.getCell(id,"pkid")},
async:false,
type:"post",
dataType:"json",
success:function(){
//删除成功后删除jqGrid显示的记录
engineTypeMarkTab.jqGrid("delRowData",id);
alert("删除成功！");
},
error:function(){alert("删除数据时出现错误！");}
});
}
}

function add()
{
location.replace("engineTypeMarkCollocate2.jsp");
}