温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

jqGrid的用法详解

发布时间:2020-07-27 23:25:35 阅读:765 作者:瑞雯 栏目:编程语言
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

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

jqGrid的用法详解

js代码如下:

function initData(p{
    $("#customerMainList").jqGrid({
        url"",
        datatype"local",
        colNames: ['编号''客户姓名(跟进)''类型''添加人''分配给''期望区域''期望小区''期望面积''户型''期望装修''期望楼层''期望总价''状态''添加时间''操作'],
        colModel: [
   		{ name'Id', index'Id', formatter: tranCustId, width70, align"center" },
   		{ name'CustName', index'CustName', formatter: transName, width98, align"center" },
   		{ name'BusinessType', index'BusinessType', width60, align"center" },
   		{ name'CreateUserName', index'CreateUserName', width55, align"center" },
   		{ name'ExeUserName', index'ExeUserName', width65, align"center" },
   		{ name'ExpArea', index'ExpArea', width70, align"center" },
   		{ name'ExpSeqv', index'ExpSeqv', width77, align"center" },
   		{ name'ExpAcre', index'ExpAcre', width70, align"center" },
   		{ name'ExpShi', index'ExpShi', formatter: transHuX, width67, align"center" },
   		{ name'ExpZhuangX', index'ExpZhuangX', width60, align"center" },
   		{ name'ExpFloor', index'ExpFloor', width59, align"center" },
   		{ name'ExpPriceT', index'ExpPriceT', formatter: transExpPrice, width59, align"center" },
        { name'S2', index'S2', formatter: custStates, width53, align"center" },
   		{ name'CreateDate', index'CreateDate', formatter: transDate, width65, align"center" },
   		{ name'id', index'id', formatter: transOp, width74, align"center" }

   	],
        rowNum20,
        hoverrowstrue,
        rowList: [1520253035404550],
        pager'#pager2',
        sortname'Id',
        viewrecordstrue,
        sortorder"desc",
        height"100%", emptyrecords"没有记录", forceFittrue, gridviewtrue, pginputtrue,
        prmNames: { page"page", rows"rows", sort"sidx", order"sord", search"_search", nd"nd", npagenull },
        viewsortcols: [false'vertical'true],
        onSelectRow: function (rowid, status) {
            ShowCustomerDetail(rowid, true);
        }
    });
    $("#customerMainList").jqGrid('navGrid''#pager2', { editfalse, addfalse, delfalse, refreshfalse, searchfalse });
    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

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×