jqGrid是一種用來顯示網格數據的jQuery插件，通過使用jqGrid可以輕松實現前端頁面與后臺數據的ajax異步通信。文檔比較全面，其官方網址為：http://www.trirand.com。效果如下圖所示：

創新互聯公司專業為企業提供瀘州網站建設、瀘州做網站、瀘州網站設計、瀘州網站制作等企業網站建設、網頁設計與制作、瀘州企業網站模板建站服務，10多年瀘州做網站經驗，不只是建網站，更提供有價值的思路和整體網絡服務。

js代碼如下：

function initData(p) {
    $("#customerMainList").jqGrid({
        url: "",
        datatype: "local",
        colNames: ['編號', '客戶姓名(跟進)', '類型', '添加人', '分配給', '期望區域', '期望小區', '期望面積', '戶型', '期望裝修', '期望樓層', '期望總價', '狀態', '添加時間', '操作'],
        colModel: [
   		{ name: 'Id', index: 'Id', formatter: tranCustId, width: 70, align: "center" },
   		{ name: 'CustName', index: 'CustName', formatter: transName, width: 98, align: "center" },
   		{ name: 'BusinessType', index: 'BusinessType', width: 60, align: "center" },
   		{ name: 'CreateUserName', index: 'CreateUserName', width: 55, align: "center" },
   		{ name: 'ExeUserName', index: 'ExeUserName', width: 65, align: "center" },
   		{ name: 'ExpArea', index: 'ExpArea', width: 70, align: "center" },
   		{ name: 'ExpSeqv', index: 'ExpSeqv', width: 77, align: "center" },
   		{ name: 'ExpAcre', index: 'ExpAcre', width: 70, align: "center" },
   		{ name: 'ExpShi', index: 'ExpShi', formatter: transHuX, width: 67, align: "center" },
   		{ name: 'ExpZhuangX', index: 'ExpZhuangX', width: 60, align: "center" },
   		{ name: 'ExpFloor', index: 'ExpFloor', width: 59, align: "center" },
   		{ name: 'ExpPriceT', index: 'ExpPriceT', formatter: transExpPrice, width: 59, align: "center" },
        { name: 'S2', index: 'S2', formatter: custStates, width: 53, align: "center" },
   		{ name: 'CreateDate', index: 'CreateDate', formatter: transDate, width: 65, align: "center" },
   		{ name: 'id', index: 'id', formatter: transOp, width: 74, align: "center" }

   	],
        rowNum: 20,
        hoverrows: true,
        rowList: [15, 20, 25, 30, 35, 40, 45, 50],
        pager: '#pager2',
        sortname: 'Id',
        viewrecords: true,
        sortorder: "desc",
        height: "100%", emptyrecords: "沒有記錄", forceFit: true, gridview: true, pginput: true,
        prmNames: { page: "page", rows: "rows", sort: "sidx", order: "sord", search: "_search", nd: "nd", npage: null },
        viewsortcols: [false, 'vertical', true],
        onSelectRow: function (rowid, status) {
            ShowCustomerDetail(rowid, true);
        }
    });
    $("#customerMainList").jqGrid('navGrid', '#pager2', { edit: false, add: false, del: false, refresh: false, search: false });
    refreshData(p);
}

設置jqGrid顯示的列，分頁等基本信息，需要注意的是colNames和colModel對應的字段信息要一致，onSelectRow事件表示的是行選中事件，在這里可以在選中行的同時彈出該記錄的詳情頁面。

function refreshData(p) {
    cust_p = p;
    $("input[type='button']").attr("disabled", true);
    var where = calcWhere();
    $("#customerMainList").jqGrid("setGridParam", {
        url: "xxxx.aspx" + where,    //設置表格的url
        datatype: "json", page: p
    }).trigger("reloadGrid");
    $("input[type='button']").attr("disabled", false);
    $(".ui-jqgrid-bdiv div").css("position", "");
}

設置jqGrid請求的url，參數等信息，返回的是json格式。.net論壇：http://bbs.netluntan.com，群：121058751

本文題目：jqGrid的用法詳解
文章鏈接：http://vcdvsql.cn/article40/jhigho.html

成都網站建設公司_創新互聯，為您提供網站設計、自適應網站、用戶體驗、營銷型網站建設、企業網站制作、服務器托管

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯