jqGrid的用法

发布时间：2020-12-16 00:18:25 所属栏目：百科来源：网络整理

导读：jqGrid是一种用来显示网格数据的jQuery插件，通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。文档比较全面，其官方网址为：http://www.trirand.com。效果如下图所示： js代码如下： function initData(p) { $("#customerMainList").jqGrid({

jqGrid是一种用来显示网格数据的jQuery插件，通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。文档比较全面，其官方网址为：http://www.trirand.com。效果如下图所示：

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,{ name: 'BusinessType',index: 'BusinessType',width: 60,{ name: 'CreateUserName',index: 'CreateUserName',width: 55,{ name: 'ExeUserName',index: 'ExeUserName',width: 65,{ name: 'ExpArea',index: 'ExpArea',{ name: 'ExpSeqv',index: 'ExpSeqv',width: 77,{ name: 'ExpAcre',index: 'ExpAcre',{ name: 'ExpShi',index: 'ExpShi',formatter: transHuX,width: 67,{ name: 'ExpZhuangX',index: 'ExpZhuangX',{ name: 'ExpFloor',index: 'ExpFloor',width: 59,{ name: 'ExpPriceT',index: 'ExpPriceT',formatter: transExpPrice,{ name: 'S2',index: 'S2',formatter: custStates,width: 53,{ name: 'CreateDate',index: 'CreateDate',formatter: transDate,{ 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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!