所有内容都是在项目中使用过
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(“姓名”).;