JqGrid使用

JqGrid介绍：

用jQuery编写，用于以表格形式来显示数据，支持后台数据传输，支持对数据处理。

用于显示数据的showList.jsp页面：

<table id="list"></table>
<div id="pager"></div>

其中

<table id="list"></table>用于显示数据，

<div id="pager"></div>用于显示分页信息、数据操作信息等。

showList.jsp页面对应的showList.js代码：

$(function(){
    jQuery("#list").jqGrid(
            {
                url : 'index.do?method=getPageList',
                datatype : "json",
                colNames : [ 'Help Category Id', 'Name', 'Parent Category Id', 'Url' ],
                colModel : [ {name : 'help_category_id', index : 'help_category_id'}, 
                             {name : 'parent_category_id', index : 'parent_category_id'}, 
                             {name : 'name', index : 'name'}, 
                             {name : 'url', index : 'url'}],
                rowNum : 10,
                rowList : [ 10, 20, 30 ],
                pager : '#pager',
                sortname : 'help_category_id',
                viewrecords : true,
                sortorder : "desc",
                caption : "JSON Example",
                multiselect: true
            });
    
    var alertText = "<div>请选择!</div>";  
    
    $("#list").jqGrid("navGrid", "#pager", {  
        addfunc : openDialogAdding,    
        editfunc : openDialogUpdating, 
        delfunc : openDialogDeleting,  
        alerttext : alertText    
    },{},{},{},{     
        caption: "查找",  
        Find: "Let's go!",  
        multipleSearch: true,  
        groupOps: [{ op: "AND", text: "全部" }],  
    },{});   
    
});

var openDialogAdding = function() {  
    var rowid = null;
    window.open ('index.do?method=showAddView');
    $("#list").trigger("reloadGrid");
}
var openDialogUpdating = function(rowid) {
    alert(rowid);
    var id = SelectedRowData(rowid);
    window.open ('index.do?method=showUpdateView&id='+id);
    $("#list").trigger("reloadGrid");
}  
var openDialogDeleting = function(rowid) {
    alert(rowid);
    loadSelectedRowData(rowid,'del');  
    var id = SelectedRowData(rowid);
    var params = {  
            "id" : id  
        };
    var actionUrl = 'index.do?method=showUpdateView';
    refesh(actionUrl, params)
}  

var SelectedRowData = function(selectedRowId){
    if(selectedRowId!=null){
        var rowData = $("#list").getRowData(selectedRowId);
    }
    return rowData.help_category_id;
}


var refesh = function(actionUrl, params){
    $.ajax( {  
        url : actionUrl,  
        data : params,  
        dataType : "json",  
        cache : false,  
        success : function(data) {  
            // 如果读取结果成功，则将信息载入到对话框中 
            if(data.success == "ok"){
                alert("操作成功");
                $("#list").trigger("reloadGrid"); 
            }
            else{
                alert('操作失败');
            }
             
        }  
    });
}

jQuery("#list").jqGrid中的参数介绍：

 

url	为传送数据的后台地址
dataType	后台传送数据的数据类型
colNames	表格数据的第一行
colModel	表格数据
rolNum	默认一行显示多少个
rolList	让用户选择可以一行显示多少个
paper	分页信息在哪里显示
sortname	以哪一列进行排序
sortorder	排序规则
caption	表格数据的名字
multiselect	是否可以多选
addfunc	增加操作的js方法名
editfunc	修改操作的js方法名
delfunc	删除操作的js方法名
alerttext	操作出错时显示的信息

 

 

 

 

 

 

 

 

 

 

在colModel中name表示在网页中显示的名字，index表示后台传输数据的key。

SelectedRowData方法为获取选中的行数据。

后台提交数据的数据类型：

{"page":"1",

"total":"5",

"records":"54",

"rows":[{"id":1,"cell":[55,"XXXXXX",12,"XX"]},

{"id":2,"cell":[54,"XXXX",12,"XX"]},

{"id":3,"cell":[53,"XX",12,"XX"]},

{"id":4,"cell":[52,"bbbbb",12,"nvb"]},

{"id":5,"cell":[51,"fdsfd",12,"nvb"]},

{"id":6,"cell":[50,"djkfhkdshfjkds",12,"nvb"]},

{"id":7,"cell":[49,"fksdfkdsjf",12,"nvb"]},

{"id":8,"cell":[48,"dsfds",12,"nvb"]},

{"id":9,"cell":[47,"sfd",11,"dfsdf"]},

{"id":10,"cell":[46,"ddsf",25,"dsfds"]}]}

其中page为当前的页数，total为总页数，records为数据总数，rows为具体数据。

其中rows中有两部分组成，id为数据在页面的行号，cell为数据信息。

显示结果：