项目中使用的jqGrid

        /* jqgrid定义 */
        jQuery(grid_selector).jqGrid({
          //解析从Server返回的json数据
          jsonReader : {
            root : "rows", // json中每行的记录
            page : "currentPage", //json中代表当前页码的数据  
            total : "totalPageSize", //json中代表页码总数的数据
            records : "totalRecords",//总记录数
            repeatitems : false,//通常设置为false
            id : "DISC_CODE",//解析rows中的id值,作为该行的id(默认就是id)
          },
          prmNames : {
            search : "search",//search参数
            id : "DISC_CODE",
          },
          postData : {
            approval_status : true,//设置为审批查询
            user_id : $('#user_id').val()
          //设置当前登录id
          },
          caption : "",//表格的名称
          cellEdit : false,//设置单元格是否可点击修改,false为不可以
          url : "discount/list",//请求路径
          datatype : "json",//数据类型
          mtype : "GET",//提交方式
          height : 350,//jqgrid高度
          hoverrows : true,//当为false时mouse hovering会被禁用,true时鼠标移动到行时高亮显示
          rownumbers : true,//添加行号
          viewrecords : true,//显示总记录数
          altRows : true,//设置为交替表格,交替颜色区分
          rowNum : 10,//一页显示记录条数
          rowList : [
              10, 20, 30
          ],//可选的一页显示记录数
          autowidth : true,//true，重新计算表格相对于父元素的宽度。在表格建立时执行。如果建立之后表格父元素宽度改变，需要自动调整宽度，使用setGridWidth方法来实现
          emptyrecords : "当前获取数据为空...",//当表格没有数据时显示的提示信息，仅当viewrecords配置为true时有效。
          loadtext : "数据加载中...",
          pager : pager_selector,//分页元素
          pagerpos : "center",//定义分页栏位置,left、center、right
          pgbuttons : true,//显示分页按钮
          pginput : true,//是否显示跳转页面输入框
          pgtext : "{0} 共 {1} 页",//显示页数与总页数信息
          recordpos : "right",//定义了记录信息的位置： left, center, right
          //           colNames : [
          //               '折扣代码', '描述(中文)', '描述(英文)', '产品代码', '折扣类型', '适用于', '维护状态', '最后修改人', '最后修改日期'
          //           ],//定义表头内容显示的字符串数组。注意此数组长度要和colModel配置的数组长度一致
          /* JSON数组对象描述列的参数。 */
          colModel : [
              {
                label : "折扣代码",
                name : 'DISC_CODE',
                width : 80,
                editable : true,
                sortable : false,
                searchoptions : {//搜索参数
                  sopt : [
                    'cn'
                  ],//设置包含
                },
                jsonmap : "DISC_CODE",
              }, {
                label : "描述",
                name : 'DISC_DESC_TXT',
                width : 80,
                editable : true,
                sortable : false,
                searchoptions : {//搜索参数
                  sopt : [
                    'cn'
                  ],//设置包含
                },
                jsonmap : "DISC_DESC_TXT",
              }, {
                label : "产品代码",
                name : 'FUND_CODE',
                width : 80,
                editable : true,
                sortable : false,
                searchoptions : {//搜索参数
                  sopt : [
                    'cn'
                  ],//设置包含
                },
                jsonmap : "FUND_CODE",
              }, {
                label : "折扣类型",
                name : 'DISC_TYPE_CODE',
                width : 80,
                editable : true,
                sortable : false,
                search : false,
                jsonmap : "DISC_TYPE_CODE",
                formatter : function(data){
                  return sysDIT.positive[data]
                }
              }, {
                label : "适用于",
                name : "DISC_APPLY_CODE",
                width : 80,
                edittable : true,
                sortable : false,
                search : false,
                jsonmap : "DISC_APPLY_CODE",
                formatter : function(data){
                  if (data == "F") {
                    return "产品收费"
                  } else if (data = "C") {
                    return "公司收费"
                  }
                }
              }, {
                label : "维护状态",
                name : "UPDATE_STATUS",
                width : 80,
                editable : true,
                sortable : false,
                search : false,
                jsonmap : "UPDATE_STATUS"
              }, {
                label : "最后修改人",
                name : "MNT_MAKER_ID",
                width : 80,
                editable : true,
                sortable : false,
                search : false,
                jsonmap : "MNT_MAKER_ID",
              }, {
                label : "最后修改日期",
                name : "MNT_MAKER_DNT",
                width : 80,
                editable : true,
                sortable : false,
                search : false,
                jsonmap : "MNT_MAKER_DNT",
              }
          ],
          //在所有数据加载进入表格和所有处理已经完成后触发。在排序，分页等操作后也会触发。
          loadComplete : function(){
            var table = this;
            setTimeout(function(){
              
              //加载完成后，替换分页按钮图标
              updatePagerIcons(table);
              enableTooltips(table);
            }, 0)
          }
        })

  //替换分页按钮为奥森字体图标
        function updatePagerIcons(table){
          var replacement = {
            'ui-icon-seek-first' : 'ace-icon fa fa-angle-double-left bigger-140',
            'ui-icon-seek-prev' : 'ace-icon fa fa-angle-left bigger-140',
            'ui-icon-seek-next' : 'ace-icon fa fa-angle-right bigger-140',
            'ui-icon-seek-end' : 'ace-icon fa fa-angle-double-right bigger-140'
          };
          $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
            var icon = $(this);
            var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
            
            if ($class in replacement)
              icon.attr('class', 'ui-icon ' + replacement[$class]);
          })
        }
        
        function enableTooltips(table){
          $('.navtable .ui-pg-button').tooltip({
            container : 'body'
          });
          $(table).find('.ui-pg-div').tooltip({
            container : 'body'
          });
        }
        
        //底部操作栏事件,包括新增,查询,等...
        jQuery(grid_selector).jqGrid('navGrid', pager_selector, { //设置事件
          edit : false,//编辑
          editicon : 'ace-icon fa fa-pencil blue',
          add : false,//新增
          addicon : 'ace-icon fa fa-plus-circle purple',
          del : false,//删除
          delicon : 'ace-icon fa fa-trash-o red',
          search : false,//搜索
          searchicon : 'ace-icon fa fa-search orange',
          refresh : true,//刷新
          refreshicon : 'ace-icon fa fa-refresh green',
          view : true,//查看
          viewicon : 'ace-icon fa fa-search-plus grey',
        }, { //编辑操作
        }, { //新增操作
        }, { //删除操作
        }, { //search 表单
        }, {
          //展示每条记录view 
          url : "#page/discount/approval",
          href : true,
          id : "DISC_CODE"
        })

        function style_delete_form(form){
          var buttons = form.next().find('.EditButton .fm-button');
          buttons.addClass('btn btn-sm btn-white btn-round').find('[class*="-icon"]').hide();//ui-icon, s-icon
          buttons.eq(0).addClass('btn-danger').prepend('<i class="ace-icon fa fa-trash-o"></i>');
          buttons.eq(1).addClass('btn-default').prepend('<i class="ace-icon fa fa-times"></i>')
        }
        
        function style_search_filters(form){
          form.find('.delete-rule').val('X');
          form.find('.add-rule').addClass('btn btn-xs btn-primary');
          form.find('.add-group').addClass('btn btn-xs btn-success');
          form.find('.delete-group').addClass('btn btn-xs btn-danger');
        }
        function style_search_form(form){
          var dialog = form.closest('.ui-jqdialog');
          var buttons = dialog.find('.EditTable')
          buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class',
              'ace-icon fa fa-retweet');
          buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class',
              'ace-icon fa fa-comment-o');
          buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class',
              'ace-icon fa fa-search');
        }
        
        //触发window的resize.jqGrid事件
        $(window).triggerHandler('resize.jqGrid');
        
        // 必须添加
        //==================================================================================================
        $(document).one('ajaxloadstart.page', function(e){
          $(grid_selector).jqGrid('GridUnload');
          $('.ui-jqdialog').remove();
        });
      })