Web开发之Jqgrid动态添加行

function addWorkGroupLine(){
var tableObject = $(’#workgroup’);
//获取表格的初始model
var colModel = tableObject.jqGrid().getGridParam(“colModel”) ;
var newRow = JSON.stringify(colModel);
var ids = tableObject.jqGrid(‘getDataIDs’);
//如果jqgrid中没有数据 定义行号为1 ，否则取当前最大行号+1
var rowid = (ids.length ==0 ? 1: Math.min.apply(null,ids)-1);
var rowid = Math.abs(rowid);
var newrowid = (0-rowid);
//设置grid单元格不可编辑 （防止在添加时，用户修改其他非添加行的数据）
tableObject.setGridParam({cellEdit:false});
//将新行追加到表格头部
tableObject.jqGrid(“addRowData”, newrowid,newRow,“last”);
//设置grid单元格可编辑（防止追加行后，可编辑列无法编辑）
tableObject.jqGrid(‘editRow’, newrowid, false);
}

以上是完善后的第一种方法
jqgrid添加行有两种方式一种是通过获取jqgrid的colModel属性直接添加行；另外一种是自己拼接一个类似colModel的数组，通过addRowdata的方式添加到jqgrid里面。

第一种实现方法：

[javascript] view plain copy
function addRowData(tableId){ //创建一条空的记录，待编辑
var tableObject = $(’#’+tableId);
//获取表格的初始model
var colModel = tableObject.jqGrid().getGridParam(“colModel”) ;
var newRow = JSON.stringify(colModel);
var ids = tableObject.jqGrid(‘getDataIDs’);
//如果jqgrid中没有数据 定义行号为1 ，否则取当前最大行号+1
var rowid = (ids.length ==0 ? 1: Math.max.apply(Math,ids)+1);
//获得新添加行的行号（为什么是负数呢,与编辑行差别对待）
var newrowid = (0-rowid);
//设置grid单元格不可编辑 （防止在添加时，用户修改其他非添加行的数据）
tableObject.setGridParam({cellEdit:false});
//将新行追加到表格头部
tableObject.jqGrid(“addRowData”, newrowid,newRow,“first”);
//设置grid单元格可编辑（防止追加行后，可编辑列无法编辑）
tableObject.jqGrid(‘editRow’, newrowid, false);
}

上面的方法是从其他博客里找到的，不过这个行号就是一个负数，上面的也有注释解释为什么是负数。

第二种方式比较繁琐，而且还有一些问题，不过就是容易理解，

[javascript] view plain copy
function addWorkGroupLine(){
var reccount = KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲workgroup").get…{soulutionNum}"/>’;
jQuery("#workgroup").jqGrid(‘addRowData’, reccount + 1, {
id:varId,
memberName : varTemp2,
ownerOrgName : varTemp3,
roleName : varTemp4,
contactMobile : varTemp5,
contactTel :varTemp6,
contactEmail:varTemp7,
memberMemo:varTemp8,
a1:varTemp1,
solutionId:varTemp9
});
}

在这里面添加一行的id是jqgrid已经有的行数+1，而且是添加在最后一行，添加完成以后还会触发grid的gridComplete方法如果你页面加载的时候已经使用了iput框替换原来grid的内容这里需要添加一个判断。判断的根据就是通过获取的值是否包含input或则select来进行判断。

例如：

var record = $("#professionGroup").jqGrid(‘getRowData’, rowIds[i]);
var groupName=record.groupName;
if(groupName.toLowerCase().indexOf(“input”)<0){

}

这里就是通过grouName中是否有input来判断是否执行for循环。

至于为什么使用toLowerCase(),是因为IE版本的问题，在IE8下替换为内容以后尽管你写的时候input是小写，IE在给你解析的时候还是会变为INPUT这种大写形式，在firefox和IE9以上版本就没有这个问题。