jqgrid 备忘

项目中应用到jqgird，然后研究了下，会了基本的表格搭建，今天总结一下。

在学习jqgrid的过程中，最主要的还是要阅读官方文档，官方文档里有大量的demo及源码非常实用。

中文官网：http://blog.mn886.net/jqGrid/

英文官网：http://www.trirand.com/blog/jqgrid/jqgrid.html

gridComplete 每次加载完数据或者jqGrid中的数据变动都会加载一次里面的函数,如果addRowData写在这里面则会无限循环执行里面的函数
loadComplete jqGrid加载完毕之后执行里面的函数,jqGrid中的数据变动不会执行loadComplete中的代码

项目中用过的jqgird实例：

 
 
/** 
 * options：创建表格所需要配的参数：<br> 
 * { <br> 
 *   sid: service ID             （必配）<br> 
 *   pagerId: 分页栏ID            （必配，不显示分页栏可配为空字符串）<br> 
 *   colNames： 表格列的列名      （必配）<br> 
 *   colModels：表格列的属性      （必配）<br> 
 *   datatype : 服务器端返回的数据类型,默认为local(不加载),json(初始化就加载数据)（选配）<br> 
 *   height : 手动设置表格高度,默认为auto （选配）<br> 
 *   rowNum : 设置初始化显示表格记录数,默认显示10条数据,默认显示所有数据配为-1（选配）<br> 
 *   searchParam：搜集查询条件    （选配）<br> 
 *   formId : 条件查询formId         （选配）<br> 
 *   shrinkToFit: 是否按比例初始化表格宽度（选配，默认按比例初始化，不按比例(即显示横向滚动条)配为true）<br> 
 *   rownumbers：是否显示行号         （选配，默认不显示，显示配为true）<br> 
 *   viewrecords：是否显示总记录数     （选配，默认显示，不显示配为true）<br> 
 *   rowList：是否显示可选记录数       （选配，默认为[10,20,50]，不显示配为{},修改可配为 例：[5,10,20]）<br> 
 *   multiselect：是否支持多选        （选配，默认支持，不支持配为true）<br> 
 *   pgbuttons:是否显示翻页按钮      （选配，默认显示，不显示配为true）<br> 
 *   pginput:是否显示跳转页面的输入框    （选配，默认显示，不显示配为true）<br> 
 *   caption:是否显示表格标题        （选配，默认不显示，显示直接配表格标题字符串）<br> 
 * } <br> 
var grid_selector = "#grid-table";//定义一个变量grid_selector 值为"#grid-table"
        var pager_selector = "#grid-pager";//定义一个变量 pager_selector 值为 "#grid-pager"
        jQuery(grid_selector).jqGrid({ //jqgrid
            datatype:function(postData){ //ajax
                $.ajax({
                    url:"${pageContext.request.contextPath}/role/listRoleModifyHistory?roleId="+getQueryString("id"),
                    data:postData,
                    dataType:'json',
                    complete:function(jsondata,stat){
                        if(stat=="success") {
                            var thegrid = jQuery(grid_selector)[0];
                            thegrid.addJSONData(jsondata.responseJSON);
                        }
                    }
                });
            },
            height: 320,
            rownumbers :true,
            colNames:['日期','操作','内容','原因'],
            colModel:[
                {name:'updatedOn',index:'updatedOn',width:100, sortable:false},
                {name:'oper',index:'oper', width:180, sortable:false},
                {name:'modifyData',index:'modifyData', width:180, sortable:false},
                {name:'opDesc',index:'opDesc', width:160, sortable:false}
            ],
            viewrecords : true, // 是否记录总数
            rowNum:10, //显示记录条数
            rowList:[10,20,30],//下拉框 改变显示条数
            pager : pager_selector,//定义翻页用的导航栏，必须是有效的html元素。翻页工具栏可以放置在html页面任意位置
            altRows: true,// zebra-striped
            multiselect: false,//定义是否可以多选
            multiboxonly: true, //只有选择checkbox才会起作用
            loadComplete : function() {//jqgrid加载完毕后执行函数
                var table = this;
                setTimeout(function(){//0秒后执行一次
                    updatePagerIcons(table);//调用updatePagerIcons(table)
                    enableTooltips(table);}, 0);//调用enableTooltips(table)
            },
            caption: "修改记录",//表头
            autowidth: true//根据父元素比例调整宽度
        });
        //begin--table分页按钮
        function updatePagerIcons(table) {
            var replacement =
            {   'ui-icon-seek-first' : 'icon-double-angle-left bigger-140',
                'ui-icon-seek-prev' : 'icon-angle-left bigger-140',
                'ui-icon-seek-next' : 'icon-angle-right bigger-140',
                'ui-icon-seek-end' : 'icon-double-angle-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'}); //提示框
        }//end--table分页按钮
    });