jqGrid可通过addRowData函数添加行，支持单个对象和数组，但是都需要指定rowId行号，而且不能重复，否则后续取表格行数据就会有问题。于是问题来了，为了调用addRowData添加行，还得搞个全局变量等行号生成器，极其影响团队开发效率，也不利于代码维护，因此需要扩展addRowData函数，开发人员只要传数据即可。
1、addRowData函数说明
addRowData(string rowid, mixed data, [string position], [string srcrowid])
Inserts a new row with id = rowid containing the data in data (an object) at the position specified (first in the table, last in the table or before or after the row specified in srcrowid). The syntax of the data object is: {name1:value1,name2: value2…} where name is the name of the column as described in the colModel and the value is the value.
This method can insert multiple rows at once. In this case the data parameter should be array defined as
[{name1:value1,name2: value2…}, {name1:value1,name2: value2…} ] and the first option rowid should contain the name from data object which should act as id of the row. It is not necessary that the name of the rowid in this case should be a part from colModel.
parameters：
- string rowid - the id for the new inserted row，行号
- mixed data - array or object with the data，如果是数组的话，rowid设为数组对象的某个属性名称
- string position - where to insert the row (‘first’, ‘last’) in the grid or ‘before’ ‘after’ a srcrowid. Default is last. before和after时需要指定参考行id，srcrowid
- string srcrowid - set the id of the row from where to insert the new one (after, before) position=before和after时需要
return：
true on success, false otherwise
2、addRowData封装
1）jqGrid扩展
(function($){
$.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);
2）一个关键生成随机串函数
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('');
};
3）addRowData封装，用随机串+时间戳自动填充行号
3、案例说明
页面截图：
页面html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jggrid-addrow</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.bootcss.com/jqgrid/4.6.0/css/ui.jqgrid.css" />
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
</head>
<body>
<div class="page-content container">
<div class="page-head" style="padding: 15px 0"> <!-- page-head -->
<button type="button" class="btn btn-sm" onclick="addRow1()">原生addRowData-1</button>
<button type="button" class="btn btn-sm" onclick="addRow2()">原生addRowData-2</button>
<button type="button" class="btn btn-sm" onclick="addRow3()">改进addRowData-1</button>
<button type="button" class="btn btn-sm" onclick="addRow4()">改进addRowData-2</button>
</div><!-- page-head -->
<div class="page-body"> <!-- page-body -->
<div class="panel panel-default" id="panel-orders">
<table id="orders"></table>
</div>
</div>
</div>
<script type="text/javascript">
var gCount = 0;
function getData(rowCount) {
var data = [];
for (var i = 0; i < rowCount; i ++) {
gCount++;
data.push({
sid: gCount,
bill_id: "row-" + gCount,
bill_detail: gCount,
goods_id: gCount,
unit_id: gCount,
package_id: gCount,
ref_detail: gCount,
goods_no: gCount,
goods_name: '零件名称' + gCount,
car_type_name: '车型' + gCount,
package_name: '包装器具' + gCount,
unit: i%2==0 ? '件' : '箱',
snp: 0.89,
box_count: gCount,
total_count: gCount,
goods_count: gCount,
out_count: gCount,
bill_no: 'BN0000000' + gCount,
})
}
return data;
}
function addRow1() {
var rowData = getData(1)[0];
console.log(rowData);
$("#orders").jqGrid("addRowData", "row-" + gCount, rowData);
}
function addRow2() {
var rowData = getData(5);
console.log(rowData);
$("#orders").jqGrid("addRowData", "bill_id", rowData);
}
function addRow3() {
var rowData = getData(1)[0];
console.log(rowData);
$("#orders").jqGrid("lyAddRowData", rowData);
}
function addRow4() {
var rowData = getData(5);
console.log(rowData);
$("#orders").jqGrid("lyAddRowData", rowData);
}
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('');
};
$(function() {
$("#orders").jqGrid({
colModel: [
{label: "零件号", name: "goods_no", width: 60},
{label: "零件名称", name: "goods_name", width: 180},
{label: "车型", name: "car_type_name", width: 70},
{label: "包装器具", name: "package_name", width: 70},
{label: "单位1", name: "unit", width: 60},
{label: "装箱率", name: "snp", width: 50, sorttype: "number"},
{label: "箱数", name: "box_count", width: 40, sorttype: "number"},
{label: "需求总数", name: "total_count", width: 70, sorttype: "number"},
{label: "需求数量", name: "goods_count", width: 70,},
{label: "出库数量", name: "out_count", width: 70, sorttype: "number"},
{label: "订单号", name: "bill_no", width: 120},
],
datatype: 'local',
rownumbers: true,
height: 300,
rowNum: 1000
});
});
/** jqgrid 扩展 start．**/
(function($){
$.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);
</script>
</body>
</html>
按钮说明：
1）原生addRowData-1，添加单个对象
2）原生addRowData-2，添加数组对象
3）改进addRowData-1，添加单个对象
4）改进addRowData-2，添加数组对象