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="http://www.mamicode.com/删除" onclick="delRepository(\‘‘+rowData.terminalid+‘\‘,\‘‘+rowData.boxid+‘\‘)" style="width:30px;float:right;margin-right:5px;"/>‘;
                        var u= ‘<input type="button" value="http://www.mamicode.com/修改" 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=http://www.mamicode.com/ 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) {}

JQgrid表格的使用