一、最近接触了jqgrid插件，好多坑啊....都一一记录下来了，分享有需要的同学；先介绍用法啊~~网上有好多关于jqgrid的插件，github上面star较多的是 free-jqgrid，jqgrid是基于jquery的，所以别忘记安装jquery
npm install free-jqgrid
npm insall jquery
配置文件引入query，全局使用$
// build/webpack.dev.conf.js
plugins: [
// 添加jquery插件
new webpack.ProvidePlugin({
$:'jquery',
jQuery:'jquery',
})
....
]
二、展示可编辑表格
// 第一步，定义table标签，id标注元素
hello
// 第二步，引入jqgrid插件、调用插件方法
效果图：
base.png
三、接着完善功能点，添加行、删除行、表格里面表单验证，大概其做成这样界面...
uptable.png
1.添加行
addRow() {
var emp = { materialSn: "", name: "", model: "", supplierName: "", unitCode: "个", price: "", enabled: true}
/**
* arg1: addRowData
* arg2: rowid新行的id号
* arg3: data新行的数据
* arg4: position 插入的位置（first：表格顶端；last：表格底端；before：srcrowid之前；after：srcrowid之后）
* arg5: srcrowid：新行将插入到srcrowid指定行的前面或后面
* */
$("#list4").jqGrid("addRowData", 0, emp)
}
存在一个bug，添加多行进行编辑操作，会发现单元格编辑内容窜位，比如编辑某个单元格后点击加号添加一行，又回去编辑，页面不是正常逻辑走。
解决思路，方法一：rowid不能重复 运用随机函数加时间戳生成唯一标识，这里定义了extend函数
// 文件名：jqgridExtend.js
(function($) {
function getRandom(type, len) { //1-字母,2-数字,4-字符
var str_num = "0123456789",
str_char = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",
str_specchar = "~!@#$%^&()";
var newstr = "",
uuid = [];
type = type || 3; //默认字母+数字
len = len || 6; //默认长度6
if(type & 0x1 << 0) newstr += str_num;
if(type & 0x1 << 1) newstr += str_char;
if(type & 0x1 << 2) newstr += str_specchar;
for(i = 0; i < len; i++) uuid[i] = newstr[0 | (Math.random() * newstr.length)];
return uuid.join('');
};
$.jgrid && $.jgrid.extend({
lyAddRowData: function(data, position, srcrowid) {
var time = new Date().getTime();
var prefix = getRandom() + "-";
if(data instanceof Array) {
for(var i = 0, l = data.length; i < l; i++) {
data[i]['__rowid__'] = prefix + (time + i + 1);
}
this.jqGrid('addRowData', '__rowid__', data, position, srcrowid);
} else {
this.jqGrid('addRowData', prefix + time, data, position, srcrowid);
}
},
});
})(jQuery);
//页面引入
import jqgridExtend from '@/libs/jqgridExtend'
addRow() {
var emp = { materialSn: "", name: "", model: "", supplierName: "", unitCode: "个", price: "", enabled: true}
$("#list4").jqGrid("lyAddRowData", emp)
}
解决思路，方法二：获取表格列表的长度，在最后面插入数据
var emp = { materialSn: "", name: "", model: "", supplierName: "", unitCode: "个", price: "", enabled: true}
var rowid = rows.length + 1;
$("#list4").jqGrid('addRowData', rowid, emp, 'last');
2.删除行
delRow() {
//删除选中行
var ids = $("#list4").jqGrid('getGridParam', 'selarrrow')
for(var i = 0; i < ids.length; i++) {
$("#list4").jqGrid("delRowData", ids[i])
}
}
看着代码好简洁 是么~ 有坑啦、选中好几行进行delete操作，可只删除了一行...
因为数组是实时变化的，在删除一个元素后数组长度变了...
// 改良代码
delRow() {
//删除选中行
var ids = $("#list4").jqGrid('getGridParam', 'selarrrow')
var len = ids.length;
for(var i = 0; i < len; i++) {
$("#list4").jqGrid("delRowData", ids[0])
}
}
3.表单验证
简单粗暴思路遍历循环验证...在做的过程中，发现不是想的那样...原来的错误代码不演示了
// vue data 绑定aflag变量，初始化true
jqGridValidate(list) {
// 校验jqGrid表单
var _this = this;
_this.aflag = true
recursive(list)
function recursive(params){
for(var i = 0 ; i < params.length ; i++){
var obj = params[i]
if(obj.name.trim() === ""){
_this.$message.error('亲~刀具-名称不能为空');
_this.aflag = false
return false;
}
if(obj.unitCode.trim() === ""){
_this.$message.error('亲~刀具-单位不能为空');
_this.aflag = false
return false;
}
if(obj.price.trim() !=='' ){
if(!/^[+-]?(0|([1-9]\d*))(\.\d+)?$/g.test(obj.price)) {
_this.$message.error('亲~刀具-单价必须是数字');
_this.aflag = false
return false;
}
}
}
}
if(_this.aflag) return true
}
// 保存函数中
// jqgrid表单验证
var flag = this.jqGridValidate(rows)
if(!flag) return
4.保存
jqGrid API文档说明了，编辑模式下不要调用getRowData，得到数据行列信息包含的是单元格的innerHTML，而不是实际输入控件的值
解决思路：记录编辑的单元行以及单元格、getRowData之前进行saveCell或者restoreCell操作，俩个函数都写了...
// 记录编辑的单元行以及单元格
// vue data 定义俩个变量记录 lastrow、lastcell，beforeEditCell函数里面获取具体的行列值
jqtable() {
// 清空jqGrid表格数据
$("#list4").jqGrid("clearGridData")
// 初始化jqgrid
var _this = this
$("#list4").jqGrid({
data: [],
colNames: ['sn', '名称', '型号', '供应商', '单位', '单价', '是否启用'],
loadonce: true,
....
beforeEditCell: function(rowid, cellname, v, iRow, iCol) {
// 记录编辑的行和列下标
_this.lastrow = iRow;
_this.lastcell = iCol;
}
});
// 默认添加一行
this.addRow()
}
// 获取table里面的表单列表值
$("#list4").jqGrid("saveCell", this.lastrow, this.lastcell) //保存单元格，切换为文本模式
$("#list4").jqGrid("restoreCell", this.lastrow, this.lastcell) //保存单元格，切换为文本模式
var rows = $("#list4").jqGrid('getRowData')
5.编辑后的保存操作
场景：编辑打开页面默认原始数据有4条，删除最后一条，进行保存，页面报错了，具体报错地方this.lastrow这里，因为删除操作记录了this.lastrow=4，因为删除了，不存在第四条记录，saveCell、restoreCell时候就报错了
$("#list4").jqGrid("saveCell", this.lastrow, this.lastcell) //保存单元格，切换为文本模式
$("#list4").jqGrid("restoreCell", this.lastrow, this.lastcell) //保存单元格，切换为文本模式
解决思路：删除操作后，初始化this.lastrow=0
delRow() {
//删除选中行
var ids = $("#listT").jqGrid('getGridParam', 'selarrrow')
var len = ids.length;
for(var i = 0; i < len; i++) {
$("#listT").jqGrid("delRowData", ids[0])
}
// 解决jqgrid删除已存在的行，获取其余数据报错
this.lastrow=0
}