JQgrid表格的使用 - 会飞的狼845
html部分：
<div class=”tab”>
<table id=”datatable”></table>
<div id=”pager2″></div>
</div>
js部分：
$(document).ready(function(){
var tableWidth = $(“#datatable”).parent().innerWidth();
$(“#datatable”).jqGrid({
url:\’${basePath}/boxController/list\’,
datatype: “json”,
mtype: “POST”,
width: tableWidth,
height: 350,
autowidth:true,
editable: true,
shrinkToFit:true,
colNames:[\’\’,\’柜号\’,\’箱编号\’,\’\’,\’箱类型\’,\’箱门名称\’,\’一箱多卡\’,\’固定箱门\’,\’物品状态\’,\’开关状态\’,\’箱门状态\’,\’操作\’],
colModel:[
{name:”terminalid”,index:”terminalid”,align:\’center\’,width:90,sortable:false,hidden:true},
{name:”displayname”,index:”displayname”,align:\’center\’,width:90,sortable:false},
{name:”boxid”,index:\’boxid\’,align:\’left\’,width:100,sortable:false},
{name:”boxtypecode”,index:”boxtypecode”,align:\’center\’,width:50,sortable:false,hidden:true},
{name:”boxtypename”,index:”boxtypename”,align:\’center\’,width:50,sortable:false,hidden:false},
{name:”dispalyname”,index:”dispalyname”,frozen:true,align:\’left\’,width:90,sortable:false},
{name:”oneboxmorecard”,index:”oneboxmorecard”,align:\’center\’,width:90,sortable:false,formatter:function(el,options,rowData){
if(el==1){return \’是\’;}else{return \’否\’;}
}},
{name:”fixedbox”,index:\’fixedbox\’,align:\’center\’,width:80,sortable:false,formatter:function(el,options,rowData){
if(el==0){return \’不限制\’;}else if(el==1){return \’一箱一卡\’;}else{return \’其他限制\’;}
}},
{name:”article”,index:\’article\’,align:\’center\’,width:70,sortable:false,formatter:function(el,options,rowData){
if(el==0){return “正常”;}else if(el==1){return “锁定”;}else{return “故障”;}
}},
{name:”open”,index:\’open\’,align:\’center\’,width:100,sortable:false,formatter:function(el,options,rowData){
if(el==0){return “开启”;}else if(el==1){return “关闭”;}else{return “故障”;}
}},
{name:”status”,index:”status”,align:\’center\’,width:90,sortable:false,formatter:function(el,options,rowData){
if(el==0){return “正常”;}else if(el==1){return “锁定”;}else{return “故障”;}
}},
{name:””,index:\’\’,align:\’center\’,width:70,formatter:function(el,options,rowData){
var d= \'<input type=”button” value=”删除” onclick=”delRepository(\\’\’+rowData.terminalid+\’\\’,\\’\’+rowData.boxid+\’\\’)” style=”width:30px;float:right;margin-right:5px;”/>\’;
var u= \'<input type=”button” value=”修改” onclick=”addMakeCard(\\’修改类型\\’,\\’修改\\’,\’+ options.rowId +\’)” style=”width:30px;float:right;margin-right:10px;”/>\’;
return u+d;
}}
],
sortable: false,
rowNum:10,
rownumbers:false,
multiselect: true,
jsonReader: {
repeatitems : false,
id:”0″
},
pager: \’#pager2\’,
rowList:[10,15,20],
toppager:true,
sortname: \’rechargenumber\’,
sortorder: \’desc\’,
viewrecords: true,
ondblClickRow:function(rowid){
RowData= jQuery(this).jqGrid(“getRowData”, rowid);
if(RowData.terminalid){
list(\’查看\’,RowData.terminalid); //双击查看方法
}
},
});
$(“#datatable”).jqGrid(“navGrid”, “#pager2”, {
cloneToTop:true,// 克隆页面底层按钮到表顶端
search:false,//隐藏查询按钮
edit:false,//隐藏编辑按钮
searchfunc:openDialog4Searching,
searchtext:”查询”,
addfunc : openDialog4Adding, // (1) 点击添加按钮，则调用openDialog4Adding方法
addtext:”新增”,
editfunc : openDialog4Updating, // (2) 点击添加按钮，则调用openDialog4Updating方法
edittext:”修改”,
delfunc : openDialog4Deleting, // (3) 点击添加按钮，则调用openDialog4Deleting方法
deltext:”删除”,
alerttext : “请选择需要操作的数据行!” // (4) 当未选中任何行而点击编辑、删除、查看按钮时，弹出的提示信息
});
});
var openDialog4Adding = function(title,okValue,row) {};
var openDialog4Updating= function(title,okValue,row) {}
var openDialog4Deleting= function(title,okValue,row) {
var col=$(“#datatable”).jqGrid(\’getRowData\’,row);//获取单行数据
var ids = $(“#datatable”).jqGrid(“getGridParam”, “selarrrow”);//获取多行数据
}
var openDialog4Searching = function(title,okValue,row) {}