JqGrid 使用方法總結 (一次性加載數據)

     <div>
        <table id="grid-table"></table>
        <div id="grid-pager"></div>
     </div>

發送全Json數據無需在進行加載

    var grid_data = {};
    $.ajax({
        type: 'POST',
        url: '/URL',
        async: false,//必須加入
        cache: false,//必須加入
        dataType: 'json',
        success: function (data) {
            grid_data = eval(data)//賦值到Data
        },
    });

開啓自動設置寬度

   $(window).on('resize.jqGrid', function () {
            $(grid_selector).jqGrid('setGridWidth', parent_column.width());
        })

渲染JqGrid

        var grid_selector = "#grid-table";
        var pager_selector = "#grid-pager";

        //初始化表格
        jQuery(grid_selector).jqGrid({
            data: grid_data,         //獲取JSON數據來源
            datatype: "local",       //更改連接數據方式，可增加數據地址
            height: 250,             //設置高度
            rowNum: 200,             //每頁數據條數
            rowList: [200, 500, 1000, 5000, 20000],
            viewrecords: true,       //是否要顯示總記錄數 
            pager: pager_selector,   //設置初始的頁碼
            altRows: true,           //就是描述了zebra畫圖時的線條粗細的值。 
            multiselect: true,       //定義是否可以多選
            //multikey: "ctrlKey",   //是否只能用Ctrl按鍵多選，shiftKey，altKey，ctrlKey 
            multiboxonly: true,      //multiselect= true.起作用，當multiboxonly 爲ture時只有選擇checkbox纔會起作用 
            editurl: "URL",          //Url地址發到後臺，進行增刪改
            caption: "數據表格",
            autowidth: true,         //如果爲ture時，則當表格在首次被創建時會根據父元素比例重新調整表格寬度。如果父元素寬度改變，爲了使表格寬度能夠自動調整則需要實現函數：setGridWidth  
            toppager: true,          //是否在上面顯示瀏覽導航欄
            colNames: ['', 'id', '試卷名稱', '排序方法'],
            colModel: [
                {
                    name: 'myac', index: '', width: 200, fixed: true, sortable: false, resize: false,
                    formatter: Kaoshi
                },
                { name: 'id', index: 'id', width: 60, sorttype: "int", hidden: true, editable: true },
                { name: 'name', index: 'name', width: 80, editable: true, editoptions: { size: "20", maxlength: "50" } },
                { name: 'orderBy', index: 'orderBy', width: 90, editable: true, edittype: "select", multiple: true, editoptions: { value: "a:順序;b:亂序" } },

            ],
            loadComplete: function () {  //加載事件
                var table = this;
                setTimeout(function () {
                    styleCheckbox(table);
                    updateActionIcons(table);
                    updatePagerIcons(table);
                    enableTooltips(table);
                }, 0);
            },       
    });

開啓數據表分組 加入到 渲染JqGrid

            grouping: true,
            groupingView: {
                groupOrder : [ 'asc' ],                     // 分組後的排序
                summaryType : 'max',                        // 運算類型，可以爲max,sum,avg
                groupField: ['testPaper'],                  // 按照哪一列進行分組
                groupColumnShow : [true],                   //是否展示分組列
                groupDataSorted: true,                      //是否顯示彙總.如果爲true需要在colModel中進行配置
                groupSummary: [true],                       //是否開啓彙總頁腳
                groupCollapse: [false],                     //加載數據時是否只顯示分組的組信息
                groupText: ['<b>{0}</b>'],                  //組名的展示文字
                showSummaryOnHide : true//是否在分組底部顯示彙總信息並且當收起表格時是否隱藏下面的分組
                plusicon: 'fa fa-chevron-down bigger-110',
                minusicon: 'fa fa-chevron-up bigger-110',

            },
            caption: "Grouping"

自定義按鈕

 colModel: [
                {
                    name: 'myac', index: '', width: 200, fixed: true, sortable: false, resize: false,
                    formatter: Kaoshi  //使用方法外部定義
                }
            ]

  //外部方法
  function Kaoshi(value, grid, rows, state) {
            return "<a href=\\Url?Id=" + rows.id + "\&groupBy=" + rows.orderBy + " style=\"color:#f60\" onclick=\"Modify(" + rows.id + ")\">開始考試</a>"
        }

開啓底部的功能按鈕

        jQuery(grid_selector).jqGrid('navGrid', pager_selector,
            { 	
                edit: true,   
                add: true,
                del: true
            },

各類型表數據備用

//數據int
{name:'id',index:'id', width:60, sorttype:"int", editable: true},
//數據datatime
{name:'sdate',index:'sdate',width:90, editable:true, sorttype:"date",unformat: pickDate},
//數據string
{name:'name',index:'name', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}},
//數據Bit
{name:'stock',index:'stock', width:70, editable: true,edittype:"checkbox",editoptions: {value:"Yes:No"},unformat: aceSwitch},
//下拉數據
{name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},
//備註大框
{name:'note',index:'note', width:150, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}} 

//pickDate格式化
function pickDate( cellvalue, options, cell ) {
	setTimeout(function(){
	$(cell) .find('input[type=text]').datepicker({format:'yyyy-mm-dd' , autoclose:true}); 
	}, 0);
  }

//aceSwitch格式化
function aceSwitch( cellvalue, options, cell ) {
	setTimeout(function(){
	$(cell) .find('input[type=checkbox]')
			.addClass('ace ace-switch ace-switch-5')
			.after('<span class="lbl"></span>');
	}, 0);
  }