jqGrid使用笔记.

一.基本使用：

1)放置表格和分页的html。

 <table id="search_member_table">            </table>            <div id="pager1"></div>

2) 在页面加载完成后，调用绑定jqGrid表格代码.

function BindGrid(requestUrl) {            $("#search_member_table").jqGrid({                url: requestUrl,                datatype: "json",                cache: false,                mtype: "GET",                colNames: ["GMPI", "Last Name", "First Name", "MI", "Birth Date", "MemberID", "Market", "Eligible", "MemberId"],                colModel: [                    { name: 'GMPI', index: "GMPI" },                    { name: 'LastName', index: "LastName" },                    { name: 'FirstName', index: "FirstName" },                    { name: 'MiddleName', index: "MiddleName", align: "center" },                    { name: 'Birthdate', index: "Birthdate", datefmt: 'MM/dd/yyyy', align: "center" },                    { name: 'MemberEligibility.MemberInsuranceCompany.CompanyId', index: "MemberEligibility.MemberInsuranceCompany.CompanyId" },                    { name: 'Market.Market', index: "Market.Market" },                    { name: 'MemberEligibility.IsEligibility', index: "MemberEligibility.IsEligibility", formatter: customFmatter, align: "center" },                    { name: "MemberId", index: "MemberId", hidden: true }                ],                rowNum: 10,                autowidth: true,                height: "100%",                rowList: [5, 10, 25, 50, 100, 9999],                pager: jQuery('#pager1'),                sortname: "DateUsed", //default primary key id                sortorder: "desc",                loadonce: false,                viewrecords: true, //default false,number of pages and records are hidden, set true to show                jsonReader: {                    root: "Records", //Get json array data's root property                    page: "PageIndex", //current page                    total: "PageCount", //total page count                    records: "RecordCount", //total records count                    repeatitems: false, //if format like rows : [ [id:"1", cell:["cell11", "cell12", "cell13"]],...],need set true                    cell: "", //defualt "cell",key:value's format set ""                    id: "MemberEligibility.EligibilityId"//primary key                }            }).navGrid('#pager1', { edit: false, add: false, del: false });        }

3)colModel中格式表格数据显示的值. 

a.内置时间格式转换: datefmt: 'MM/dd/yyyy'

b.formatter属性设置一个自定义函数转换：

    function customFmatter(cellvalue, options, rowObject){            return cellvalue == true ? "Y" : "N";    }

二：高级篇：

1）.行点击事件，onSelectRow放置在$("#search_member_table").jqGrid({});属性中。

要点：

a. 获取行对象$("#search_member_table").jqGrid("getRowData", id);   

b.获取行对象的值,对象嵌套的话，用数组形式作为索引：jsonObj["MemberEligibility.MemberInsuranceCompany.CompanyId"] };

 onSelectRow: function (id) {                    var jsonObj = $("#search_member_table").jqGrid("getRowData", id);                    if (jsonObj != null) {                        var postdatas = { "mbrEligKey": id, "GMPI": jsonObj.GMPI, "LastName": jsonObj.LastName, "FirstName": jsonObj.FirstName, "MiddleName": jsonObj.MiddleName, "MemberId": jsonObj.MemberId, "Birthdate": jsonObj.Birthdate, "InsuranceCompanyId": jsonObj["MemberEligibility.MemberInsuranceCompany.CompanyId"] };                        SaveSelectedMember(postdatas);                    }                },

2) 行中设置某一列，点击事件；添加 编辑、删除等操作列 ,在gridComplete对象中设置：

//bind Role    function BindNewsGrid(requestUrl) {        $("#tbl_grid").jqGrid({            url: requestUrl,            datatype: "json",            mtype: "GET",            colNames: ["RoleId", "Role Name", "Role Desc", "Role Code", "Delete", "Edit", "Assign Menu"],            colModel: [                { name: 'RoleId', index: "RoleId", width: 50, hidden: true },                { name: 'RoleName', index: "RoleName" },                { name: 'RoleDesc', index: "RoleDesc", width: 250 },                { name: 'RoleCode', index: "RoleCode" },                { name: 'Delete', index: 'RoleId', align: 'center', sortable: false, width: 60 },                { name: 'Edit', index: 'RoleId', align: "center", sortable: false, width: 60 },                { name: "AssignMenu", index: "AssignMenu", align: "center", width: 60 },            ],            gridComplete: function () {                var ids = jQuery("#tbl_grid").jqGrid('getDataIDs');                for (var i = 0; i < ids.length; i++) {                    var id = ids[i];                    var del = "<img src='/Images/icon_news_del.png' onclick='deleteRole(" + id + ")' style='cursor:pointer' title='' /> ";                    var edit = "<img src='/Images/icon_news_edit.png' onclick='editRole(" + id + ")' style='cursor:pointer' title='' /> ";                    var assignMenu = "<img src='/Images/icon_roleedit.png' onclick='assignMenu(\"" + id + "\")' style='cursor:pointer' title='' /> ";                    //don't allow assign when med info role.                    var jsonObj = $("#tbl_grid").jqGrid("getRowData", id);                    if (jsonObj != null && jsonObj.RoleCode == "MI") {                        assignMenu = "";                    }                    $("#tbl_grid").jqGrid('setRowData', ids[i], { Delete: del, Edit: edit, AssignMenu: assignMenu });                }            },            rowNum: 20,            height: "100%",            width: "975",            rowList: [5, 10, 15, 20],            pager: jQuery('#pager1'),            sortname: "RoleId", //default primary key id            loadonce: false,            viewrecords: true, //default false,number of pages and records are hidden, set true to show            jsonReader: {                root: "Records", //Get json array data's root property                page: "PageIndex", //current page                total: "PageCount", //total page count                records: "RecordCount", //total records count                repeatitems: false, //if format like rows : [ [id:"1", cell:["cell11", "cell12", "cell13"]],...],need set true                cell: "", //defualt "cell",key:value's format set ""                id: "RoleId"//primary key            }        }).navGrid('#pager1', { edit: false, add: false, del: false });    }    function deleteRole(id) {        if (!confirm("Are you sure to delete?")) {            return;        }        $.ajax({            url: '@Url.Action("DeleteRoleById")/?RoleId=' + id,            success: function () {                reloadGrid();            }        });    }    function editRole(id) {        ShowAddEdit();        $("#divAddEdit").html("<img src='/images/loading_circle.gif' />");        $("#divAddEdit").load("/Admin/UpdateRole?RoleId=" + id + "&refresh=" + new Date().getTime() + "");    }

3）刷新grid数据：

 function reloadGrid() {        var reqURL = "/Admin/GetRoleList";        jQuery("#tbl_grid").jqGrid('setGridParam', { url: reqURL }).trigger("reloadGrid");    }