2019-03-27 vue 结合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标注元素
<template>
    <div style="margin-left:30px;">
        <!--jqgrid插件-->
        <table id="list4"> hello</table>
    </div>
</template>

// 第二步，引入jqgrid插件、调用插件方法
<script>
import jqGrid from 'free-jqgrid'
import 'free-jqgrid/dist/css/ui.jqgrid.css'

export default {
        mounted() {
            this.jqtable()
        },
        methods: {
            addRow() {
                // 添加行
                var emp = { materialSn: "", name: "", model: "", supplierName: "", unitCode: "个", price: "",  enabled: true}
                $("#list4").jqGrid("addRowData",0, emp)
            },
            jqtable() {
                // 清空jqGrid表格数据
                $("#list4").jqGrid("clearGridData")
                
                // 初始化jqgrid
                var _this = this
                $("#list4").jqGrid({
                    data: [],
                    colNames: ['sn', '名称', '型号', '供应商', '单位', '单价', '是否启用'],
                    loadonce: true,
                    viewrecords: true,
                    gridview: true,
                    width: 'auto',
                    iconSet: "fontAwesome",
                    multiselect: true,
                    cellEdit: true,
                    emptyrecords: "No records to display",
                    colModel: [
                    { name: 'materialSn', index: 'materialSn', width: 60, sorttype: "int", editable: true},
                    {name: 'name', index: 'name', width: 90,editable: true},
                    {name: 'model', index: 'model', width: 90, editable: true},
                    {name: 'supplierName', index: 'supplierName', width: 90, sorttype: "float", editable: true },
                    {name:"unitCode", index:"unitCode", width:100,align:"center",editable: true,edittype:"select", editoptions:{value: {0:'件',1:'个',2:'瓶'}}},
                    {name: 'price', index: 'price', width: 80, align: "right", sorttype: "float", editable: true},
                    {name: 'enabled',index: 'enabled',width: 60,align: 'center',formatter: 'checkbox', editoptions: {value: 'true:false'}, formatoptions: {disabled: false}}
                    ]
                });
                // 默认添加一行
                this.addRow()
            }
        }
    }
</script>

效果图：

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
}