jqgrid表格使用方法集合（持续更新······）

所有内容都是在项目中使用过

jqGrid的的的的的的是一个在jQuery的的的的的的基础上做的一个表格控件，以AJAX的方式和服务器端通信。

$(select).jqGrid({                  

    datatype: "local",              
    data: mydata,                   
    height: 600,                    
    width:900,                      
    shrinkToFit: false,             
    pager: "#pager",                
    rowNum: 50,                     
    rowList: [1, 20, 50],           
    viewrecords: true,              
    rownumbers: true,               
    multiselect: true,              
    sortorder: "desc",              
    sortorder: "asc",               
    sortorder: true,                
    colModel: [
        { label: '名称', name: 'Name', width: 210, align: "center",sorttype: 'integer'},
        { label: 'ID名', name: 'Id', width: 210, align: "center" },
        { label: '数量<i class="fa fa-sort"></i>', name: 'Number', width: 210, align: "center" },
        { label: '模块', name: 'ModuleId', width: 170, formatter: currencyFmatter},
        { label: '备注', name: 'Description', width: 200, align: "center" }
    ],    
    onSelectRow: function (id) {    // 点击当前行触发事件
     },                          
    footerrow: true,             // 底部合计
    gridComplete: summary,
})
// 设置表格前面的序列号
$(select).jqGrid('setLabel', 'rn', '序号', { width: "30px", padding: "0 2px" }, '');
$(select).setGridParam().hideCol("Id");   // 隐藏colModel中name是Id的名称：ID名

$(select).getCol('Number')            // 获取表格当前列（数量）的所有数值
$(select).jqGrid('getRowData')        //获取表格当前所有的行数据
$(select).jqGrid('getGridParam', 'records')    // 获取表格当前页的总记录数量
$(select).jqGrid('clearGridData');   // 重新加载前先清空表格
$(select).jqGrid('setGridParam', {   // 重新加载数据 因为数据是在本地处理,得再去服务器请求数 
                                        据后再更新视图
     datatype: 'local',
     data: myData,
     page: 1
}).trigger("reloadGrid");
// 自定义数值格式
function currencyFmatter(cellvalue, options, rowObject){  // 自定义格式化
    //cellvalue：要被格式化的值 
    //options：对数据进行格式化时的参数设置，格式为： 
    //{ rowId: rid, colModel: cm} 
    //rowObject：行数据
    // 最后把处理过的数据值return出去就好了
};
// 底部合计函数
function summary() {
   var Number= $(select).getCol('Number', false, 'sum');
   var ModuleId= $(select).getCol('ModuleId', false, 'sum');
   $gird.footerData('set',
        {
          "Name": '合计',
          "Number": "平均数量"+Number,
          "ModuleId": "模块数量 "+ModuleId,
         }
   );
}

插件中的配置项：

// $（select）是要挂载的容器（必须为table标签）

数据类型：“local”，//把数据请求到本地处理后再渲染表格，加上此属性才能
数据：mydata，//本地处理后的数据mydata
height：600，//设置表格的高度（可以根据窗口显示的窗口显示显示显示显示大小动态设置适
应每个尺寸$（父元素）.height（） - 25（用来配合peger的页高
度））
宽度：900，//设置表格的宽度
shrinkToFit：假的，//为false且设置了width value，则每列的宽度不会成比例缩放
pager：“＃pager”，//“＃pager”相当于JQ选择器，指定一个容器放置翻页类的显示
rowNum ：50，/ /设置表格中的默认显示多少条数据（和寻呼机属性搭配使用）
rowList：[1,20,50]，//数组内放置每页显示的下拉页码数（和寻呼机属性搭配使用）
viewrecords：真，//显示检索记录信息（和页面属性搭配使用）
rownumbers：真，//显示序号条数
多选：真，//设置为真，每行前面出现选择按钮（可以全选页的行数据）
排序顺序：“desc”的，//排升序
排序顺序：“ASC”，//排降序
排序顺序：真，//是否排序

colModel的值是接收一个数组对象的格式来渲染表格的头部

在colModel中的标签中可以添加一些标签，如上面的“数量”中

sorttype：'整数'在colModel里面加上这个，在当前“名称”列的数值就能正常排序了

而用上面的重新加载方法（本地数据'本地'），要配合的setTimeout（）延迟时间来执行（把刷新数据的函数放在定时器中），因为我用到层弹窗来触发

隐藏单个值的写法

$（选择）.setGridParam（）hideCol（“ID”）。

隐藏多个值的写法（JQ链式操作）

$（选择）.setGridParam（）hideCol（“ID”）hideCol（“姓名”）.;

jqgrid表格使用方法集合（持续更新······）

如有错误！留言指正，谢谢！正在完善中······

猜你喜欢