jqGrid的用法详解-创新互联
jqGrid是一种用来显示网格数据的jQuery插件,通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。文档比较全面,其官方网址为:http://www.trirand.com。效果如下图所示:
创新互联建站成都网站建设专业公司,是成都网站设计公司,为成都木制凉亭提供网站建设服务,有成熟的网站定制合作流程,提供网站定制设计服务:原型图制作、网站创意设计、前端HTML5制作、后台程序开发等。成都网站营销推广热线:028-86922220js代码如下:
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
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
标题名称:jqGrid的用法详解-创新互联
文章URL:http://scyanting.com/article/eihhj.html