2019-03-27|2019-03-27 vue 结合jqGrid插件 2019-03-27vue结合jqGrid插件

一、最近接触了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标注元素

// 第二步，引入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; //默认长度6if(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) //保存单元格，切换为文本模式

【2019-03-27|2019-03-27 vue 结合jqGrid插件】解决思路：删除操作后，初始化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 }