jqGrid的基本使用

最近几年的项目都在使用jquery+jqGrid。

摘下项目中应用的片段。

    $("#procInfoList").jqGrid({
        url: '../Handle/ProjectInfo.ashx',
        datatype: "json",
        height: 150,
        width: outWidth,
        rowNum: 20,
        rowList: [10, 20, 30, 50, 100],
        colNames: ['名称', '名称简写', '主/承办单位', '部门', '经办人', '合同价款', '付款方式', '付款单位', '收款单位', '项目开始时间', '项目状态', '备注'],
        colModel: [
   		{ name: 'Name', index: 'Name', width: 150, sorttype: "varchar", align: "left" },
        { name: 'ShortName', index: 'ShortName', width: 100, sorttype: "varchar", align: "left" },
        { name: 'Sponsors', index: 'Sponsors', width: 100, sorttype: "varchar", align: "left" },
        { name: 'Department', index: 'Department', width: 100, sorttype: "varchar", align: "left" },
        { name: 'ChargePeople', index: 'ChargePeople', width: 80, sorttype: "varchar", align: "left" },
        { name: 'ContractAmount', index: 'ContractAmount', width: 80, sorttype: "varchar", align: "left" },
        { name: 'PayType', index: 'PayType', width: 100, sorttype: "varchar", align: "left" },
        { name: 'PaymentCompany', index: 'PaymentCompany', width: 100, sorttype: "varchar", align: "left" },
        { name: 'GatheringCompany', index: 'GatheringCompany', width: 100, sorttype: "varchar", align: "left" },
   		{ name: 'BeginTimeString', index: 'BeginTimeString', width: 130, align: "left" },
        { name: 'ProStateString', index: 'ProStateString', width: 130, align: "left" },
   		{ name: 'Remarks', index: 'Remarks', width: 130, align: "left" }
   	],
        pager: "#pager",
        viewrecords: true,
        sortname: "BeginTimeString",
        sortorder: "desc",
        grouping: true,
        altRows: true,
        toolbar: [true, "top"],
        multiselect: true,
        multiboxonly: true,
        loadtext: "数据加载中，请稍候......",
        caption: "项目信息",
        onSelectRow: ClickRow,
        ondblClickRow: EditProject
    });
    $("#procInfoList").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false, search: false });
    $("#t_procInfoList").append("<img src='../images/add.jpg' alt='' style='margin:2px 0px;1px;20px;cursor:hand;' id='btnAdd'/> " +
    "<img src='../images/edit.jpg' alt='' style='margin:2px 0px;1px;10px;cursor:hand;' id='btnEdit'/>" +
    "<img src='../images/del.jpg' alt='' style='margin:2px 10px;1px;10px;cursor:hand;' id='btnDel'/>" +
    "<img src='../images/DueManage.jpg' alt='' style='margin:2px 10px;1px;20px;cursor:hand;' id='btnDueMgr'/>" +
    "<span style=\"margin-left:20px;margin-top:3px; vertical-align: top\">名称：<input type=\"text\" id=\"txtName\" style=\"width:100px;\" />(按回车键查询)</span>" +
     "<span style=\"margin-left:20px;margin-top:3px; vertical-align: top\">筛选：<select id='selProState' width='80' ><option value='2' width='80' >所有</option><option value='0'>履行中</option><option value='1' width='80' >履行完毕</option></select></span>");